The design process behind my thesis project
Visualizing crime reporting behavior of victims of unlawful police violence in Germany
As my final work for my bachelor's degree in communication design, I created a website explaining unlawful police violence and visualizing the first results of KviAPol, a research project doing a study on this topic. I want to share my design process, which of course wasn’t this defined set of steps but more a constant back and forth between them.
Finding a topic
The hardest thing about a thesis is figuring out what the thesis will be about. I remember I was already worrying about it when I was just starting university. During the course of my studies, I found myself always picking the classes related to digital mediums. And there, in particular, data visualization got my attention. I’ve been impressed by how data journalism can map out a table with numbers into an explorable and emotional story. I knew I wanted to dive into this world.
The topic of police brutality was a lucky coincidence. I saw a call to participate in a survey for people who have experienced police use of excessive force held by the DFG-funded research project KviAPol. So I wrote an email asking whether I can use their data and visualize their research. They responded positively and since then they were giving me constant feedback on my thesis project.
Research
My topic opened up many fields: From everything related to data visualization (design, code, data journalism, storytelling…) to everything related to police brutality (The current laws, the institution, definition of violence…). So I just started to dig into everything:
- How journalistic stories are being visualized and how the data is presented there
- How these stories show attitude or false objectivity
- The tools being used to create charts and data visualizations
- How and why the laws concerning police violence are written like that
Narrowing down
Having all these options laid out, it was time to think about the scope of the project. The best way to do this is to define a problem: It’s a complex topic with legal terms. It’s not easy to get into it and read the long study. Now I was able to set my goal: Introduce and visualize the topic to render it more comprehensible. But what does “more comprehensible” mean? Well, it depends on the target group: As my main group, I want to target newspaper reader, where I can presuppose some level of data literacy and an interest in complex topics. But the personas I created are outside of this group: One is a policeman being critical about the study and the other persona is a football fan who is only marginally affected by unlawful police violence. I did this to also have someone in mind who will read it and search for errors meticulously and on the other hand to have someone whose attention I try to catch.
Now I could pick what I will be working on. I decided to present this topic from a legal point of view because excessive use of police force is only existing because of its legal base: The police institution is the only one being able to use physical force legally, therefore only in the case of an excessive use it becomes a crime. This legal point of view gave me the possibility to explain the basic foundation of this topic and then to go into the part of the study about crime reporting behavior as this being a crucial turning point when legitimate use of force becomes suspected to be illegitimate.
Telling a story
My common thread is the turning point when legitimate use of force becomes illegitimate. It’s key for the definition of police violence, the reported crimes, and the part of the study I’m focusing on: the reasons for and against filing a report.
Finding a style
My approach to creating a visual language was to find a balance between data journalist articles in newspapers and scrollytelling websites you scroll through just because it is fun to do so. I found it important that the data is presented in an easily understandable way. So I had to decide which level of complexity to show without leaving out important information and where to cut to ensure comprehensibility. The question of finding a balance and making a decision also runs through the other aspects of the design: Which typeface has a clear and sober appearance without being too static? Which colors draw attention and are easily distinguishable but not coming with a huge bias? For the font, I found the Neue Haas Grotesk is representing what I was looking for, it has the same roots as Helvetica but it keeps the personality of the original Neue Haas while Helvetica has lost it over the years. I went for bold colors in a muted shade: The orange is the main highlight color to catch the attention without feeling negative like red and without being directly associated with political ideologies or football clubs.
Realization
Each visualization and the website itself went through an evolution with many iterations in between.
First I was thinking about which type of graph to use and drafted several options, then I loaded the data into online tools to prototype a visualization and in the end, I drew them manually in Figma to have more visual freedom.
The website I also created first with Figma and then I realized it in Webflow. So besides using some custom code, I didn’t have to develop it. And this was a huge help being able to create the animations and making the page responsive (even though I’m not super happy about seeing the visualizations on mobile) without having to write code.
Feedback
Throughout the project, I was collecting feedback from various people to find usability problems and to enhance comprehensibility. I made revisions on the introduction because of it. In the beginning, the website was starting directly with the legal terms without giving a definition of what unlawful police violence actually is. Based on feedback, I separated the official numbers into two graphs: the proceeding rates and then the filing structure in detail to better lead the reader on what number I want them to look at. A friend was confused by the sankey chart and I gave it a better flow from top to bottom explaining each level.
It’s live
Check it out here.
Thank you for reading and a huge thanks to everyone supporting me on the way!
