Role: UX/ UI Design
Tools: Figma, Illustrator, Photoshop, Miro, Notion
Soapbox is an application I designed with four others over the span of six weeks. The app encourages users to learn about social movements, discuss these topics, and donate to organizations that matter to them. The prototype is open to test below.
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. Awarded: Most Customer-Centric Experience, Most Innovative UX, and runner up for the Audience Choice Award.
More people are using online platforms to learn about hate crimes, but young adults in America have trouble staying informed on hate crimes due to scattered resources and lack of conversations about issues of inequality, justice, and discrimination. Our team wanted to tackle these barriers and figure out, how might we encourage people to take action against hate crimes?
Our human-centered process spanned over six-weeks. The main tools we used were Figma, Notion, and Google Surveys.
During the research phase, we conducted literature reviews, surveys, and interviews to understand and gain more insight about hate crime and our users.
Before diving into surveys and interviews, we sought to understand hate crimes and why it is an issue that should be addressed. According to the Department of Justice, hate crime at the federal level is defined as “A crime motivated against race, color, religion, national origin, sexual orientation, gender, gender identity, or disability.”
Hate crimes have been increasing almost every year in the US since 2014. Although hate crimes decreased by 7% in 2020, it is suspected that it is due to the pandemic and the lack of public interaction. On the other hand, there has been a 150% increase in hate crime against Asian-Americans, 7% rise in religion-based hate crime, and 14% increase in crimes targeting Jewish institutions.
The surge in violent cases of hate crime towards minorities has terrorized and adversely affected the communities involved. It is important that we inform ourselves about the effects of hate crime, so we can show support and help the victims, send messages about the communities’ intolerance to hate crime, and assist law enforcement to understand the gravity of the situation and the resources needed to keep people safe.
In our updated survey, we asked new open and closed ended questions to identify how people engage, why they engage, and where they engage with the topic of hate crimes. Of the 36 responses we received from youths (ages 15–24) and young adults (ages 18–25), 51.4% believe that there is not an efficient system to inform people of hate crime. Additionally, many mentioned that the best way to combat hate crime is to stay informed, educated on the topic, and spread awareness about the topic.
We conducted a total of 7 interviews. We also asked users to guide us through their process of learning about hate crime and what their next steps were.
We structured our interview into two parts:
1. Open ended questions about how users learn about hate crime and what they do to be an ally.
2. Follow up questions about the survey and asked interviewees to expand on their answers.
From our interviews, we noticed that there was a lack of cohesion about hate crime information between platforms and an absence of dialogue between users when addressing the larger issues behind hate crimes.
After gathering survey responses and conducting user interviews, we were surprised to learn how scattered pathways to taking action against hate crimes were. Users used a variety of platforms, mediums, and sources to decide how they would end up taking action, whether that be through donating, organizing, educating, etc.
Before diving into designing our application, we researched what features in existing applications allowed users to stay informed and increase dialogue. Through studying other platforms like GoFundMe and Reddit, we drew inspiration from features that could possibly counter the pain points mentioned.
With the information we gathered from our user research, we then created two user personas. Our accumulation of different insights and common patterns helped us to create two user personas, a manifestation of the data in a character. Here, we can see our users’ preferences on how to solve problems, goals, motivations, frustrations, and needs.
The initial direction of our project focused on the idea that not all anti-hate crime fundraisers receive adequate funding. It is also difficult for people to find the correct resources to donate to, confirm the legitimacy of these fundraisers, and determine whether their financial support is making a difference. However, we found through our research that the financial aspect was already well-done by other platforms. Our research also revealed that people actually wanted to educate and inform themselves.
After our first round of research we realized the prompt we were designing around did not align with our users’ needs. Solely relying on monetary support as a solution to hate crimes is the direct manifestation of the same type of “performative activism” that both we and our users were concerned about, leading us to take a new direction with our research.
After we developed a new problem statement that allowed us to explore more solutions, we set off on a second round of user research complete with additional interviews and surveys.
“How might we encourage people to take
action against hate crime?”
During our synthesis and ideation phase, we synthesized our research findings using affinity mapping. After making connections within our data and identifying common behaviors, we narrowed down three main insights that we used to drive the direction of our app:
Using our insights from affinity mapping, we sketched ideas for possible solutions. Some key ideas included: creating a community where people can exchange perspectives, a location feature that allows users to help locally, and curating resources to provide users with relevant information.
After uniting our sketches, we created a user flow to better understand the new architecture of our app. We decided to organize and structure our content into three main sections that focused on helping people take action against hate crimes: learn, discuss, and donate.
We then created lo-fi wireframes guided by the user flow. This basic skeletal framework of the app allowed us to focus on functionality over appearance.
Using the information and sketches gathered, we prototyped and moved into our first round of usability testing to test the user’s ability to navigate the app and overall first impressions.
We created a set of realistic tasks to engage users and their goals in each section of the prototype. This first round of testing was crucial in providing good insights for changes within our initial user flow.
In preparation for our second round of user testing, we focused on unifying our overall visual design in our medium fidelity wireframes.
We implemented a neutral color palette that we felt allowed users to approach topics with a more receptive, open mind. We wanted to go for something neutral, comfortable, and calm in response to the news and stories on the app that may be a source of strong emotions such as frustration and anger.
After making all of these changes, we then moved into our second round of user testing.
In this round of testing, we instructed users to perform the same tasks for each existing section. We focused on understanding our users’ intuitive decision-making, attitudes, and emotional response to the app.
And so, we refined our final prototype based on these insights.
Lastly, we realized that our original color palette was too muted, lacked character, and did not reflect the message we wanted our platform to represent.
So, we revised our design system and chose colors that better reflected action and urgency. We wanted to make users feel more motivated, inspired and energized to take action; to educate themselves, to have conversations that address issues of justice, and to see the urgent needs in their communities.
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.
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.
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.
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.
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.
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.
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.
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 Bar in Discuss that allows users to search for a specific discussion and browse if it is not on their Recommended Discuss feed
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.
On the donation page, users can browse different organizations and filter them to their liking.
Selecting an organization’s card opens up a profile that includes a mission statement, link to donate externally, and similar recommended organizations.
The saved page brings together all the bookmarked contents in one convenient page that encourages long-term engagement.
Designing the app has been a challenging and rewarding journey.
After our first round of research we realized the prompt we were designing around did not align with our users’ needs. Solely relying on monetary support as a solution to hate crimes is the direct manifestation of the same type of “performative activism” both us and our users were concerned about, leading us to take a new direction with our research.
Because of this redirection, we were on a time crunch trying to keep up with the design sprint. Although we had to schedule extra meetings and work some late nights, we were able to keep up and make it work.
We were also overwhelmed during ideation because hate crime prevention is a big problem and solutions we came up with didn’t feel adequate in solving it. We stepped back and reviewed our insights from user research to narrow down ways we could make an impact on a smaller scale, which could merge and make a larger impact.
We learned to let go of ideas that aren’t working and adapt when things don’t go as planned. Ultimately, to focus on users, their goals, and to look beyond at the larger problem at hand.
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.
You’re probably wondering, what’s a soapbox? A soapbox is a raised platform on which one stands to make an impromptu speech, often about a political subject. We named our app ‘Soapbox’ because it gives users a platform to understand people in their community, hear different stories and perspectives from a diverse range of people, and to take action.
