Ally is a mobile app created at the Facebook Technicolor Hackathon. The app was created for empathetic people to research what is helpful or offensive to people from other walks of life.
1. DETERMINE CLEAR PROBLEM AND GOALS TO DESIGN FOR
Problem Statement: There are many unspoken microaggressive behaviors that contribute to the ills of society. Many of societal ills are the result of a lack of communication and understanding between cultures.
Goal: To create an app where empathetic people can learn how to support other cultures to form a stronger allyship.
2. DEFINE AND BE CLEAR WHAT I AM DESIGNING FOR
Important questions to be considered prior to design:
Who would use this?
Is this a website, utility app, or an experience?
What is the likely-hood of continual use by user?
How to make this experience more impactful for the user?
3. TAKEAWAYS FROM SURVEY
Microaggressions are the greatest hindrance to solidarity.
Most microaggressions occur based on gender, race, sexual orientation, and socioeconomic status.
Most survey takers noted that most microaggressions are perpetrated by individuals who are unaware of the microaggression.
3A. Two types of motivations were revealed in the survey. People who wanted to know what upsets others and people who wanted to express their frustrations about microaggressions they had experienced.
Based on the survey questions and interviews I developed personas to help guide design of app.
4. ITERATIVE DESIGN RESULTS
4A. Developed user flow diagram
4B. Developed user flow sketches from user flow diagram
4C. From user flow sketches I developed hi-fidelity wireframes
Early design iteration included accordian style menu feature.
Accordion design was too cumbersome for users during test. Therefore, I AB tested the accordion design vs. a bottom navigation bar element. At this point I decided a redesign was in order. I began paper prototype testing the old accordion menu vs. a bottom nav bar design.
4D. AB Tested to find new results I began to answer questions more completely that came up before. I determined this app would be an experience to be designed to engage the user multiple times. I added a resource page, for constantly updated resources, such as games, updated ally definitions, and a way to financially support ally groups for a small processing fee on the app. This processing fee was designed to bring in additional revenue to the stakeholders of the app.
Navigation bar element was more intuitive and quicker for user to navigate.
4E. From additional AB testing and Affinity Diagram from card sorting exercise I redesigned the app based on testing results from these exercises.
Card Sorting Exercise
4F. Card sorting exercise influenced the redesigning of the wireframes by suggesting, along side contribute and learn, a new resources feature could yield more consistent user engagement.
5. App redesign phase Based off sketches I redesigned the new UI of app.
5A. Brand Color & Accessibility It was really important to create a color palette that both represented universality, solidarity, and was modern. To help ensure that the color combinations had the proper accessibility level, I used material.io tool.
5B. New design changes
EXPERIENCE ALLY PROTOTYPE