DataWorks

Web Design

A redesign of the DataWorks brand and website to accompany the new phase of the company.

The Problem Space

About the Project

Short Term Work for DataWorks ATL

DataWorks is a company apart of the Georgia Tech College of Computing and funded by the NSF that provides nonprofit and civic organizations with data collection and analysis in the Atlanta area.

As DataWorks began to make changes to what they offer and how they are identified, there was also a need to upgrade their brand identity and web presence.

They wanted to create an identity that embodied the professional and collaborative nature of DataWorks, while also being fun and inviting.

My Role

I worked as a Web Designer and Developer to create deliverables every week. I conducted design research, designed wireframes, participated in design reviews, and developed the website.

Impact

The rebranding I did is used across the website and other social media platforms. The updated website aligns with the current goals of the company including hosting their new learning curriculum.

The Process

1

Research

Finding Inspiration

2

Design

Look and Feel

3

Prototype

Wireframing

4

Develop

Developing the Website

Research

Finding Inspiration

Companies similar to DataWorks

Center for Urban Pedagogy

Creative Reaction Lab

Gizmology Apprenticeship Program

Forum One

Hawai’i Data Collaborative

Design Takeaways

  • The inclusion of graphical elements across the websites

  • Large taglines

  • Brief informational blurbs and a button leading to a page holding larger amounts of text

  • Consistent branding across all pages

  • Purpose statements on the front page

  • Visual cues for clickable items

  • Clear separation of sections

I also hosted a design session with other team members in the company to ideate content for the website such as blog post topics, curriculum, social media content, and short form content.

Design

Identifying the Look and Feel

I developed a Look and Feel slide deck to illustrate typography, colors, graphical styles, and uses for illustration. This collection of elements was used to show where the branding was headed and give our graphic designer inspiration for pieces to use across all media.

Color Palette

Georgia Tech Colors

DataWorks Colors

Accessible Color Combinations

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Typography

Headers

Roboto Slab

abcdefghijklmnopqrstuvwxyz

Paragraphs, links, and buttons

Source Sans 3

abcdefghijklmnopqrstuvwxyz

Graphical Styles

*Some of these images come from the websites researched previously

Corporate Memphis and Memphis Style

Abstract and Geometric Style

Doodle and Collage Style

I wanted to look at ways we could combine some of these styles to create illustrations that matched the company more.

Combinations

  • Characters with abstract features

  • Reusable abstract elements

Corporate Memphis and Abstract

Corporate Memphis and Doodles

  • Memphis style characters with doodles surrounding them or added into their clothing

  • Doodles that can be reused

Examples of Use

Abstract Graphics for Services

Abstract Patterns for Backgrounds or White Spaces

Collages for Projects

Prototyping

Design and Wireframing

Low-Fidelity

Home Page

Portfolio Page

Research Page

Services Page

I went through a design review and presented it to stakeholders and other teams to receive feedback that helped me create the high-fidelity wireframes.

High-Fidelity

I focused on identifying the placement of colors, shapes, and content as well as identifying where graphics could be incorporated into the website.

Home Page

Portfolio Page

Research Page

Services Page

Develop

Final Website

Home Page

About and History Page

Portfolio Page

Services Page

Curriculum Home Page

Wrapping Up

Lessons Learned

Concluding the project, I presented the final work to stakeholders who liked the work I had done so much so that they have continued to utilize the website and the branding across social media platforms.

I really enjoyed my time working at the company and on the project as a whole! I learned a lot of new skills in branding, design, UX, and web development. A few things I learned:

  • It is important to bounce ideas off other teammates. Just because I’m the only designer doesn’t mean I have to ideate by myself.

  • Being able to communicate your ideas and thought process is vital in being able to bring everyone on board or catch people up on what new design standards are being followed in the company.

  • There always needs to be a reason behind your choices no matter how small. It’s good to stop and think about why every choice matters because sometimes it could reveal larger issues.