As promised, the “Design Secrets for a Non-Designer” blog was created to provide non-designers with additional examples and use cases that utilize the 5 design elements – purpose, flow, art & icons, color, and typography. The goal is to walk through a visualization that I’ve created (or edited) and show specifically how I’ve incorporated these elements into the final design.
With that being said... welcome to the viz specific blog!
A few weeks ago, I participated in #MakeoverMonday –a Tableau community data project that provides participants with a data set and original viz with the directive to create a better/more effective visualization. If you’re looking for an awesome way to practice your design skills with easy datasets, I highly recommend checking it out here (https://www.makeovermonday.co.uk/).
The topic of this week’s (wk. 49) visualization was the wage benefit of union versus non-union membership. The original article provided context accompanied by several graphs to essentially highlight the fact that members earn more than non-members. Here are the visualizations provided in the article:
Now that you understand the context of the viz at a high-level, let’s dive into the 5 design elements and how I used them to recreate the images above.
Purpose (Gather Requirements)
Based on the visuals and context provided in the original article, here are the requirements and/or highlights that I assumed the author was trying to provide. The order of the points listed below are based on the order mentioned or shown in the article.
1. A union is still very effective in protecting the rights of workers and their earnings even though union membership has decreased drastically from 2000 to today (2018). (highlighted as text in the title sub header and opening paragraph)
2. Median weekly earnings of union and non-union members from 2000 to 2018. (shown as “line chart”)
3. Median weekly earnings of men and women union and non-union members from 2000-2018. (shown as a “line chart”)
4. Median weekly earnings of White, Hispanic, and Black (African American) union and non-union members from 2000 – 2018. (shown as “line chart”)
Now let’s walk through a few of my Requirements Guidelines:
Understand the goal of the project.
The goal of this dashboard is to highlight that union members earn more than non-members. It’s also important to note that I am not trying to imply that there is a direct link to joining a union and having a higher wage.
Determine the audience’s analytical maturity.
Whenever I create public vizzes, I typically assume the lowest level of analytical maturity for my audience. I want to make sure that the viz can be understood by someone who may not have any Tableau or data analytic expertise. One of my favorite things to say when designing a viz is that if my grandmother can understand the viz, then it’s a good viz.
Refine and prioritize questions/requirements.
When looking at the original viz, there were some data points that were great, but I had more questions that were left unanswered. Therefore, I compiled an additional list of requirements (data points) that I wanted to highlight with this viz. Each section is listed in order of my priority.
1. Overall, present (2018) high-level number of:
All median weekly earning of union vs. non-union members
Men and women union vs. non-union members
White, Asian, Hispanic, and Black (African American) union vs. non-union members
2. Difference in present median weekly earning of:
All median weekly earning of union vs. non-union members
Men and women union vs. non-union members
White, Asian, Hispanic, and Black (African American) union vs. non-union members
3. Trend of median weekly earning of:
All median weekly earning of union vs. non-union members
Men and women union vs. non-union members
White, Asian, Hispanic, and Black (African American) union vs. non-union members
4. Difference between 2000 and present of:
All median weekly earning of union vs. non-union members
Men and women union vs. non-union members
White, Asian, Hispanic, and Black (African American) union vs. non-union members
Determine the views needed to answer the questions.
I like to think of myself as a simple chart user. Therefore, when selecting the chart types for the requirements above I chose easy charts that users could understand (going back to the intended audience of my viz). Below are the chart types I selected to represent each group of charts.
1. Overall, present (2018) high-level number of….
BANs – High level numbers that are good for providing overall/high-level context
2. Difference in present median weekly earning of….
Number with indicator (either an arrow or positive/negative symbol)
3. Trend of median weekly earning of…
Line chart
4. Difference between 2000 and present of…
Number with indicator (either an arrow or positive/negative symbol)
Template
Once I established the items that I wanted to highlight in the viz, the next step was to create a template using the template guidelines. View the image below to see the guidelines that I incorporated while constructing my template.
After I completed the template, I filled it in with the respective charts:
Colors
In creating the final viz shown above, there were many ways that I thought about strategically using color. View the image below to see the guidelines that I decided to incorporate.
Color Guidelines Additional Context:
Limit the number of dominant colors. Rule of 2.
Originally when I first created the viz I wanted to use two dominant colors – one for union members and one for non-union members as shown in the image below. The reason I decided against using two dominant colors was to eliminate the user having to continuously reference a legend to see which dominant color referred to which group. It’s easier to use one main color to refer to one group and leave the other group as a neutral color. All the end user needs to remember is that sky blue represents union members.
Get inspiration from art and other visuals.
While scrolling through twitter, I stumbled across a visualization that caught my eye about this same topic. Pablo Gomez was the author of the viz and one thing I really love about his work in general is his use of color and images. For this viz I really liked how he used the dark blue background accompanied by two dominant colors in his viz. His viz is the reason I decided to use a dark blue background with a pop of blue as the dominant color for my own dashboard.
Create accessible color schemes and test them.
After I finalized my color scheme, I made sure to test the viz colors using the color blindness simulator at https://www.color-blindness.com/coblis-color-blindness-simulator/. The goal here is to make sure that all users can easily interpret the difference in color between union and non-union members. The viz passed! Check out the simulator results in the image below.
Icons & Art
Just like color, icons and art can make your dashboard visually appealing. The dashboard was context and chart heavy; therefore, I did not want to overload the viz with too many icons to draw away from the topic. View the image below to see how I incorporated icons based on the Icons & Art Guidelines.
Icon Guidelines Additional Context:
Communicate meaning. Easy to recognize.
There are many places that icons could have been placed on this dashboard: female vs. male, union vs. non-union, race icons etc. Because there are so many ways that icons be used, I decided that I would only use one set of icons and colors to distinguish between union vs. non-union workers. I also wanted to make sure these icons were relatable overall and did not cater to a specific gender or race. In order to pick icons that communicated meaning and were neutral in context, I searched online for union icons. I found that fists and hand icons were commonly used. I was also inspired by the fist icon that I saw on Pablo’s viz. Deciding that I wanted to use a fist icon as well, I searched for one on flaticon.com and found the one used in the viz.
Font
Last, view the image below to see how I incorporated icons based on the Font Guidelines.
Font Guidelines Additional Context:
Be strategic with fonts and background colors.
Before the viz was finalized, I tested the sky-blue (#02bcff) font against the dark blue (#001f35) background using https://accessible-colors.com/. With this tool, I captured the smallest blue font used and inserted the hex codes for both the font blue and the background blue. Here are the results that passed!
Check out the final viz below. Click on the image to view the interactive version. Enjoy!
-Chantilly Jaggernauth