Soapbox
Learn. Discuss. Donate.

Soapbox

A mobile application to aid the fight against hate crime through education and discussion
Design Interactive
SPRING 2021
Read on Medium.com

How might we encourage people to take action against hate crimes? I was challenged to create a more effective way for people to support the fight against hate crimes.

Summary

Project Overview

Timeline
‍6-week design sprint
Setting
Shirley Lee, Kai Maurer-Mabanglo, Jessica Hua
Roles
‍UX research, user testing, prototyping
Tools
‍Figma, Adobe Illustrator, Notion, Google Forms, Slack
I presented our project to a panel of industry professionals, and my team took home awards for Most Customer-Centric Experience, Most Innovative UX, and runner up for the Audience Choice Award. Waho!

Here's to taking a step closer to sparking real change for the fight against hate crimes!
Mission
Soapbox aims to move people to act on their values and make real impact. As racial tensions and hate crimes are on the rise and are brought to light, I wanted to help motivate people to take individual action to contribute to the larger cause of fostering inclusive communities.​

Problem
Many people use online platforms to learn about hate crimes, but many find this process confusing due to: scattered resources, tailored algorithms, and lack of conversation.
expectations
deep awareness
‍‍People would be moved to donate to a cause after hearing a personal story, news story, or activism post ...under the assumption that their actions are motivated by a genuine awareness. The only barrier holding skeptical donors back was a lack of transparency for where donation funds are going to.
Reality
shallow awareness
‍‍Actually, not every donation is motivated by a deep awareness and may be rooted in social pressure rather than genuine support. Therefore, solely relying on monetary support as a solution to hate crimes is a direct manifestation of "performative activism". Meaning that donors may remain blind to their surface-level awareness of the causes they support.

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

Solution

Product Preview

Learn

Read, watch, or listen to media about people's unheard stories and experiences all from one place.

Discuss

Ask a question or start the conversation! Respond to the stories you hear and create a community where people are heard and understood.

Donate

Show your support and show that you hear them and their story.
contributions to the team
I set out to guide users through a learning style that is simple and easy to understand. I wanted users to translate their experience into a habit and above all, I hoped that people would apply this openminded way of thinking when encountering new stories and perspectives.

Making real impact with 3 simple steps:

Learn
the understanding, the sponging
DIscuss
the application
Give
the action
Impact

Soapbox inspires people to take action through intentional giving. Here's to taking a step closer to sparking real change for the fight against hate crimes!

Design Process

The Problem Space

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.
‍
More people are using online platforms to learn about hate crimes, but many users find this process confusing. Our team wanted to tackle these barriers and figure out, how might we encourage people to take action against hate crimes?

51.4% of respondents believe that there is not an efficient system to inform people of hate crime.

As racial tensions and hate crimes are on the rise and are brought to light, I wanted to help motivate people to take individual action to contribute to the larger cause of fostering inclusive communities.​
Problem Statement

Initial Direction: missing the point

Our project began with exploratory research focusing on the fundraising process behind anti-hate crime campaigns. I created a survey that received 51 responses and conducted 6 user interviews, aiming to learn more about financial support against hate crime. However, through surveys and interviews, I uncovered a more urgent need: users shared a desire to educate and inform themselves on current issues about hate crimes.
Problem Statement
How might we create a way for people to financially support the fight against hate crimes?
How might we encourage people to take genuine action against hate crimes?

Changing Directions: a more urgent need

After our first round of research I realized the prompt I was designing around did NOT align with our users’ needs. The solutions I came up with didn’t match the urgency of the social issue.
‍
Solely relying on monetary support as a solution to hate crimes contributes to the problem of “performative activism”.
‍
I restructured our problem statement to guide us in a new direction for our second round of research.

Performative Activism:

when someone posts about social issues to garner attention for themselves instead of wanting to help the cause they’re posting about.
‍
Why is it a problem?
It mutes the conversation and derails the narrative from what is important. Surface-level engagement allows people to be exempt from being labeled as racist or ignorant. People may not genuinely reflect, learn, and acknowledge their priviledge.
Performative Activism, and Why It Can Do More Harm Than Good →
I restructured our problem statement to guide us in a new direction for our second round of research.

I hoped to promote genuine allyship, accountability, and learning.

