DataWorks
Web Design
A redesign of the DataWorks brand and website to accompany the new phase of the company.
Made with
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
Identifying the Look and Feel
3
Prototype
Applying Design and Wireframing
4
Develop
Developing the Website
Research
Finding Inspiration
I started by looking at some recommended websites and a few that I found to better understand what other companies were doing. I took note of aspects I liked and wanted to incorporate into our branding and website.
Center for Urban Pedagogy
Creative Reaction Lab
Gizmology Apprenticeship Program
Forum One
Hawai’i Data Collaborative
What I liked and wanted to incorporate:
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.
As DataWorks wanted to keep their connection with Georgia Tech in their branding, I combined elements from Tech’s style and DataWorks previous branding.
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 use Roboto Slab
Roboto Slab
abcdefghijklmnopqrstuvwxyz
Paragraphs, links, and buttons uses Source Sans 3
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
Applying Design and Wireframing
Low-Fidelity
I mapped out what pages were needed and what content each page required.
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
Developing the Website
Final Website
Home Page
About and History Page
Portfolio Page
Services Page
Curriculum Home Page
Wrapping up and Lessons Learned
Concluding the project, I presented the final work to stakeholders and they liked the work I had done and 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.