Visualizing Hate Crimes in the USA: Two Lenses of Understanding
Meet our team! Omar K. El-Etr, Andrew Gray, Katherine Lordi, & Judy Peng
Here are our data visualizations for Hate Crimes in the USA!
Now how did we get there?
For the ‘Design for Understanding’ design sprint, we took advantage of the power of data visualizations. We designed for two different approaches using the same data set while keeping Human-Centered Design and users at the forefront.
→ Clear Communication. Construct a series of graphs and charts that give an in-depth, unbiased, and clear portrait of our data.
→ Persuasion and Storytelling. Present the data in the most compelling way possible to create a long-lasting impact on users.
Throughout the design process, we kept in mind that some data visualizations are better than others depending on their purpose. This occurs because of how visual perception leverages unique pathways in our brains.
Thanks to Tableau, our team brought our data visualization ideas to life. Shoutout to Ken Flerlage for teaching us some cool Tableau tricks!
The Dataset
After perusing through a variety of datasets (and even changing out dataset a couple of times), our team decided to use FBI Hate Crime Statistics.
We chose this data set because we are interested in the effect of geopolitics in the U.S. on crime incidents over time. We chose the years 2008 through 2017 to compare data from the presidencies of different political parties — President Obama (Democrat) and President Trump (Republican).
The Design Approach
Our team used the Five Design-Sheet (FDS) process and iterated on our designs based on feedback from our fellow students in Prof. Evan Peck’s Human and Computer Interaction (HCI) class.
In the following sections, we walk through our design process and show intermediate steps to arrive at our final data visualizations for both clear communication and persuasion.
In our conclusion, we take a step back and compare and contrast the two design approaches. Throughout the entire design process, our team kept human-centered design (HCD) in mind.
Brainstorming
In order to generate as many ideas for our data visualizations as possible and start narrowing down our ideas, our team utilized Sheet 1 — Brain Storm.
Generate Ideas: Sketches
Below are some of our team’s preliminary sketches for both the clear communication and persuasion piece. In this sketching and brainstorming step, our primary focus was figuring out which data (ie. rows and columns) to present and how to present it in a way that users can look at it and quickly while learn something impactful about hate crimes in the USA.
Filter & Categorize the Sketches
After generating many possible ideas of chart and graph ideas for visualizing meaningful data trends through sketching, our team (2) filtered and (3) categorized the charts/graphs/sketches in order to identify which data visualization they best belong — clear communication or persuasion.
Sketches (Graphs/Charts) for Clear Communication:
- Line graph showing changes in the number of hate crimes per 100k population versus time for each state (each state has a different color line)
- Bar graph comparing states that displays data about the number of agencies submitting hate crime incident reports versus the total number of participating agencies (agency report rate)
- Pie chart (or line graph if including change over time) showing average percentages of different bias motivations and victim types for hate crimes
- Line graph showing how the total number of hate crimes in the USA changes over time (2008–2017)
Sketches (Graphs/Charts) for Persuasion:
- Interactive U.S. Map displaying changes in number of hate crimes per 100k population over time (2008–2017)
- Line graph showing how the total number of hate crimes in the USA changes over time (2008–2017)
- Scatterplot showing bias motivation and victim data over time (2008–2017)
Combine and Refine: Sketching the Dashboards (User Interface)
In the combining and refining step, our team focused on the dashboard designs for both clear communication and persuasion.
The dashboard is important because it serves as the user interface and is what the user interacts with. It also organizes the collections of charts and graphs that visualize the FBI Hate Crime statistics.
Therefore, our team created the dashboard with an HCD approach in mind.
Dashboard (User Interface) Design
In the designing of the dashboard, our team considered Andrew J. Ko’s Theory of User Interfaces.
Two key takeaways that our team drew from Ko’s theory for our dashboard design are the importance the gulf of execution and affordances.
Since the goal is to narrow the gulf of execution — or knowledge gap — that people face when working with user interfaces, our team decided to make our dashboards as simple and text minimal as possible.
This is reflected in the dashboard sketch below.
Affordances are also importance because they prompt user interactions to produce a desired effect.
Our team took these affordances into consideration while designing the interfaces in tableau and where to position affordances that control aspects such as time and state filters.
Colors
In thinking about the color scheme for the dashboards, we wanted to keep the colors consistent for clear communication and persuasion so that they go well alongside one another.
To go along with the themes of hate crimes and politics, we chose the colors red, black, white, and blue for our color scheme.
Text & Font
We considered methods for choosing good fonts for complex data.
One major takeaway is the importance establishing a data hierarchy through type size, as larger and bolder texts indicate headers while smaller texts note content.
Through using different text sizes, colors, and boldness in this way while considering dashboard design, we designed a more readable and user-friendly interface for our data visualizations.
Arrangement & Organization
In the brainstorming process, we thoroughly considered how graphs and charts are arranged on the dashboards for clear communication and persuasion to tell a meaningful story.
For example, when users view the clear communication dashboard, we want their eyes to flow in a natural order that makes sense and tells a coherent story.
Additionally, for the persuasion piece, our low-fi designs (shown below) was to have two graphs on top of one another because when we move the animation of time that moves from left to right, we want the user to see the changes in hate crime data for both graphs simultaneously.
In the sketch below, we want the user to see the progression for bias motivation (we changes that to total hate crimes per 100K individuals on our final viz) as the concentration of hate crimes in different states changes over time.
Question
Before moving onto drafting initial designs, we asked ourselves the following questions.
Do the brainstormed graphs/charts for the clear communication piece tell a complete and accurate story of hate crime statistics in the USA?
Do pairs of graphs/charts and animations tell an interesting and coherent story about hate crimes in the USA? How would viewers perceive it?
Our team ensured that we generated enough ideas to answer these questions confidently to create a successful data visualization for clear communication and for persuasion.
Initial Designs
Creating initial designs for our data visualizations for both clear communication and persuasion helped our team refine our ideas and utilize the HCD principles we have been learning in class to create feasible functional and visual designs for our dashboards.
In this step, we combined our chart/graph designs with our dashboard designs. Below, are examples of initial design for clear communication and persuasion.
Realization Designs
We developed the realization designs in Tableau after sketching initial designs and then received feedback from our classmates in HCI in order to iteratively improve our designs.
In addition to our sketches, our team used Tableau throughout the design process in order to see data trends clearly.
Clear Communication
Persuasion
Second Iteration Design based on Feedback
Our team iterated on our design to arrive at our final products for clear communication and persuasion based on class feedback in “I like, I wish, what if…” format.
Based on the feedback we received, our team made improvements to our realization designs in the following areas.
Clear Communication
Dashboard Colors
People make associations and assumptions about the information they previously see.
For example, one point that Andrew Ko makes in A theory of user interfaces is that people assume closer dots are related to each other. In our case, because we used blue and red lines in the line graph, our classmates assumed that the bar graphs had a similar color code.
Therefore, we colored the states with highest agency report rate with red and blue to indicate red and blue states in order to maintain consistency between graphs.
Reorganization and Context
In order to improve dashboard design and information flow, our team reorganized the charts and graphs and added text boxes in order to provide the user with more context about hate crimes. This helped the dashboard tell a better story.
We also added clear sub-sections for National, State, and Types of Victim and Bias Motivations so that users know what kind of data they are looking at.
Donut Charts
To improve the design, we also added donut charts to display percentages of types of bias motivations and victims in order to provide a bigger picture of hate crime data in the U.S. based FBI Hate Crime statistics.
We decided to do a combined donut chart for better comparisons and simplicity.
Hex Maps
We decided to use a hex map instead of the default Tableau map in order to get rid of the influence of state size on the data displayed.
With the default map, the small states such as Washington D.C. are very hard to see despite their intense color, indicating more hate crimes in that region.
Then, we realize that because DC had an astonishingly high number in 2017, other states had similar colors and were difficult to differentiate from one another. Thanks to Ken Flerlage, we added an option to remove DC so that color intensities can be more distinctive and comparable.
Persuasion
Dashboard Title
Our first iteration’s title was “Hate Crimes in the USA (2008–2017)”. Since this title is not the most memorable and persuasive, we changed it. “What Trump has done for the United States” seemed to be a bit more captivating of the story that the persuasion data visualization is telling.
Conclusion: Compare & Contrast
Data Visualizations for Clear Communication VS Persuasion
According to Kellogg Insight, data is more than just pretty graphics; it has the power to make an impression.
For our persuasion visualization, we wanted to present the hate crime statistics in a way that tells a story. We achieved this by guiding the user through a visual progression of time starting from the year Obama took office until one year into Trump’s presidency.
Tableau’s animation feature made it easy to use changes in movement and color to grab the user’s attention and help create an element of persuasion. Our goal was to allow the user to sit back and let the data explain itself.
In addition, we purposely did not start our line graph at 0. This allowed changes in hate crime data to look more extreme, thus persuading the viewer further.
For clear communication, we assumed that we already captured the viewer’s attention. This allowed us to focus on displaying the data accurately in an in-depth, unbiased manner and enabling users to learn something from the data.
For example, unlike the persuasion viz, we did not start any line graphs at 0 to skew how the user sees the data.
We also provided the user with context about hate crimes in the United States in order to enhance their understanding about the data.
Reflection and Final Thoughts
Our team is extremely happy with how our two data visualizations turned out for FBI Hate Crime Statistics (2008–2017).
Throughout the process, we not only learned a bunch about how to present data visually using softwares such as Tableau, but we also gained a lot of knowledge about data analysis and hate crime data in the United States. Additionally, we had the opportunity to practice HCD design processes, iterate on design based on user feedback, and design data visualizations through two unique lenses of understanding — clear communication and persuasion.
