Top Screen Image-01-01.jpg

ALLY

                  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.

 

DESIGN PROCESS

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.

Artboard – 1.jpg

VIEW SURVEY

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.

Persona – 07132018-01.jpg

4. ITERATIVE DESIGN RESULTS

4A. Developed user flow diagram

sign in – 11.png

4B. Developed user flow sketches from user flow diagram

new design sketches 6-01.jpg

4C. From user flow sketches I developed hi-fidelity wireframes

All old screens-01.jpg

Early design iteration included accordian style menu feature.

Accordian menu-01-01.jpg

              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

ally card sorting squarespace-01.jpg
 

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.

new design sketches4-01.jpg

                                                                           5. App redesign phase                                                                                                                                               Based off sketches I redesigned the new UI of app.

7 screen layout-01.jpg

                                                                        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.

Mood Board3-02.jpg

   5B. New design changes

home screen comparison_home screen comparison old new copy.png
home screen comparison 5_home screen comparison old new_home screen comparison old new.jpg
home screen comparison 8_home screen comparison old new 3_home screen comparison old new_home screen comparison old new copy 2.jpg
home screen comparison 5_home screen comparison old new 3_home screen comparison old new_home screen comparison old new copy 3.jpg
 

EXPERIENCE ALLY PROTOTYPE