Integrating Design with Storytelling
FareStart:
FareStart has been helping people escape the cycle of poverty by providing them with job training in the food industry for over thirty years. Through their restaurants, cafes, and catering programs that provide meals to social services, shelters and school in the Seattle area, participants in their programs get practical work experience while giving back to their community. In 2011 FareStart launched a national initiative, Catalyst Kitchens, in order to share their unique model with non-profit organizations across America.
The following took place over a ten week period and was part of a capstone project I completed through the School of Visual Concepts. The team consisted of a project manager/lead writer, and two designers. All three members of the team were equally involved in all aspects of the research, interaction and visual design processes.
​
The Challenge:
We were tasked with creating a new website for the FareStart organization with the requirement that we include the following three main goals in our design. These were as follows:
​
-
Create a cohesive branded digital experience.
-
Create an emotional connection with users.
-
Deepen community and donor engagement.
Final iteration of our homepage redesign. High fidelity clickable prototype made in Figma. Click Here to view all the pages that were designed for this project.
Project Timeline
​
The following case study focuses on how our research impacted the design decisions we made on the homepage. Click here to view all the pages I designed for this project.
Design Goals
User Research
Problem Statement:
We created the following problem statement in response to the design goals outlined by the FareStart organization.
-
How might we tell a story about FareStart's work and impact so compelling that it will deepen users' emotional connection and drive support to the organization's programs?
Careful consideration was given to determining what specific questions we needed to be asking, and what research methodologies would be the most effective approach for answering these questions. We had three main goals for our user research for this project.
-
Research Goal 1: Get to know the current site.
​ Method Used: Usability Testing the Existing Site
​
-
Research Goal 2: Get to know the competitive landscape
Method Used: Competitor Analysis
​
-
Research Goal 3: Get to know the customer/user
Methods Used: Survey, Interviews, Personas​​
​
​
Research Questions:
​​
-
What are users' impressions of the visual design and site structure of FareStrart's existing website?
​
-
How is this impression impacting their experience on the site, and perception of the organization?
​
-
How easily can users find information about the 1.) The mission and programs 2.) Donating 3.) Resturaurants and reservations. 4.) Catering 5.) Catalyst Kitchens?
​
-
How effective is the site at communicating this information once located?
​
-
What are the factors that motivate decisions around selecting caterers and restaurants?
​
-
How easily can users navigate the steps to completing 1.) A donation 2.) A reservation 3.) A catering inquiry?
​
​
​
Metrics Summary:
Success Rate
​
Particiants were rated on their ability to complete the same five tasks from start to finish.
​
Results indicted that:
-
75% of participants were able to locate the mission statement from the homepage without difficulty.
-
50% were able to identify FareStart's programs and initiatives from the homepage.
-
58% were able to identify information about pricing and menu items from the catering flow.
-
75% were able to successfully locate and complete a dinner reservation.
-
100% were able to make a donation.
System Usability Scale
​
Participants gave the FareStart site, as it relates to the tasks they were asked to perform, a score of 63.3, which places it in the C- range, indicating marginal usability issues.
Quotes:
​
-
Mission Statement: "I missed the mission statement at first because it's hidden beneath the fold. It's hidden down there."
​
-
Programs:"It's hard to find out what FareStart is doing. It's in there but you have to dig for it. Their programs should be more clearly stated."
​
-
Catalyst Kitchens: "I don't understand what Catalyst Kitchens is. It's hard to understand without digging deep."
​
-
Visual Design: "A lot of text! Not a lot that helps me know the order of importance except the thing at the top. Everything has the same weight!"​
​​
Usability Testing the Existing Site:
Process: One round of testing on the existing FareStart site. 8 participants. Testing was conducted remotely via Zoom. Metrics used were Success Rate and System Usability Scale scores.
Purpose: We needed to gather quantitative, baseline data on the site so we could measure the effectiveness of our redesign. We also wanted to gather qualitative data around how the current site is functioning, determine what its strengths and weaknesses are, and observe how users are responding to it. We wanted to learn more about the various ways the site is creating barriers to donor engagement, failing to create an emotional connection with its users and struggling to incorporate Catalyst Kitchens into its brand.
Research Method #1: Usability Testing
Summary of Findings from User Testing the Existing Site
Competitor Analysis:
Process: 8 sites analyzed. Each of these sites were selected based on the fact that they were either local competitors to FareStart or national organizations doing similar work.
Purpose: In order to gain design inspiration, learn more about what FareStart's competitors are doing to create an emotional connection with users and increase donor and community engagement, we studied the following eight sites. Our analysis provided us with a great deal of insight for our own designs.
Research Method #2: Competitor Analysis
High Level Findings:
-
The most effective sites were those that focus on powerful storytelling by highlighting individual personal stories, and the impact of the organization on those it was serving. These sites also incorporated strong images and videos as a way of reinforcing these stories and bringing them to life.
​
-
Second theme was that they had a clearly delineated visual hierarchy throughout the site and the visual design was clean and uncluttered.
​
-
And lastly they all had a simple primary navigation with obvious paths for users to dig deeper if they wanted to learn more.
Survey:
Process: 22 individuals participated in an online survey.
​
Purpose: Our goals with this survey were to determine:
-
What are some of the more common causes donors support and what motivates them to support these causes?
-
How frequently do people engage in charitable giving and what methods do they prefer to use?
-
What functionality are donors wanting from charitable organization's websites?
-
How do potential donors create relationships with the organizations they eventually decide to support?
The following are some of the more significant findings.
Research Method #3: Survey
Summary of Survey Findings:
​
Theme 1: What are users wanting from a non-profit website? 1. A clear mission statement located above the fold. 2. Each of the programs or initiatives laid out with a quick intuitive path for digging deeper. 3. A clear explanation of the organization's impact and work backed up with statistics.
​
Theme 2: The majority of users reported that they'd donated to homelessness related causes in the past year and that they'd done so as a one-time donation using a credit card through the organization's website.
​
Theme 3: The majority of users said that social media was the primary method by which they'd learned about the work that a particular organization is involved in.
​
Theme 4: When exploring what motivates people to volunteer for, or donate to an organization, the following factors emerged. People need to: 1. Have a strong belief in the work that's being done. 2. Feel a personal connection to the cause, for example a family member has been impacted by the issue. 3. Feel that their support reinforces the belief that they are being a good citizen or neighbor.
Interviews:
Process: We conduced 9 one-on-one interviews remotely, via Zoom.
​
Purpose: The primary purpose of our interviews was to learn more about customer motivations. More specifically, what motivates people to select the causes and organizations that they choose to support? We also wanted to gain insight into our user's needs, frustrations and personalities and determine how potential donors create relationships with the organizations they eventually decide to support?
Research Method #4: Interviews
Summary of Interview Findings:
​
Theme 1: People support organizations that reinforce their personal identities.
​
"I'm way more likely to spend money with a female owned company because I want to see more women in leadership and ownership."
Theme 2: People desire to have a tangible, localized impact on their own community.
​
"It's the foodbank in my community. I imagine it's like feeding my neighbors."
​
Theme 3: People feel a connection to current events and emerging public issues.
​
"As a family we try to respond to what feels immediate, current events, things that are going on, politics."
​
Theme 4: People like to support charitable organizations that are providing a service that they already need in daily life.
​
"I support the YWCA. It's easy to support a good cause when it's a transaction I need to make anyway."
Research Method #5: Personas
Personas:
Once we'd completed our survey and interviews and compiled all the data, we created a variety of user personas and accompanying journey maps in order to bring the data to life. This helped us turn a list of personality characteristics into real people and made it easier to imagine what they might need from the FateStart website and the various paths they might take through it. Amanda and Katie, are depicted here because they represent typical users of the Donation and Catering Flows, two flows we redesigned.
​
Amanda: Donation Flow
Amanda works in the Amazon building located a couple blocks away from the FareStart restaurant. She's walked by the restaurant a number of times and she's curious about the work that FareStart is doing in the community. She enters the FareStart site at the homepage to get a sense for their mission and programs. Our goal with Amanda is to convert her from a curious community member to a donor.
​
Katie: Catering Flow
Katie is an art teacher who is getting married in six months and is interested in working with an organization that can provide for all of her catering needs, from food and venues to outside vendors. Katie has a strong belief in supporting social justice issues and is drawn to FareStart because of the fact that they do such important work in the community, in addition to the fact that they provide catering services. Through a Google search, Katie enters the FareStart site at the wedding catering landing page. Our goal with Katie is to create a catering section that incorporates a simple, intuitive site structure that readily provides her with all the information she needs to plan her event.
Needs, obstacles, desires: Community Member/Donor
​
Amanda works in one of the Amazon buildings around the corner from the FareStart restaurant. She's walked by it many times and is curious to learn more about it. As someone who likes to eat out, and feels strongly about supporting local
organizations who are working to better people's lives.
Amanda turned to the FareStart website to learn more about the mission and various projects the organization is engaged in.
Needs, obstacles, desires: Potential Catering Client
​
Katie is getting married and looking for an urban venue with good food and ambience. She heard about FareStart during her past volunteer work and wants to learn more about their wedding catering service. Katie wishes to have a place where family and guests can gather and feel comfortable. She wants to work with an organization that can help plan all aspects of her event. She values the quality of food and service and the ability to create a beautiful space. She is particularly interested in FareStart because of their important work in the community in addition to the fact that they provide catering services.
While we designed roughly a dozen pages during the course of this project, I will focus on the work that was done on the homepage for the purposes of this case study. The following is an explanation of how our research informed our design of the homepage.
​
​
Click here to view the additional pages that were designed for this project.
Design Recommendations:
A careful analysis of the user research results informed our design decisions for the site. The scope of this project involved a full redesign of the Homepage, Impact page, About page, Get Involved page, What We Do page as well as the Catering flow and the Donation flow. The following became our primary recommendations for our design work on those sections.
​​​​
-
Users need to be able to quickly and easily identify the mission statement from the homepage.
​
-
FareStart's five programs or initiatives need to have a clear call-out in a prominent location on the homepage with brief descriptions and accompanying explicit CTA for users wanting to learn more about these programs.
​
-
Visual simplification throughout the site is critical. The current site is overwhelming users with too much text delivered with little respect to hierarchy. Participants reported feeling a sense of visual overload as well as an inability to locate the information they were seeking.
​
-
Simplified primary navigation with and clear, intuitive flows within each of sections of the site.
​
-
Provide multiple pathways throughout the site that drive users toward engagement with the organization.
​
-
Use storytelling as a way for users to better connect with the work that FarStart is involved in. This will be accomplished by: 1. Raising up the individual stories of students and graduates. 2. The prominent use of powerful photos and videos to bring these stories to life. 3. Providing clear CTA's for getting involved throughout the site. 4. Provide multiple opportunities for users to learn about the Impact that FareStart is having in the community.
​
-
Integrate Catalyst Kitchens to create a more cohesive branded experience. Users reported not understanding the the role of Catalyst Kitchens and its relationship to the FareStart organization when looking at the current site.
​
Design, Testing and Iteration
Homepage 1st Iteration:
The following is our first attempt at incorporating our design objectives into our design.
​
1. Simplified primary nav. Create four main categories, each designed to drive engagement through awareness of FareStart's work and impact.
​
2. Looping video/hero image above the fold. Visitors to the site will immediately be greeted by a video which brings FareStart's work to life.
​
3. Prominent mission statement call-out and rewording. To help users more easily identify the mission statement we simplified its wording and moved it to a more prominent location as a text overlay on the hero video.
4. Simplification: We eliminated the amount of text on the page and tried to have the
prominence of different text elements reflect
their hierarchy.
​
5. Clear programs icons with accompanying call to action. Our priorities were to give the mission statement first priority and
FareStart's programs a second level of prominence. Each of these icons provides a basic description of the program and is clickable so the user can learn more detail about each one.
6. This Impact section later becomes its own page. The purpose of the Impact section is to raise of the stories of FareStarts graduates. On the existing site these graduate video stories were buried at the bottom of the page. We relocated them to a more prominent position and added supporting text to provide better context.
7. This became a very simple yet effective way of communicating to users the various ways they can get involved with FareStart. This is the first iteration of this idea of giving users a simple way to select a way to get involved. Each box is clickable and takes the user to the accompanying page to sign up or gain more information.
8. In response to the feedback that came out of our research indicating that people feel most passionately about emerging issues, we created this section. It showcases the amazing work FareStart has been dong during the COVID outbreak. We wanted users to have a simple, effective way to access the press they've been getting. This section links users to the latest new stories FareStart has been involved in.
First Round of Usability Testing on the New Design
Study Purpose: The primary purpose of this first round of testing was to get qualitative data in the form of user feedback on our first redesign iteration.
Research Questions:
How easily can users find information about:
1.) The mission and programs. 2.) Donating 3.) Catering 4.) Catalyst Kitchens?
​
How effective is the site at communicating this information once located?
​
How easily can users navigate the steps to completing 1.) A donation. 2.) A catering Inquiry?
​
How is the new visual design being perceived by users.
​
How do users interact with the new navigation in the site.
Summary of Results:
​​
Quotes:
​
-
Mission Statement: "The mission statement is super clear. It's right here on top of the video."
​
-
Programs:"I'm confused about the programs on the homepage. There are three program icons on this page, Job Skills, We Feed, Restaurants, but then when I go to the navigation at the top there are five categories. I don't get it."
​
-
Catalyst Kitchens: "I can't tell what Catalyst Kitchens is from the homepage. It's not clear."
​
-
Visual Design: The homepage is much better than their site! It's cleaner and more simplified."
​
-
Catering Section: I like the tabs at the top of the wedding section page. Everything I need is located on one page."
Homepage Final Iteration
​
In response to the feedback we received from our first round of testing we implemented a number of design changes. We created a second iteration and did another round of usability testing on it. What you see here is actually our third iteration. The following is a description of the changes we made in response to both the first and second rounds of testing.
​
1. In response to the fact that that there was continued confusion about the role of Catalyst Kitchens and their relationship to FareStart, as well as a concern about its lack of prominence on the page, we elected to display it in the primary navigation along with its logo. This provided a clear path for users to gain more information about it.
2. In addition to having Catalyst Kitchens appear in the primary navigation we gave it more prominent placement immediately below the hero image and included it among FareStart's programs. We spent an extensive amount of time crafting the accompanying description. The goal was for users to get a general overview of the relationship between FareStart and Catalyst Kitchens.
3. Findings from our first round of usability testing indicated that users were confused by the fact that only three icons were being used to represent all five of FareStart's programs. We expanded this section to include five icons, one for each of FareStart's programs.
4. Users indicated that the location of the COVID overlay was intrusive. We moved here so that it was no longer competing with the hero image, mission statement, and program icons.
5. In our effort to raise up the student and graduate stories, as well as highlight the impact of FareStart's work, this Impact section was included in our first design draft. After users indicated that there was confusion about the relationship between FareStart and Catalyst Kitchens we decided to include this carousel feature. It allows users to toggle back and forth between stories and statistics of the two entities.
6. This section performed so well in our initial round of testing that we left it essentially
unchanged from the way it appears in our original design. Users felt that it provided a clear method for them to select one of the various ways to get involved.
7. A theme that emerged from our second round of testing was that we had not previously included an obvious method for making a reservation at a FareStart restaurant from the homepage. This section addresses that issue.
8. In response to user feedback that social media is the primary method people rely on for getting updates about a charity's work, this version includes a more fully developed social media section as well as completed footer navigation.
Research Questions:
-
How easily can users find information about 1.) The mission and programs. 2.) Catering 3.) Catalyst Kitchens?
​
-
How effective is the site at communicating this information once located.
​
-
What are user's impressions of the new visual design of the site compared to the old version.
​
-
Is the relationship between FareStart and Catalyst Kitchens being communicated more effectively with our latest iteration.
Pre and Post Metrics Summary:
​
Success Rate
​
Participants were rated on their ability to complete the same three tasks from start to finish.
​
Results indicted that:
-
User's ability to locate the mission statement from the homepage saw an increase from 75% to 83%.
-
Participant's ability to identify the various programs that FareStart is engaged in from the homepage saw an increase of 50% to 75%.
-
User's ability to locate specific information about food options and pricing on the catering menu, as well as locate rental pricing information about FareStart's venues, saw a success rate increase from 58% to 100%.
​
System Usability Scale
​
While the current site earned a System Usability Scale Score of 63.3 from users, essentially a C- rating for usability, the new site earned a 78.5 or B+/A- rating.
Summary of Results:
​​
Feedback and Final Reflections:
The following is feedback we received from users during our final round of testing, comments from the FareStart staff during our presentation and final reflections and next steps.
Final round of Usability Testing on the New Design
Study Purpose: The primary purpose of this round of testing was to obtain quantitative and qualitative data so that we could compare our initial round of testing on the FareStart site to the new site. Overall, the new site performed extremely well relative to the original FareStart site. There were significant improvements on the task success rate metric as well as the SUS score. See the metrics section for specifics. User feedback was extremely positive as well.
​
​
-
"I like the look of it. It's very clear what it's about. The categories are really simple. The video brings the story to life. I really like that you can see the people in the video.
​​
-
"I find the site to be compelling and engaging. The tone is compassionate and personal."
User Quotes:
​While continued refinement is needed, the final round of testing revealed significant improvements in how users are encountering the site.
​
​
-
"There is an elegance to the site. I really like the way it's laid out!"​
​​
-
"The way you've incorporated the quotes from the graduates really humanizes it."
​
​
-
"I really like this section and this page in particular. It's so clean. I feel like you get here and you can relax. It's really clear what you need to do on this page."
FareStart Organization Quotes:
At the completion of the project we presented our designs to representatives from the FareStart organization. Their feedback provided powerful confirmation that we'd met our design goals.
​​
-
"From a storytelling perspective you really hit it out of the ballpark." ​
​
-
"I love the flow, I love how you simplified the information, and how you showed the impact with the student stories."
​​​
-
"That was a great solve for integrating Catalyst Kitchens. It was a great design challenge and the logo in the primary nav. was an interesting solve. I wasn't expecting the menu with the hover but it really works."
​
-
"I also like how you integrated Catalyst Kitchen. It feels like it's integrated into Who We Are and What We Do."
​
-
"You talked about the impact the student stories had on you, and I think the comes through loud and clear here."
Final Reflections and Considerations:
Further refinement is needed around our primary and secondary navigation categories. The Our Impact heading is currently the only primary navigation category that does not have any secondary navigation associated with it. On the other hand, the What We Do drop-down has 15 categories. The result is that users are overlooking information in the What We Do drop-down and they think the Our Impact category drop-down is broken because nothing shows up when hovering.
Another issue is that, while the description we've created for Catalyst Kitchens seems to provide users with enough information to understand what Catalyst Kitchens is and its relationship to FareStart, I found that many users missed or skipped over the description. It would be interesting to experiment with a variety of visual treatments and test them to see if users had a better time identifying this critical information.
​
Overall, however, I'm satisfied with the work that was done on this project. FareStart was very pleased with what we did and complimentary. User feedback and testing results confirm that we've made significant improvements to the site and met our design objectives. I believe the work we did will result in greater donor engagement, and visitors to the site will feel a deeper emotional connection to FareStart's students, graduates and the organization as a whole.
The work we did around FareStart and Catalyst Kitchen's branding resulted in a more clearly defined relationship between the two and a better explanation of the work that each organization is engaged in.