Researcher | Content Writer | Designer | Developer
I began this thesis project with a selected topic, a specific medium, and a goal, as well as many design challenges between me and the final project. This case study is meant to explore those challenges and the design thinking used to achieve the final project.
If you would like to know more about my research for the topic you can watch the speech I gave at the conclusion of the project or read my prospectus.
The project will focus on Racism and Mass Incarceration with an emphasis on the role of white evangelicals in creating and ending these systems of oppression.
The final project will present the subject material through a website due to it’s easy accessibility and shareability.
My goal is to educate White Evangelicals on the history of racism and mass incarceration, explain what their ancestors' roles were in creating those systems of oppression, demonstrate that these issues are at large today, and convince them that they need to be part of the change that ends racism and mass incarceration.
1. How do I guide people through this serious and controversial topic?
2. How do I make the final thesis project accessible?
3. With such a content heavy topic, how to I visually break up the information into easily digestible pieces?
4. How do I visually convey the current urgency of fixing these issues and show that they are deeply rooted in our country's history?
Through my research I gathered that there were three main ideas my target audience had about the issues of racism and mass incarceration:
1. They are issues and we need to do something.
2. They are issues but I do not think we are at fault or need to do anything.
3. Racism and mass incarceration are not issues.
To understand how best to target different viewpoints I turned to websites on the topic of climate change, a similarly serious and controversial topic. I studied three websites that had similar objectives: Explain a large subject, teach viewers their role in that subject, and change people’s minds so that they do something about that subject.
Your Plan Your Planet is a Google site meant to show people how they can save water by changing small daily habits. Save the Rainforest is a website that encourages people to become donors to their project to help save the rainforest in Africa. National Climate Assessment lays out the extensive content of the full report so that people can easily digest all the information.
All of these sites use a guided narrative that moves users smoothly from point to point drawing them toward the end goal without overloading them with information or giving them information they are not prepared to hear yet. By doing this the websites control what information people see and exactly when they see it. Unlike a book where users can flip to any page at anytime, websites can control the path of the user.
I used these findings to help organize the flow of my website and create my site map. There are three different entry points for each perspective with a unique introductory paragraph meant to make the users think about why they believe what they believe before entering the full site. The website uses cookies to prevent users from skipping ahead pages but still allows them to return to the site and pick up where they left off. There is minimal navigation meant mainly to help users visually track their progress through the website. All of these elements allowed me to make sure my users took a very specific path to understand the history of these issues so that they could better understand why racism is so potent today and then understand why we must act.
One of the key factors in choosing this medium was its accessibility. My target audience covers a vast age range so I needed a platform that could reach everyone in that group. Because of this, one of the most important aspects of the website design was that it was very responsive and would function equally well on everything from large desktop screens to small smartphones.
Understanding the importance of accessibility informed the way I laid out the final pages so that they could easily transition to tablet and mobile sizes without losing the flow of the visual and verbal story. To achieve this I chose to use a three column layout for desktop screens which allowed for flexibility in each section’s layout and allowed me to use CSS Grid to easily transition all sections to a one column layout for mobile devices.
This was one of my biggest challenges because the average user only reads 20% of a website’s content and I had 8,000 words awaiting them. I kept this important statistic in mind as I wrote the content making sure that my writing could be easily broken up into smaller paragraphs, quotes, and sections. I created a unique style for each of these text elements and I interspersed image and quote break-pages to allow a visual pause to the narrative. Using my responsive three column grid I also alternated which columns the content was located in. By doing this, the site continually re-grabs the user's attention and the content feels less overwhelming because users rarely have to read more than a handful of sentences at once.
Left Column
Center Column
Right Column
On the history page, I also told a completely visual narrative for laptop and desktop viewers. Each section has a main image that directly relates to the content so that without even reading a single word on this page, the images alone tell the history of racism.
For mobile devices with less room for large imagery, I focused on making pulled quotes and new sections very visible so that the key text could be easily identified. As part of the visual narrative on the history page I also replaced images with a solid black background in the two sections that explain the major negative events of the 13th Amendment and the War on Drugs, to represent the seriousness of these historical moments.
Through monotone and desaturated imagery historical and current images can tell the continued story of how these systems of oppression have flowed through our country. The style of imagery maintains consistency while making sure none of the images feel outdated or irrelevant.
Orange conveys a sense of urgency, helps with decision making, confidence, and understanding so that people are motivated to action.
Black shows the sadness, fear, and the seriousness of this topic.
White provides a feeling of goodness, understanding, and possibility to show that there are things that can be done and there is hope for the future.
The final website came together to form a narrative of the history of racism in our country that visually and verbally guides users from the colonization of America to the violence of police brutality today, focusing on what it means to be white and Christian in the midst of a racist country.