Soapbox

App Concept

Project Overview

Soapbox is an app concept that combats rising hate crimes* through encouraging young adults who are interested in social work and advocacy to learn about and discuss hate crimes, and to donate to communities affected from hate crimes.
‍
‍*The following case study will use hate-crime interchangeably with racially-motivated crime. However, according to the Department of Justice, hate crime at the federal level is “a crime motivated against race, color, religion, national origin, sexual orientation, gender, gender identity, or disability.”

Role

UX / UI Designer & Researcher

Timeline

Sept 2021 – Nov 2021

Team

Jessica Hua, Kai Maurer-Mabangio, Rachel Yap, Shirley Lee, Emily Lam

Background

As racial tensions and hate crimes are on the rise and are brought to light, we wanted to help motivate people to take individual action to contribute to the larger cause of fostering inclusive communities.In the span of six weeks, our team designed a human-centered platform that encourages users to learn, discuss, and donate to causes related to hate crime.

User Research

‍In order to understand hate crimes better and provide a human-centered design, we conducted literature review, surveys, and interviews.

Literature Review
According to research and statistics from the Department of Justice, BBC News, ABC News, and Center for the Study of Hate & Extremism, many assert that hate crimes have been increasing every year and surges in violent cases are adversely affecting POC, LGBTQ+, and other minority communities involved. We must inform ourselves about the effects of hate crime in order toshow support and help victims, send messages about community intolerance to hate crime, and educate law enforcement to provide the resources to keep people safe.‍
Collecting DataWe conducted online surveys and virtual interviews to gain insights on the users needs and goals. We conducted 7 interviews with young adults between the ages 18 to 24 around California. The interview incorporated survey questions with additional expanded follow-up and open-ended questions.

QuestionsSome of the survey questions include
“How do you inform yourself on the topic of hate crimes?”
‍
“Do you think there is an efficient system to inform people of hate crimes?”
‍
“What do you think is the best way to do your part in fighting against hate crimes?”

‍
‍Interviews were conducted with expanded questions from the survey. We asked users to elaborate on their answers and asked additional questions to figure out what some people were doing for long-term commitments to change.
Some of the additional questions include
‍“How often do you share information?”
‍
"What actions do you take to help with the crimes?”

“Have you had conversations with friends about racially-motivated crimes and hate crime?”‍
Insights From our surveys and interviews, we noticed a lack of centralization about hate crime information between platforms and an absence of dialogue among users when addressing the larger issues behind hate crimes.

Some of the data gathered shared some insights and pain points related to learning and platforms related to discussing hate-crime.

51.4% believe that there is an inefficient informational platform for hate crimes
‍
80.6% become aware of the hate crime through social media platforms
Pain Points
1. Concern about legitimacy of news
2. Lack of dialogue
3. Performative activism

Some notable statements that stood out shared their experiences with spreading news and information. The interviewees shared their lengthy experiences to share information and learn more about the news.
‍
“I always like to inform myself by being active on social media because that is where I mostly find my news on what is happening around in the world. With platforms such as Twitter or Instagram, you can share news happening with your network and people who are outside of it. I like to also double check my sources by googling more "legit" sites such as Fox or Times.” –Natalie (22)
‍
“I show support by reading up on hate crime experiences that others have shared through social media platforms. I also listen to my friends who have been involved in these crimes, and assure them that I’m looking out for them. I’ve donated a little in the past, and plan to do so more often.” – Daniel (18)

Competitive Analysis:Before designing our application, we researched features in existing applications that allowed users to stay informed and that encouraged dialogue. Even though existing platforms allow people to donate and share information about donations, it does not create an area for discussion and there is no transparency about the aftermath.

Affinity Mapping:Our original idea was “how might we create a more effective way for people to financially support the fight against hate crimes?”

After the first round of research, we realized the prompt that we were designing around did not align with our users' needs. Through our research, we found out that solely relying on monetary support to prevent hate crime is the manifestation of “performative activism” which was one of the worries of our team and users. We decided to go with an additional round of interviews and surveys to confirm our idea that we need to move beyond streamlining donations to streamlining information and discussions surrounding hate-crime. We synthesized the findings by using an affinity mapping to provide us with a visual representation of the team’s thought process.

Refined Problem
How might we encourage people to take action against hate crimes?

SolutionThree insights helped to drive the direction of our app. They are: 1. Dialogue is often the most productive form of education
2. Donations are sometimes given without understanding the reason behind it
3. Social media enables performative activism, which is ineffective for real change.
Then we created our User Persona and User Flow

