Is The Tech Industry Sexist?

Visualizing Women in Tech



When
Spring 2018

Duration
3 weeks

Tools
Sketch
HTML/CSS/Javascript


collaboration
Team of 2
The Challenge

Students were asked to deliver a free project with data of our choice.


My role
  • Created the visual theme for the project.
  • Contributed to setting the narrative and finding the data.
  • Coded charts 1 and 3.

Output
A with three interactive visualizations with the data we found and cleaned


Setting Narrative & Finding Data

We chose women in tech as our topic and decided on how to structure the story as well as finding the necessary data.



Visual Concept

I tried out various sets of typography, webpage layout, and color schemes. For the project proposal, I arbitrarily chose one of them to present in class to facilitate thoughts and feedbacks. Based on the remarks, I went on to craft a real, carefully designed visual theme. I took extra effort to choose color schemes that don't comply with gender stereotypes but still don't confuse the viewers. Below are some of the visual concepts.






Design Elements


Color Palette
Women
men




Typography Headline h2: Used for the sub-titles

Headline h4: Used for the titles of each charts

This is a paragraph. Used Work Sans 400 at 16px, with a 23px line-height in the color #282828.


Finished Visual Design

I finalized the visual design and started on creating static mockup with Sketch.






Working Website

We had to modify some of our visualizations according to the data we got. We fixed the style and code until the final presentation day. Below is the link to the project.






Reflection

We received a lot of positive remarks and constructive feedback on the presentation day. However, as we tried to apply the feedback, we learned that it was tough to fix the look of the charts or implement another feature after it's been coded. It was a valuable opportunity to learn the importance of each stage of the design process and getting feedback early on.