Fight Anti-Asian Hate: Advancing Justice
My Role
• UX Designer
• Led UX Research & Ideation
• Collaborated on Wireframing, Prototyping, UI
Timeframe
2 weeks
Tools
Figma
Trello
Team
2 UX Designers
2 Software Engineers
Overview📚
Context
Asian Americans Advancing Justice is a national affiliation of five civil rights nonprofit organizations with a common mission to promote a fair and equitable society that empower Asian Americans and Pacific Islanders and other underserved communities.
Problem
One of the biggest confusions about Advancing Justice is that people often assume AAJC, or the DC affiliate is the headquarters.
Solution
Flag the difference between the five separate organizations in the Asian Americans Advancing Justice affiliation through the landing page with information and resources to learn more and take action on each affiliate.
The UX Process
Discover📙
Research Goals
-
User Interviews: Listen and learn more about Advancing Justice’s impact on its supporters and discover specific content or information that encouraged them to support the cause
-
Usability Heuristics: Evaluate the learnability, efficiency, memorability, error management and satisfaction of the current Advancing Justice website to pinpoint areas for improvement
-
Competitive Analysis: Compare Advancing Justice’s landing page to four other non-profit organizations to discover features to include
User Interviews
2 Advancing Justice Supporters | Age: 20-25 | Ethnicity: Asian | Location: Texas/Utah
Based on the user interviews, I created an affinity map to reorganize specific quotes into themes and discovered that:
-
Social media or #hashtags played a big role in raising the organization’s awareness
-
Users valued engaging stories or photos that spoke to their hearts
-
Users wanted digestible content that was easy to follow
Usability Heuristics
From the usability heuristics evaluation, my main recommendations were to:
-
Condense the existing affiliate descriptions
-
Add engaging, relevant images
-
Tell a story through additional content in order to make the overall experience more imposing
Competitive Analysis
The competitive analysis helped us determine which specific content we wanted to include in our design solution. Based on the efficiency and prevalence of certain features, we decided to add the following:
-
global navigation
-
impact statistics
-
article/news section
-
donations section
-
hero section with engaging photos and CTAs
-
events section
Design👩🏻🎨
Site Map
In order to narrow the scope of our work, the design team and I created a site map to prioritize certain pages we wanted to include in our prototype.
Initial Sketches
Using our findings from the research, we created sketches to specify specific content we wanted to include as well as update the development team of our design direction.
Wireframes
With more discussion and collaboration with the design and development team, we created an iterated version of the initial sketches as mid-fidelity wireframes.
Prototype💻
Journey Mapping
We added interactions to our mid-fidelity wireframes to conduct 6 usability tests in order to map their emotions throughout 5 tasks and identify areas of concern.
-
Task 1: Assume you are a Los Angeles local (Angelenos😎🌴), how would you navigate through this website to learn more about Advancing Justice - Los Angeles?
-
Task 2: Assume you are interested in learning more about StandAgainstHatred.org. How would you navigate through this website to learn more?
-
Task 3: Assume you want to participate in an event in Los Angeles. How would you navigate through this website to participate in Advancing Justice events in Los Angeles?👀
-
Task 4: Assume you want to read a news article related to the Los Angeles affiliate. How would you navigate through this website to read the article ?💻
-
Task 5: Assume you are fully convinced in the cause and wish to proceed with donating to Advancing Justice - Los Angeles. Please show me all the possible ways to donate to the affiliate of your choice
Refine👾
Iterations
We updated the fidelity of our prototype and made the following iterations based on our findings from the usability test and journey map.
Final Design✨
Feel free to interact with the prototype here! Or you can also view our live site that the developers created below.
