Anti-Racism Cards Mobile App
UX Methods prototyping, usability testing, surveys, journey mapping, personas, heuristic evaluation, user flow diagram
Stakeholder(s) Myself as the creative director
End Users People that want to engage in a fruitful discussion about racism with loved ones and/or colleagues
Research Goals This app provides a platform for conversation with insightful and introspective questions. The research goal is to understand what screens and features need to be improved or added to better the usability of the app as well as maintain the key purpose and function.
Product Roadmap
The project is still under way. At the last update, I have conducted the usability tests, reported the findings, sketched a redesign based on my recommendations, and designed a new app. Next step: discuss developing the app with a developer. Stay tuned for the latest updates.
See the usability study report.
Planning
1. I developed a survey using Qualtrics to get a sense of the need for this product. I had 80 participants answer key questions about their comfort levels discussing racism with peers.
What I found was that people are excited to have this conversation, but are not always comfortable having it with certain people or in particular situations. More people were extremely comfortable talking about racism with their significant other than with coworkers or classmates. And more people were moderately uncomfortable talking about it with their coworkers than with their significant others.
For more of my insights, check out my blog about the research.
2. I sketched personas based on my survey results. One persona is a college student who wants to engage her classmates in dialogue about racism because she wants to make a difference in the world. The other is a diversity and inclusion professional who want to facilitate discussions amongst employees about racism.
3. I brainstormed how this app would function and what features would best help people have this tough conversation. I sketched different ideas and came up with questions that would allow people to share their experiences with racism and ways to move towards an anti-racist society.
4. After the survey, I decided to make a prototype using Adobe XD to conduct usability testing.
See below: a video of the low fidelity prototype of this project.
5. I asked a developer to look at the prototype and see the viability of this product. He said that it's very viable and he can create a web app that can be used on multiple platforms.
6. I formulated a research plan and timeline (see here).
Testing & Results
7. I recruited 5 participants overall in two groups. One group was a couple and the other was 3 coworkers at a company where I don't work. Once I conducted the usability tests, I analyzed the video content of the tests and made notes on success points, confusion points, and error points for each screen type.
The chart below shows the success, confusion and error points on each screen from 0-5 depending on the amount of users that experienced success, confusion or error on a given screen.
Based on the successes, confusions, and errors, I created a user journey map (see below).
Participant Feedback
Quotes from Second Usability Study
Title screen:
Participant 1: "I'm familiar with Cards Against Humanity, so maybe it functions the same"
Participant 2: "There are cards involved"
Directions screen:
Participant 3: "What I expected was something that was more personalized, like telling me what I'm supposed to do, not what everyone is supposed to do"
Agreements screen:
Participant 3: "When I first read this, it doesn't feel like a game anymore. It feels more serious. Like I might want to back out a tiny bit" [Nervous laughter]
Participant 2: "I appreciate the agreements, especially number two because it reminds people to listen before speaking"
Cards screens:
Participant 3: I'm learning a lot. I like listening to different peoples opinions about racism. I think its very eye-opening.
8. I learned that the title screen is confusing because people thought that the app would be modeled off of Cards Against Humanity, which it is not. I'm going back to the drawing board for a new title. I made a heuristic evaluation to understand what usability violations the app has and what needs the most attention.
I also learned that the directions were a bit confusing and could be incorporated into the play of the app instead of just at the beginning. The most successful screens were the playing cards and the activity cards, which are the most important content. For more of my findings, see the usability study report.
Redesign
9. Now that I know where the pain points are, I'm focusing on redesigning the title, directions, agreements. This next app design will also be tested and the iterations will continue until the pain points are reduced.
10. I sketched out new design ideas for the redesign, incorporating better flow of directions and agreements.
11. Once I sketched out the new design, I created a user flow for the new login feature so that the developer will know the order of the login procedures.
12. I developed a high-fidelity prototype using Adobe XD and handed it off to the developer to code and then launch as a mobile app. I chose a calm, muted color palette to aid in relaxing the users as they discuss a sometimes stressful topic.
See the new prototype below.
13. Next Steps: After the product is launched, we will employ user interviews with people who have used the product. We will conduct more usability tests, collect usage analytics, and customer surveys. We will make iterative changes to the design to make sure that it is competitive in the market.
Lessons Learned
I learned so much from this project. One of the biggest lessons is that it is both challenging and rewarding to be the solo UX designer and researcher on a project. Another lesson is that iteration is the key to success. The more I learned from failure and rethought ideas, the better the app has gotten over the course of this project. I feel much more confident in the product now than I did at the beginning because of the outcomes of the research.
