FareStart

Creating a More Cohesive Experience Between Two Seattle Non-profits

Overview

FareStart is a nonprofit organization providing food-service job training to adults and youth experiencing poverty and homelessness in Seattle. Their restaurants allow their students to gain job skills while giving the community a way to support them through dining or volunteering.

Catalyst Kitchens is FareStart’s nationwide initiative helping non-profit food-service orgs outside of Seattle to apply the FareStart model in their own communities.

My Role - UXD, UXR

I led UX research and usability testing from plan creation to data collection and analysis for this project. I collaborated with two other UX designers on ideation, visual design, and prototyping.

The Challenge

FareStart’s site contains so much inspiring and informative content, however much of it is hidden under too many words and impersonal imagery. The goal with this project was to lift up their amazing personal stories in a succinct way to allow users to emotionally connect with FareStart’s mission.

Catalyst Kitchens currently has their own separate website that FareStart wishes to merge under one combined experience to make their relationship clear. The initial brief was suggesting an entire website redesign. With FareStart’s input, we were able to narrow down their top goals that were within reach for this ten week time frame.

Design Goals

1. Clearly show the relationship between FareStart and Catalyst Kitchens

2. Drive people to support FareStart through donations

3. Communicate FareStart's mission succinctly while creating empathy

User Segments

Due to the COVID-19 crisis, it was a challenge for our team to access and interview the ideal users for FareStart’s restaurant businesses. We created two examples of users based on FareStart's descriptions of their user types as well as our own assumptions about these particular customers. These examples were used throughout our design process to make sure we were keeping these people in mind. They were also instrumental in demonstrating user flows and building empathy when it came time to present our design solutions to the client.

Competitor Inspo

We started our research by looking at some similar non-profit organizations to gain inspiration. There were a few things that we wanted to carry into our designs for FareStart.

Ballard Food Bank

This site does a great job of using candid photos that are immediately engaging and gives content room to breathe.

DC Central Kitchen

The donate flow on this site was very clean and clear. I applied the idea of having a wizard to our final FareStart designs.

David Shepherd Wildlife Foundation

What I loved about this site was its simplicity. These icons were a fun way to draw attention to important stats. Bright colors are also reserved for important CTAs. I used icons in our final design along with strategically placed “FareStart orange” for CTAs.

Qualitative Usability Testing

After looking at competitors, I ran qualitative usability tests on the current version of FareStart’s site. This was done to get a baseline and to record any obvious opportunities we could address with our design. We interviewed 7 participants remotely over Zoom.

Our usability research questions covered:

First impressions of the current FareStart site
Usability tasks to see if users could easily understand FareStart's mission and their connection to Catalyst Kitchens
Emotional connection to content (text and media)
Online donation process

Our usability research questions covered:

First impressions of the current FareStart site
Usability tasks to see if users could easily understand FareStart's mission and their connection to Catalyst Kitchens
Emotional connection to content (text and media)
Online donation process

Our usability research questions covered:

First impressions of the current FareStart site
Usability tasks to see if users could easily understand FareStart's mission and their connection to Catalyst Kitchens
Emotional connection to content (text and media)
Online donation process

Customer Insights

The main insights pulled from these interviews were:

1. Most participants are immediately overwhelmed by the amount of text and images on the site and find it difficult to articulate the mission.

2. Almost all participants say that they do not personally or emotionally connect with the site. Multiple participants want to see mention of Seattle and local presence.

3. All participants are unable to define Catalyst Kitchens’ services or its connection to FareStart.

4. Most participants mentioned that the donation form does not feel secure. The lack of story and emotional connection deterred most from wanting to donate. Participants also want to see how their donation funds would be allocated.

The main insights pulled from these interviews were:

1. Most participants are immediately overwhelmed by the amount of text and images on the site and find it difficult to articulate the mission.

2. Almost all participants say that they do not personally or emotionally connect with the site. Multiple participants want to see mention of Seattle and local presence.

3. All participants are unable to define Catalyst Kitchens’ services or its connection to FareStart.

The main insights pulled from these interviews were:

1. Most participants are immediately overwhelmed by the amount of text and images on the site and find it difficult to articulate the mission.

2. Almost all participants say that they do not personally or emotionally connect with the site. Multiple participants want to see mention of Seattle and local presence.

3. All participants are unable to define Catalyst Kitchens’ services or its connection to FareStart.

Donor Behavior Survey

48 Respondents

Google Forms survey- see survey questionnaire

83% of respondents prefer to donate using a credit card
Most donors are motivated by supporting a good cause or their personal connection to the organization
Most donors would like to see how their funds will be allocated and know the mission statement or area of impact of the organization
The two most frequent ways to give are wither by donating money or volunteering time

48 Respondents

Google Forms survey- see survey questionnaire

83% of respondents prefer to donate using a credit card
Most donors are motivated by supporting a good cause or their personal connection to the organization
Most donors would like to see how their funds will be allocated and know the mission statement or area of impact of the organization
The two most frequent ways to give are wither by donating money or volunteering time