USER RESEARCH

Diving deep into literature review

Articles from the Department of Justice and NBC emphasized the urgency of rising hate in certain communities. This helped catapult our research to learn more about the problem at hand and possible ways to combat it.

Probing our users for understanding

To learn more about our users, we developed general research questions to outline our research goals about different aspects of hate crime.
EDUCATION
How and where are users getting educated on hate crimes?
ACTION
How do users actively fight against hate crimes?
SPREADING 
AWARENESS
How and with who do users share information about hate crimes with?
Surveys

Spotty engagement with social issues

Our survey asked both open and closed-ended questions to identify how people engage, why they engage, and where they engage with the topic of hate crimes.

51.4% of respondents believe that there is not an efficient system to inform people of hate crime.

Of the 36 responses we received from young adults (ages 18-22), 75% use Instagram and 72% use digital news media to stay informed on hate crimes. 51.4% of respondents 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 and spread awareness about the topic.
Interviews

How do people learn about social issues?

I conducted 7 interviews to gain a deeper understanding of our users. I also asked users to guide me through their process of learning about hate crime and what their next steps were.

EDUCATION
How do you inform yourself on the topic of hate crimes?
How well do you think social media platforms cover hate crimes?
ACTION
What do you think is the best way to do your part in fighting against hate crimes?
How do you show your support as an ally?
SPREADING 
AWARENESS
How often do you share information about hate crimes or other current issues?
Have you had conversations with friends about hate crimes?.
Pain Points

Factors that prevent learning

I was surprised to learn how scattered pathways to taking action against hate crimes were. Users used a variety of platforms and sources, but similar pain points arose across platforms.
01
Absence of dialogue
Heavy, sensitive topics like hate crime are often hard to talk about, resulting in a lack of important conversation.
03
Biased Resources
Broadcasts can distort news and be biased. Posts cannot give users the full story (surface level). Potential to be exploited.
02
Performative activism
Users may feel pressure to post on social media to avoid judgement from others, resulting in a simple repost without genuine understanding.
Competitive Analysis

Drawing inspiration

I explored features in existing applications where users donate and discuss issues, such as GoFundMe and Reddit.
User Personas

Listening to our users

I created two user personas inspired by the insights and common patterns we gathered from our user research.
We can see our users’ preferences on how to solve problems, goals, motivations, frustrations, and needs.
SYNTHESIS & IDEATION
Affinity Mapping

Identifying our focus

After making connections within our data and identifying common behaviors with affinity mapping, I narrowed down three main insights that we used to drive the direction of our app:
01
Dialogue is often the most productive from of education.
03
Social media enables performative activism, which is ineffective for real change.
02
Donations are sometimes given without understanding the reason behind it.
Rapid Sketching

Picturing Connection and Understanding

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.
Below are my sketches for our two rounds of sketching:
ROUND 1
Instagram Extension
According to our survey data, most users come across news and activism posts through Instagram. I wanted to create a place for people to come across resources intentionally, not by chance. Your exposure would not depend on your friend circle activity.

ROUND 2
Learn, Grow, Inform: a journey
I created a step-by-step track that teaches the user to:
...understand people's stories (Learn)
...develop your own perspective based on resources (Grow)
...turn your values into action by informing others and donating (Inform)
Questionnaire: understands the user's background and needs
‍3-Stage Track: Learn, Grow, Inform
Dialogue Buddies: users are matched from each stage, invited to discuss together
User Flow

Creating the basic framework: 3 Steps

We decided to structure our content into three main sections that guides people to take action against hate crimes: learn, discuss, and donate.
LEARN
allows users to browse different media to educate themselves about the topics they are interested in.​
DONATE
allows users to browse for different donations to direct their support to.
DISCUSS
Live Chat helps people interact through streaming and Write allows people to type out their thoughts.
Lo-fi Prototype
I then created lo-fi wireframes guided by the user flow. This basic skeletal framework of the app allowed me to focus on functionality over appearance.
Usability Testing 1

Putting our features to the test

