UX Design Case Study
FSCSS is a nonprofit organization providing families and survivors of violence with coordinated, supportive services in one centralized location.
Role UX/UI Designer
Team Zoe R, Rama R
Tools Figma, Miro, Google Suite
Time Aug ‘20, 2 weeks
The original FSCSS site fails to provide an empathetic and clear space for visitors to find or offer assistance. The organization targets help-seekers and donors, but information isn’t readily accessible for either audience.
We re-designed a welcoming website with clear information and direct calls to action to help visitors quickly navigate to crucial information.
We aim to limit the amount of time and number of clicks the user takes to find necessary program details and contact information.
The research team handed of their data after interviewing 8 people who matched our proto-personas, a help seeker user and a donor user, and collecting 35 responses for the survey they’ve conducted. Based on data handed of to me i’ve created our user personas and defined the goals they will perform on the website.
8 user interviews
35 Survey responses
DATA USA
FSCSS handed us a demographic breakdown of their help-seekers currently using their services. We noticed that despite Olympia, WA having a 76% white (non-hispanic) population, the majority of their help-seekers were people of color. FSCSS also tends to house single mothers and their children at their family shelter, Pear Blossom Place.
Our test results show a lack of responsiveness in the original site for different devices and screen sizes. Paragraph text was center-aligned and didn’t follow an F-reading pattern for accessibility. There is inconsistency in information architecture, stretching across the entire site.
We kept three goals for our redesign after conducting research, holding usability tests, and iterating wireframes.
Several ways to contact and get assistance from the organizations. The sticky top navigation bar has a “call us” CFA button that is always there for the user to hit once he/she feels they are going what they were looking for.
Through the “workshop page” the user can find the difference the organization provides. By clicking on one of them that seem relevant, the user can get all the information he/she needs to know, see the upcoming events and connect the organization for registration.
Being able to reach the donation form straight from the sticky top navigation bar allows the user to make a donation after he/she feels he has enough information to understand that organization has an impact on the community.
Getting to understand users and listening to their experience helped as a designer understand about people processes and needs. The experience of making someone feel comfortable so they’d share with me the way they think and feel is a great feeling and it is so valuable.
Having strong foundations for a project is so important so decisions you make have a reference and are based on facts and reason. It is also the best way to present and explain decisions to peers.