48 Respondents

Google Forms survey- see survey questionnaire

83% of respondents prefer to donate using a credit card
Most donors are motivated by supporting a good cause or their personal connection to the organization
Most donors would like to see how their funds will be allocated and know the mission statement or area of impact of the organization
The two most frequent ways to give are wither by donating money or volunteering time

Sketching

Moving forward with the insights and suggestions we gained from our first round of research, our group did some sketching to get ideas flowing. I wanted an introductory hero image or video to pull users in, an obvious donate CTA available from anywhere in the site, and clear communication about what FareStart does and what the user can do to get involved. Although our final designs would be desktop compatible, I decided to sketch with a "mobile first" design approach in mind to limit our real estate. This helped us to trim the fat quickly and only keep the most important elements. This could then be easily transferred to a lean desktop experience.

Catalyst Kitchens Integration

Splash Page

Our first iteration included a homepage info-graphic to guide the user to either explore FareStart or Catalyst Kitchens. After testing this with classmates, we found that this solution may not be the best due to navigation confusion. Not everyone understood how to interact with this graphic as it is not a known pattern. The brainstorming continues!

Splash Page

Drop Down Tabs

Donation Flow Iteration

My first donation flow iteration ended up being very close to the end product. I created a wizard with clear steps for donating and other ways to give listed below if the user should want to choose a different method of contribution. We later created a graphic for the hero image to demonstrate what the users’ contribution would purchase and how they are helping. This was a repeated request from users throughout our research.

Donation Flow Iteration

Solutions

Splash Page

Goal #1:

Clearly show the relationship between FareStart and Catalyst Kitchens

We used a tabbed experience in the header to allow the user to easily flip between the two organizations’ homepages. This is a well-known pattern for businesses with multiple endeavors under the same site or umbrella. This was accompanied by another short introductory section further down FareStart’s homepage to give users a bit more information about their relationship and give them another reason to click.

Goal #2

Drive people to support FareStart through donations

Our new donation flow addressed FareStart’s usability opportunities with a more direct route to the donation form. The “other ways to give” are simplified and clearly distinguished underneath the form wizard if the user would like to explore them. There are examples at the top of the page of what the user’s contribution will do for FareStart and its students. Numbered steps with a land-marking color are shown to allow the user to navigate back and forth within the form. Information about security of your donation was added as well to give the user confidence. Lastly, they are given a thank you message once their payment is successfully submitted.

Goal #3

Communicate FareStart's mission succinctly while creating empathy

The mission statement is pulled to the forefront and we selected photos that show more of the faces that make up Farestart’s community in action. We dedicated the homepage to FareStart's positive impact on the people involved. This is followed by relevant stats, graduate testimonials, and a video library to amp up the empathy.

Testing the Final Design

Before presenting final designs to the client, we held a final round of usability testing on our new prototype. These usability interviews were conducted remotely via Zoom screen share and included the same questions as our first round of testing on the current site. I chose this method so that we could clearly see any improvements to our original usability issues. Our end users were pleased with the changes and had great things to say.

User Feedback

5 out of 5 participants felt the site had an immediate emotional impact on them. All commented on the use of video, imagery, and quotes as being a great way to humanize how and whom FareStart is helping. In addition, the new tabbed navigation experience for Catalyst Kitchens was a success. It was immediately noticed and made users curious enough to click and learn more.

5 out of 5 participants were able to easily find the donate CTA and enjoyed seeing how funds are allocated. All participants also felt that the donation submission form felt safe and secure.

The improved visual design had a great reaction as well. All viewers said it was easy to read and clean. They enjoyed the simplicity of the information and the human stories and images on the homepage.

5 out of 5 participants were able to easily find the donate CTA and enjoyed seeing how funds are allocated. All participants also felt that the donation submission form felt safe and secure.

What Those Users Had to Say

“Yes, I can tell what the mission is. It is very clear. The human-goodness feeling is activated and I want to participate. The layout of the icons and info is simple and positive. I love the feeling of getting more good news as I scroll down.”

-Participant 2

“I love the photo and tagline. I like that I can see what my money would do and it would motivate me to donate more!”

-Participant 1

“I love the photo and tagline. I like that I can see what my money would do and it would motivate me to donate more!”

-Participant 1

“I love the photo and tagline. I like that I can see what my money would do and it would motivate me to donate more!”

-Participant 1

Feedback from FareStart

“You did a great job developing personas and incorporating those viewpoints into the site. It’s amazing to see how far you have gotten in just a few weeks. The research results help to solidify the changes that we want to make!”

Reflection

Given more time on this project, I would like to continue to refine the design and test with more participants. We had a short window to gather info and apply the findings. I would also like to make the site responsive across mobile and tablet.

A big lesson was learning to be okay with failing and to use that to steer toward the next idea. I look forward to taking what I’ve learned during this study into future projects.

Ashley Blackwell

2024