I created a set of realistic tasks for each section to test the user's ability to navigate the app and their overall first impressions. This round of testing was crucial in providing good insights for what to adjust within our initial user flow. What I changed...
Removing Live Chat
Users expressed cognitive overload and confusion between Chat and Write features. Users felt more intentional in written discussion than live conversation.
New Filtering System
Filtering system's purpose was to emphasize local donations.
Spatial Filter = location-based
Temporal Filter = time-based
‍
Before:
Spatial Filter (visual radius filter limited users)
Temporal Filter (dropdown, 5+ options)

Improvements:
Spatial Filter (distance slider)
Temporal Filter (buttons, 3 options)
Onboarding
Users were unfamiliar with the structure of the app, so I added an onboarding to introduce the purpose of each section for a smoother user flow.
MID-FI prototype

Bringing it to life

I focused on unifying our overall visual design in our medium fidelity wireframes. What I changed...
Initial Color Palette
We felt that a neutral color palette allowed users to approach topics with a more neutral, receptive, open mind in response to the news and stories on the app that may trigger strong emotions (frustration and anger).

However, I realized these initial colors did not capture the urgency of our content...
Actionable Wording
Changed section word choice to inspire users to take action.
Unified Card Layout
Uniform cards with clear visual hierarchy improved mobility when changing between sections.
Usability Testing 2

Evoking action & urgency

In this second round of testing, we instructed users to perform the same tasks. I focused on understanding our users’ intuitive decision-making and emotional response to the app.
Color Palette
Users felt that the initial colors were very muted, plain, and failed to reflect the message we wanted our platform to represent. Thus, I revised our design system to reflect action and urgency. I hoped users would feel motivated, inspired, and energized to take action!
Saved Content
I consolidated the different Saved pages into one local saved page, which is more intuitive and allows users to access their saved items from one place, not three.
New New Filtering System
New purpose = users can focus on the needs of a specific community and filter for relevance

Before:
Spatial Filter (vague range)
Temporal Filter (vague word choice)
confused and limited users

Improvements:
Spatial Filter (enter specific city they wish to read topics from, whether it be their own area or another city across the world!)
Temporal Filter (clear word choice)
FInal Design

Soapbox

Moving people to act and make real change through education and discussion.

Learn Section

Customized Feed

The 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 and Filter

We included a search bar to allow the user to find resources about any issues they are interested in. 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. Each resource page also provides recommendations to encourage users to continue learning.

Upload Resources

Since our app is meant to be a collection of resources put together by the community, users can easily upload and share educational material here.

Discuss Section

Join a discussion

Before joining, users are briefed about the purpose and context of the discussion. Users can then scroll through threads, post and reply, and even link resources to support their thoughts.

Create a discussion

Users can start the conversation by creating a discussion. Users can enter appropriate information before others can join.

Search, Filter, Browse

Users can search for a specific discussion and browse discussions beyond those recommended for them. They can also filter and sort results by tag or location, which allows them to engage with their community or different communities beyond their own.

Donate Section

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.

Saved Section

All in one place

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

Design System

View Prototype
Reflection

Takeaways

Embrace change

Designing this app was a challenging and rewarding journey. It was difficult to keep up with the design sprint following the redirection after the first round of research. My team and I were determined to conduct more research, schedule some extra meetings, and stay on top of our deadlines. Although I felt overwhelmed by the ideation stage, it was worth it to take one step back, and leap three steps forward!

I did not feel that our solutions matched the urgency of the social issue. It was necessary to step back... and review our insights from user research to narrow down ways we could tackle the real root of the problem.

Focus on the user

From our extensive rounds of user testing, we received lots of user feedback that revealed the holes within our solution. I learned to let go of ideas that weren't working and to adapt when things didn't go as planned. Ultimately, I remembered to focus on users, their goals, and to look beyond at the larger problem at hand.

Next Steps

With more time, I hope to explore a feature that checks the quality of resources that users upload through reporting or alerting. I want to ensure that Soapbox is a safe and reliable platform where users learn.

I hope to help users develop a long-term commitment to educating themselves and fighting hate crime, not only when it is a popular topic. By integrating a daily recommendation system, I hope to encourage users to learn about something new everyday.

Why Soapbox?

You might be 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 share and listen to different stories and perspectives from a diverse range of people in their communities.

keep going

HackDavis

Explore your potential.

heyooo,
‍Let's get in touch
© 2023 Rachel Yap
Made with ♥ + 🍵