Visual Design

For our initial design, I sketched the desktop view of Soapbox. I designed a section where users are able to post their comments and thoughts on racially-charged issues and post them on a digital whiteboard. Then a spacer with the Merriam-Webster dictionary definition of a hate crime would appear to give an idea of the following content. As they scroll further down, the news section will allow users to read more about current events related to or regarding hate crimes. The users will also be prompted to join the newsletter to catch up on daily information. A section for users to take action is below the subscription, with resources providing them direct access to sites with more information and direct support sites.

User Testing & Feedback

Dialogue Section
‍In the Dialogue section, after the first user test we had to change the style of the tags and cards to create a unified design. I explored other applications with similar user flows and activities and collaborated with another member to create our own version.Based on the feedback, the user wanted a color system that reflected the urgency and sensitivity of the topic and a search and filter system related to the topics within hate crime. Additionally, we had to further improve the flow and prototype.

Mid-Fi Prototype

Usability Update
‍The color palette was changed to reflect the message the SoapBox wanted to represent, so the new colors chosen better reflected action and urgency. The Save pages were also saved to one local page so it would be more intuitive for the users. Filters were updated with micro-interactions to let the users know which filters were selected. A slider was also created to update the user information based on proximity.

Hi-Fi Prototype

Design System

Soapbox design urges users to be urgent about taking action against hate crime. The contrasting colors between the red and the blue encourages users to take a closer look at the issue at hand: Hate Crime and find ways to prevent it. Open Sans was chosen because it was an accessible font that was legible.

Final Design

After putting everything together, our final solution is Soapbox: a mobile application that motivates individuals to take action against hate crimes through learning from a collection of resources, creating meaningful discussions about urgent issues, and contributing to different causes with educated donations

Learn Section

Customized Feed
‍Our learn section provides users with a collection of resources about different issues that they can use to educate themselves. The landing page provides a customized feed of highlighted resources, as well as recommended topic tags for the user to explore.
‍Search & Filter
‍We included a search bar to allow the user to find resources about any issues they are interested in and after searching, users can filter through what they’d like to see by tag or by media type.

Resource Collection
The resource collection includes a variety of media types, as we found through our research that some people prefer articles, while others prefer videos or podcasts. Users get a preview of the resource and a button brings them off site to access the resource in full. Each resource page also provides recommendations to encourage users to continue their learning.
Upload Resources
Since our app is meant to be a collection of resources put together by the community of users, they can easily upload and share educational material here.

Discuss Section

In the Discuss section, thoughtful dialogue can acknowledge different perspectives while inviting empathy. And questions that lead to conversation allows the community to solve a problem together and perhaps begin to validate that people’s stories and concerns are heard and understood.

Join a discussion
Once users have filtered and searched to their heart’s content for a discussion, users are briefed by a preview where they can read about the purpose and context of the discussion before joining. Users can then scroll through threads, post and reply, and even link resources to support their thoughts.
Create a discussion
Users can also create their own discussion and be the one to start the conversation. Users can enter a discussion title, give a description or context, and add tags to help categorize content using keywords.

Search & Browse
Search Bar in Discuss that allows users to search for a specific discussion and browse if it is not on their Recommended Discuss feed.
Filter the content
Users can also filter and sort their information in combination with different tags or even choose specific locations, which allows them to engage with their community or different communities across the world. For example, if someone from New York wanted to see discussions about San Francisco, they can change their preferences in the filter.

Donate Section

Users are able to find organizations to specific links and foundations to help certain causes.

Search Organizations
On the donation page, users can browse different organizations and filter them to their liking.

Organization Profiles
Selecting an organization’s card opens up a profile that includes a mission statement, link to donate externally, and similar recommended organizations.

Save Section

All from one place
The saved page brings together all the bookmarked contents in one convenient page that encourages long-term engagement.

Takeaway

This project has inspired me to further conversations about hate crime and educate myself and others to fight it. I learned to let go of ideas and adapt to situations that would benefit the overall goal of the user of educating and starting meaningful conversations with others to tackle the problem.

Next Steps
‍Given more time, we would’ve liked to integrate a feature that checks the quality of resources that users upload through reporting or alerting. We want to ensure that Soapbox is a safe and reliable platform for users to learn. One of our goals is helping users develop long-term commitment to educating themselves and fighting hate crime, not just when it is a popular topic. A potential idea is creating a feedback system for donations, which would allow users to share their donation with others on social media and encourage future donating. Another idea is integrating a daily recommendation system, to encourage users to learn about something new everyday.

Full Case Study Here