Header cover image

Family Assistance Resource Center

  • Client/Employer

    Family Assistance Resource Center (FARC) of New Jersey

  • Category

    Featured UX Projects

  • Start Date

    11/2021

  • End Date

    01/2022

  • Tools

    Figma, Miro

Overview

In this UX project, I collaborated with the Family Assistance Resource Center (FARC) to enhance their website's usability through a human-centered design approach.

By conducting guerrilla usability testing, empathy mapping, and card sorting, I identified key pain points and implemented targeted improvements. These changes not only streamlined the user experience and reduce information retrieval time, but also saved FARC approximately $4,762, allowing them to reinvest those funds into their mission of supporting individuals and families in crisis.

Key Skills

  • UX Research (Guerrilla Usability Testing)
  • UX Design
  • Task Prioritization
  • Communication

Impact

This project aimed to streamline the process for disaster victims to request assistance, improving the overall user experience on the FARC website. By implementing user-centered design principles and usability testing, the project saved FARC approximately $4,762, funds that were reinvested into direct support services.

Background

Family Assistance Resource Center (FARC) of New Jersey provides critical support to individuals and families in crisis, offering emergency economic aid, educational resources, and vocational assistance. With an increase in national web traffic from people seeking help, FARC needed to enhance their website’s usability to better serve their growing audience.

Design Process

Following a lean, modified version of IDEO’s Human-Centered Design process, I ensured all design recommendations were grounded in user research and feedback.

Human-Centered Design Process Infographic: Five green-blue circles that has the definition of Empathize, Define, Ideate, Prototype, Validate inside.

Empathize

Personas

I began by creating two provisional personas based on initial online research. These personas served as starting points, guiding the revision priorities until further user feedback was gathered.

Job Stories

Through discussions with FARC’s President, I developed job stories to understand the different contexts in which users interact with the website. These stories followed the Situation-Motivation-Outcome format, highlighting user motivations and desired outcomes.

Job stories tested.

Usability Testing

To gain insights quickly with limited resources, I conducted a modified Guerrilla Usability Test. Testing was performed with nine individuals in a mall and a coffee shop. Four of the participants had connections to individuals affected by natural disasters, offering valuable perspectives.

Usability testing questions.

Define

Identifying and Prioritizing Pain Points

After reviewing test recordings, I used affinity mapping to categorize user pain points on a Miro board, color-coded by user. These pain points were prioritized based on their importance to both the users and the organization.

Affinity Map

I prioritized each pain point based on its importance to the user as well as its importance to this organization. Assumptions of the importance to users were based on conversations with the existing and potential users, and the assumptions of importance to FARC were based on my analysis of their website and organization mission.

2x2 Matrix of pain points and their importance

Key Usability Problems and Improvements

1. Understanding the Mission and Service Areas

Issue: Users found the homepage cluttered with information, leading to confusion.
Recommendation: Simplify the mission statement and enhance visual cues. Increase font size to improve readability, especially for users with visual impairments.

2. Navigation

Issue: Users struggled with finding relevant support due to confusing categorization.

Misleading and confusing navigation links

Recommendation: Revise the site structure to align with user expectations, placing donation-related content under "Donations" instead of "Resources."

Improved Website Structure

3. Discoverability of Links and Images

Issue: Important links were overlooked when embedded in regular text.

Demonstrated that the link isn't easy to be found

Recommendation: Increase contrast and adjust the design of links and images to make them more noticeable.

4. Locating Recent Program Updates

Issue: Users were confused by multiple entry points for finding recent updates, making it difficult to determine if a program was still active.
Recommendation: Consolidate recent updates into a single section, and add timelines and absolute dates to clarify program activity.

Iterate and Ideate

I developed several potential solutions to the identified pain points through sketching. These low-fidelity sketches were validated with user feedback and refined into high-fidelity mockups.

Prototype

Using Figma, I created high-fidelity mockups of the proposed solutions and tested them with six new participants. Based on this feedback, I refined the prototype to better meet user needs.

Figma prototype for about page on desktop and phoneFigma prototype for the about page

You may view an interactive prototype at this link.

Takeaways

The FARC website plays a crucial role in supporting individuals during times of crisis, making it essential to deliver information efficiently and intuitively. By implementing thoughtful design changes, we can reduce friction and make the site more accessible and effective for all users.

Through this project, I honed several critical skills, including conducting effective UX research through methods such as guerrilla usability testing and affinity mapping. I also enhanced my Figma skills, focusing on creating user-centered solutions that align with organizational goals.

Additionally, I developed stronger communication skills by collaborating closely with stakeholders and refining my ability to prioritize tasks efficiently to meet project deadlines. These experiences have deepened my understanding of how to deliver impactful design solutions in a real-world context.

Thank you for reading!

Cursor

mode

Direction

Overlay Decor