FAJ - Filipino Advocates for Justice

Responsive Website Redesign for a
Nonprofit Organization

Client Name
Filipino Advocates for Justice
Tools
Figma
Google Workspace
Team
User Researchers
UX Designers
UI Designers
My Role
User Research
Cognitive Walkthrough
UX Design
Wireframing/Mockup
Visual Design
Usability Testing
Project Management
Timeline
Overall: 3 weeks
Discovery & Research: 1 week
Design & Testing: 2 weeks
About

Filipino Advocates for Justice - FAJ is a non-profit organization dedicated to fostering positive change within Filipino communities. Our primary objective was to create a community-driven digital space, where individuals can seamlessly share their stories and experiences. By providing easy access to resources, legal assistance, and professional support, we aimed to increase awareness of social justice issues and mobilize more individuals to take action. This redesigned website will serve as a hub for vulnerable populations, fostering connections and encouraging the sharing of narratives, with a specific focus on mental health issues.

Problem

Vulnerable populations who do not have comprehensive knowledge on how to navigate the FAJ website because they may be new users or they might become frustrated by the cumbersome platform.

Solution

Building an accessible digital platform for the Filipino community to come together, share their stories and experiences, in an effort to raise awareness of mental health issues and build support for change.

Cognitive Walkthrough
  • Users have difficulty to find the services provided and access to the resources they are seeking in the website.
  • There is a lack of clear instruction on how to proceed further on the second screen of the interface.
  • The lack of navigation on the homepage makes it difficult for the user to find what they are looking for and understand the different options available
  • Website's imagery is overwhelming and difficult to parse out the text to find links.
  • The requirement of watching a six-minute video in order to use the interface and know if the user obtained their goal is a high expectation.
Stakeholder Interview

Our research phase included a comprehensive hour-long stakeholder interview with key personnel at FAJ, including the operations manager. This provided us with vital information on existing problems and design opportunities. In particular, we learned that the new interface must prioritize giving and donation and feature mental health resources prominently on the website.

Considerations
  • A concise and eye-catching design that honors Filipino culture
  • A section should highlight FAJ's 50th anniversary this year
  • FAJ logo must remain unchanged
Goals
  • Interface must place a stronger emphasis on giving & donation
  • There should be more promotion of mental health resources
  • Improved navigation in general to assist users in finding the information they need
User Interview

Through user interview with five current FAJ users, we gained valuable insights into their needs and requirements, including the impact of unspoken emotions in Asian households on mental health. The insight from the interviewee about the relationship between activism and mental health helped the team understand and empathize with the users and deliver a product that better meets their needs.

Key Insights
  • Most interviewees acknowledged that it was typical for emotions to go unspoken in Asian households.
  • The existing FAJ website is difficult to navigate without a navigation bar.“There is a symbiotic relationship between activism and mental health.”- from User Interviewee
User Testimonial
"There is a symbiotic relationship between activisim and mental health."
- from User Interviewee
User Persona

We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created a user persona based on user interviews, and we kept updating it throughout the project as we gathered more data. We used this user persona whenever we wanted to step out of ourselves and reconsider our initial ideas.

Problem Statement

We believe that by improving the navigation of the Filipino Advocates for Justice's website for users who are seeking mental health services in their local area will ensure that they quickly and efficiently find mental health resources through the updated navigation.

User Insight Statement

Lorna is seeking mental health programs and services that cater to the experiences of the Filipino community, and needs to acquire more information about the options available to her in her local area.

Ideation

During the ideation phase, we utilized the "I Like, I Wish, What If" method for generating ideas through brainstorming and we come up with so many potential solutions to improve the website navigation and help users easily access the mental health resources map tool. This method allowed us to think creatively and come up with a diverse range of ideas to achieve our goal of a 50% increase in success rate.

Low-Fidelity Desktop and Mobile Wireframes

Beginning with Low-Fidelity wireframes, we focused on developing an intuitive navigation system that prominently showcased key functions. As we progressed to more polished designs, we remained committed to user experience and usability to create an interface that was both functional and user-friendly.

First Round of Usability Testing

After conducting usability testing on Low-Fidelity prototype, we incorporated the following suggestions to improve upon Mid-Fidelity prototype.

  • Including to add a dropdown for mental health resources search on each box
  • Ordering navigation options and sub-headers alphabetically
  • Implementing mobile-friendly navigation hierarchy for headers and sub-headers for the mobile design
  • Adding visual aids or icons to guide users through the task flow
Expanding Dropdown Menu
Mid-Fidelity Desktop and Mobile Wireframes

Following our first round of usability testing, we used mid-fidelity wireframes to make design adjustments that improved the usability and effectiveness of our interface. This allowed us to create a more intuitive and user-friendly experience that would better meet the needs of our users.

Second Round of Usability Testing

Following the usability testing of Mid-Fidelity prototype, we implemented the following recommendations into our High-Fidelity mockups for further iteration.

  • Dividing the steps into separate pages to enhance interactivity and ease of use in the design
  • Increasing the size of the text on the dropdown menu to improve readability
  • Incorporating interactive features to the mobile design to improve user feedback collection
  • Expanding the selection within the dropdown menu on the mental health resources search page
  • Giving users the option to select "None" in the form
Breaking down steps into individual pages
A/B Testing and Results

Our plan was to conduct an A/B test in order to evaluate the usability and effectiveness of two different design options. By testing these designs with real users, we aimed to identify the most user-friendly option and make data-driven decisions about how to move forward.

Based on the results of the A/B testing, we have opted to proceed with Variation A
First Click Testing and Results

Our goal was to ensure that users could easily find the resources they needed on our platform. To accomplish this, we decided to conduct first-click testing, that enabled us to evaluate the effectiveness of our navigation and interface design.

The majority of users preferred the current navigation bar, therefore, we have decided to keep the navigation bar unchanged.
Key Takeaways
01
Securing access to stakeholders and testers who have a vested interest in the website is essential.
02
If the navigation is not user-friendly, users will not utilize the website.
03
Identifying suitable interviewees for user interviews provides valuable data that can inform and guide the design process.
What I Learned

The website is essential in marketing and must be flexible to accommodate the evolving demands of its target audience. Sadly, numerous non-profit organizations, including Filipino Advocates for Justice (FAJ), have websites that fail to meet users' expectations and provide a poor experience.

Next Steps
01
Conducting more user research to elevate the findings and gather more feedback.
02
Have a second stakeholder interview to confirm color palette/UI style guide before moving on to implementing.
03
Testing High-Fidelity prototype with more users to get feedback and measure improvements.
What's next?
Hero Image Walmart
Walmart Project
Revolutionizing Customer Care Experience
Hero Image Homeroom
Homeroom Project
Educators and Mental Wellness