Organization: filipinos4justice.org
Project Summary
The filipinos4justice.org (or just FAJ) website suffers from significant navigational and accessibility issues, deterring users from engagement.
Our objective was to create a responsive website offering an intuitive browsing experience, particularly focused on facilitating access to mental health resources.
My Responsibilities
Timeline & Team
4 weeks from start to finish, with a UX team of 5 and 3 stakeholders.
An Update from the Future!
After presenting our case study to stakeholders and handing off the reigns and designs to a different team, they continued to iterate, test and implemented the redesign. After launch, the redesign resulted in donations soaring for the organization from $6,000 to $142,000 within 5 months, a marked increase from 5 years prior.
A huge success for the FAJ organization!
What's The Problem?
Vulnerable populations who need access to mental health resources may not be able to address their mental health needs because of the cumbersome navigation of the FAJ website.
The Goal
Improving the navigation and accessibility of the FAJ’s website will help Filipinos connect with mental health programs & services in their area, thereby reducing mental health issues among the Filipino community.
Current Website
Here is the current website prior to the redesign. We can see how users could be overwhelmed and confused. There are quite a few accessibility issues to be addressed.
During the research phase, a stakeholder interview was conducted with key personnel, including the operations manager at FAJ. In particular, the stakeholders wanted the new interface to have a stronger emphasis on giving and donations as well as promoting mental health resources.
What Did FAJ’s Stakeholders Think?
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.
Should be more promotion of mental health resources.
Improved navigation to assist users in finding the information they seek.
..and What About the Users?
The existing FAJ website is difficult to navigate without a navigation bar.
Most interviewees acknowledged that it was typical for emotions to go unspoken in Asian households.
Survey Insights From 40 Participants
What did the landscape look like for users looking to access mental health resources?
42.5%
accessed mental health resources from grassroots organizations.
40%
never utilized a non-profit to seek mental health resources.
75%
of survey respondents discover information about mental health via websites and social media.
Example of the Target User(s)
Lorna Santos
Age: 26
Occupation: Nurse
Location: Alameda, CA
Background
Lorna recently relocated back to her hometown of Alameda after attending nursing school out of state. Since moving back, she has sought out resources to reconnect with her community. She also wants to balance her community commitment with her work-life, mental health, and family obligations.
Goals
Wants to connect to accessible and affordable mental health resources in her local area.
Wants to connect with other people in her community.
Needs to know about events occurring in their community.
Frustrations
Not being able to find any information and support for her mental health.
Fear of missing out on important community events/workshops.
Fear of discussing her mental health struggles with her family.
This is the recommended user flow. We felt that this flow was more intuitive and had less guesswork when searching for mental health resources. It would also take into account the new menu system and other features of the redesign.
Concepts were converted to tangible artifacts after brainstorming and revising the existing sitemap. The main focus for the low fidelity wireframes was to build a great navigation system and highlight key functions, as well as to build with accessibility in mind.
Lo-fi Wireframes and Usability Testing
What was next? Usability testing decided that.
Implement mobile-friendly navigation hierarchy for headers and sub-headers for the mobile design.
Ensure all necessary buttons in the user task flow are functioning properly.
Add visual aids or icons to guide users through the task flow.
One feature we wanted to showcase in low fidelity stage was the new navigation system. The previous navigavtion system lacked in many ways, so we did away with the old and revamped!
Out With The Old..
No organized sections on original site map.
Navigational links seemed to have disappeared at some point in the website's history.
..In With The New!
Placeholder for FAJ’s brand logo, which will also serve as a ‘Home’ button for easy access back.
New Nav Links for a more intuitive navigational experience–making resources easier to find.
A dedicated ‘Donate’ button since stakeholders wanted a stronger emphasis of donation and giving.
In mid-fidelity, we made adjustments based on the first round of usability tests we conducted. Just as we did between low and mid-fidelity, before moving to high fidelity we did another round of usability tests.
Iterating to Mid-Fi, More Testing, and Getting to Hi-Fi
Okay, so what about high fidelity? Usability tests on mid-fi determined that.
Eliminate the asterisk for optional sections on the form to avoid confusion.
Increase the size of the text on the drop down menu to improve readability.
Incorporate interactive features to the mobile design to improve user feedback collection.
As an advocate for accessibility, I want to make sure my designs meet WCAG standards, with AA compliance as the goal. Websites with 100% accessibility isn't realistic, but I do what I can to ensure that those who use assistive technologies do not encounter frustrating experiences. These assistive technologies need to be able to read, understand, and operate the pages.
Target Sizes
I don't want the user to have to hunt when attempting to click on buttons or other call-to-action elements, so we make these target sizes at least 44x44px.
Contrast Checking
Checking the legibility of colors placed in and around each other is vital. This applies to not only text, but icons and other input elements.
These were created to engage visitors and to put emphasis on important information.
Animations and Micro Interactions
These prototypes were presented to the same stakeholders we interviewed to demonstrate the redesign’s capabilities and the ease of locating mental health resources.
High Fidelity Prototypes
These prototypes were presented to the same stakeholders we interviewed to demonstrate the redesign’s capabilities and the ease of locating mental health resources.
What Did I Do?
The overall project involved, but not limited to, the following:
Takeaways
