Role: UX Designer
User Research, Interaction/Visual Design, Prototyping & Testing
User Research, Interaction/Visual Design, Prototyping & Testing
Tools: Competitive Analysis, User Interviews, Personas, How Might We Exercise, Sketching, Feedback Capture Grid, Adobe XD, Figma
Overview
Racial inequality in America has hit a boiling point, and people are attempting to educate themselves about racism at an impressive rate.
There is an endless stream of quality content on how to be anti-racist but people aren’t sure where to start. People are also often dissuaded by the length of content and its uncomfortable nature.
In the aftermath of George Floyd's murder, people zeroed in on racism and desired to educate themselves on the different aspects of it in society. They were looking to make a change. Many people turned to books, podcasts, blogs, and other resources. However, determining which of these resources was legitimate or helpful considering the over 74,500,000 results for the search phrase, "Anti-Racism Resources."
Some of the 74,500,000+ resources on anti-racism include A Kids Book About Racism, White Fragility, How to Be an Anti-Racist, The Anti-Racism Daily email newsletter, the 1619 podcast, and the Pod Save the People podcast.
I realized, and had personally experienced, this problem of being overwhelmed with finding the right anti-racist content and chose to dig deeper to understand this wicked problem and what small way I could make a positive difference.
User Interviews and Personas
My first step was to conduct several interviews with people to understand their interactions with anti-racist material and the world around them. Below is an example of a persona I created for a woman named Kristen.
Kristen is a 31-year-old hair stylist. She is married with a toddler and runs her own local business. She is college educated and lives in Boise (a majority white city in the Pacific Northwest). Her personality traits indicate that she prefers short-form educational content.
To further put findings into perspective, I mapped how anti-racism applies to Maslow's Hierarchy of Needs. I found that it impacts nearly every level of the pyramid and personal growth.
Anti-racism impacts nearly every level of Maslow's Hierarchy of Needs, indicating this app could benefit users on almost every level allowing for significant personal growth.
Identifying the Problem
This wicked problem of racism can be summarized into two key points:
1. Racial inequality in America has hit a boiling point, and people are attempting to educate themselves about racism at an impressive rate.
2. There is an endless stream of quality content on how to be anti-racist but people aren’t sure where to start. People are also often dissuaded by the length of content and its uncomfortable nature.
While we can't realistically abolish racism, we can make it easier for people to stand against it and make change in their corner of the world.
How Might We Exercise
I created an array of tries we might consider to help solve our problem by asking age old UX question, "How might we?"
Several "How might we..." ideas that were eventually paired down to a single HMW that shaped the design prompt.
How might we make resources more consumable? Deliver on a schedule.
The angle I selected to focus on was, "How might we make resources more consumable?" When I spent some time on this question, I ultimately decided that delivering on a schedule was the most open-ended prompt of the group.
My design prompt:
Create an app that helps people learn about anti-racism in an easily consumable fashion on a regular schedule so they can become an ally in their community to Black, Indigenous, and People of Color (BIPOC).
Success metrics are that users enjoy using the app, use the app every day, experience a positive shift in behavior, and recommend the app to others.
Ideate
I spent some time thinking about the different ways people consume content, and other types of things on a regular schedule. What came to mind was medication. People take medication and supplements to improve themselves through doctor prescribed doses.
People also take it upon themselves to self-treat with other types of drugs through a regimen called micro-dosing — popular with those who want to unlock their minds using psychedelics at very low doses and remain capable of living their lives and working their jobs. This parallel to micro-dosing was reinforced by the "red-pill" conservative analogy for becoming "woke" made popular by the movie The Matrix.
A small dose of content each day can improve a person’s anti-racist perspective. Each dose is a short form video lessons on topics like racial history, systemically racist policy, empathy, or current events — each lasting no longer than 5 minutes.
This analogy became the basis for the driving concept behind the app I decided to call "Woke" — at least for now. A small dose of content each day can improve a person’s anti-racist perspective. Each dose is a short form video lessons on topics like racial history, systemically racist policy, empathy, or current events — each lasting no longer than 5 minutes.
Sketching
Sketches for the Woke App including core concepts, early user flows, and screen features.
My sketches led me to the three core ways a person could engage with learning to become anti-racist:
Educational content called doses
Daily activities of short-form video content that last no longer than 5-minutes. Doses should be completed each day. To remain accountable doses are tracked each week and paired with a quiz.
Recommended actions you can do now
Exercises and recommended actions you can do once a month to practice what you've learned. This might include conversation prompts, petitions to sign, self-reflection, etc.
A year-long goal to contribute a desired amount of money to organizations that are active in civil rights and anti-racist policy change. The user may choose their organization to donate to or the app might accept general donations to distribute to all partner organizations.
Prototyping
This is the happy path for a user that wants to view their daily video lesson.
View the interactive prototype built in Adobe XD.
For the scope of this prototype, I focused on one particular user flow — How does a person take a dose?
1. The user logs in using their email and password as credentials
2. The user selects "Learn" from the bottom menu to access "My Doses"
4. The user selects a "Dose" to launch a video in the "Dose Detail" screen
5. The user completes a "Checkup" to validate their learning views results
6. The user clicks continue to return back to "My Doses" to review any "Missed Doses"
Testing
In testing my prototype with potential users, I used the Feedback Capture Grid to organize their thoughts into four categories: Likes, Criticisms, Questions, and Ideas.
Feedback Capture Grid for the Woke App's testing process features user thoughts including likes, criticisms, questions, and ideas.
Much of the feedback was relevant and actionable, but to avoid feature creep I selected 7 items I could focus on in the next iteration:
1. Likes the count of does taken and day tracker
2. Don't like being quizzed, it adds time
3. Can't easily tell when dose is completed
4. Would this be a trigger for addicts?
5. How do I know which days are done?
6. Badges could provide value like discounts or donation matching
7. Membership fee could be donated to organizations
Iteration
The term micro-dosing could be problematic, so I chose to strip away the analogy and focus on the core aspects of the application: Lessons, Exercises, and Contributing. I started by revisiting the information architecture and users flows for the whole app, but would still focus on the how a user completes a lesson.
Another aspect of feedback was the general look and feel making it hard to know when lessons were completed and hard to understand state. In order to make this clearer, I turned up the fidelity knob and improved the app's branding. Warm and complementary colors were used with a neutral palette to provide an inviting, quirky, yet serious personality to the interface.
To build confidence in the user's experience, the three core components of the app build upon one another to reinforce positive shifts in behavior. Lessons are tied to dates and is framed alongside exercise and contribution goals as "Ongoing Progress."
Each user is on a personal journey to do the work of learning to be anti-racist. Progress is tracked and clearly displayed so they get started, catch up, or get ahead of their own personal goals.
Lessons are still intended to be short form, educational, and actionable — but now don't require an assessment to prove how much of an anti-racist you are. You can take in the lesson, and go do the work.
Iterated Prototype
View the second iteration of the Woke App in this Figma Prototype.
Outcomes and Next Steps
When the iterated application was shared with the same testing group, they provided the following glowing feedback:
5/5 of those interviewed would enjoy using the Woke App regularly. Quotes included: "I would use this app every day!" and "This would revolutionize how I learn about anti-racism."
Next Steps for this application include:
• Identifying and prototyping user flows for exercises, contributions, new user creation, onboarding, and settings
• Additional testing and iteration
• Research development options and strategic partnerships
• Explore additional features to support community and promote long-term engagement/continuous growth
