farestart.jpg

Farestart.org
User Centered Research & Design

Farestart-logo2b.gif

User Centered Research & Design

 
teal 4.png

Overview


FareStart provides culinary training to those in need, with thriving restaurants, catering, and more. Our research and site redesign provided an intuitive, responsive model to serve their many audiences. 

gray 3.png

My Contributions


Competitive Analysis, Interviews, Surveys, Web Analytics, Affinity Diagrams, Personas, Task Matrix, Card Sort, Information Architecture, Sketching, Axure Prototypes, Usability Studies, Content

 

 

What's Interesting?

 

Many Audiences – At a Glance

Could many audiences easily find their info in a single page? What did certain groups most often seek in the farestart.org website? How did the FareStart team's own site goals mesh with this? What could we bring forward to a single click from the home page without cluttering it?

A balance of improved information architecture, visual design and content optimization helped achieve this. With each type of user in focus, we featured tiles of content around their key needs, presenting each with clear images, descriptions, links and buttons that allowed quick understanding and navigation. 

Restaurant Guest

Catering Client

Financial Donor

 

 

Research

 

Research Methods

Interviews

A restaurant customer and two FareStart donors were interviewed. Staff members from various roles responded to questionnaires
 

Survey

A survey was sent to a list of FareStart customers and donors, with a large response, providing qualitative and quantitative data.

Affinity Diagramming

Qualitative responses from the interviews, questionnaires and surveys were analyzed for key trends using a card sorting activity.

Competitive Analysis

Five other websites focusing on food service training and social services were benchmarked for key features, pros and cons.

Site Map & Analytics

A site map was constructed and site usage statistics were analyzed to determine top interactions, and to spot potential dead-ends.

Baseline Usability

A baseline usability study was performed on the top two FareStart site priorities: a restaurant reservation, and a donation. 

Research Findings

teal 4.png

Device Use


Desktop (70%)
Mobile (24%)
Tablet (6%)

Already 30% mobile even though not optimized.

Age


60+ (36%)
50-59 (28%)
40-49 (23%)

Mainly mature audience.
 

gray 3.png

Occupation


Tech/IT (26%)
Retired (21%)
Professional (24%)

Mix of tech and professionals plus retirees.

gray 2.png

Website Use


Guest Chef (88%)
Lunch (44%)
Donation (22%)
Catering (19%)

The restaurant dominated.

teal 1.png

Site Hurdles


Confusing navigation.
Top actions are buried.
Not enough images.
Wall of words.
Small font size.
Not mobile optimized.

gray 3.png

Ease of Use
 

4.1 of 5

People did not generally dislike the site, but saw a lot of opportunities.
 

 

Personas

Personas were very important for the FareStart project, since there was such a wide variety of users who all needed quick access to sections of the site. We scoped the project to focus on three major user types: a restaurant customer, a catering coordinator, and a donor, though there were at least a half dozen other important users, such as volunteers, prospective trainees, and social workers.

persona-xavier.png

Greg - Guest Chef Night

Greg and his wife really enjoy eating out at FareStart's guest chef night, and they care about the cause.

Design Considerations:
Guest chefs & menus easy to find.
Quick navigation through calendar.
Easily make or change reservation.
Access on desktop or mobile.

persona - clarissa.png

Caroline - Catering

Caroline is a catering admin who needs to order lunch for meetings at Amazon, which can be stressful.

Design Considerations:
Menus & pricing easy to find.
Options for dietary restrictions.
Make it easy to order.
Provide an immediate response.

Donna - Donor

Donna believes that FareStart is a great organization, so she's happy to financially support their mission.

Design Considerations:
Make donation easy to find.
Make online donation much easier.
What are her donation options?
How will her donation be used?

 

Design Principles

With Caroline, Greg and Donna in mind, our team put together a list of overarching design principles. When in doubt in the design process, we could return to these. For example there was a point where we we wanted to save space in the home page, but our principle "Mission Focused" called for a statement to be front and center.

 
 
 

 

Information Architecture

 

Task Matrix

We created a master list of all current and proposed tasks for the site. We then mapped each to our 3 personas, noting each task as (1) primary, (2) secondary, or not applicable to that user.

Card Sort

After consolidating our task list to 70 items, we loaded them into an online card sort. Customers were asked to drag items around and create clusters of tasks that they felt belonged together.

Analysis

There were wide variations between card sorters. Visualization tools showed widely spread branches, so it was helpful to walk through individual cases to see how differently people might think.

 

Final IA

To ensure mobile usability, only the top two levels would be featured in navigation menus, while the third level items could be prominently featured using visual hierarchy and clustering within the Level 2 pages. On the home page, we could also merchandise direct links to the most important tasks.

 
 
 
 

ProtoTypes and Evaluation 

Very Quick Mobile Prototypes

I felt it was imperative to start with mobile, given that 30% of the FareStart users were already accessing the site via mobile. To very rapidly create paper prototypes, I printed an iPhone image to scale and cut out the screen. I then created a simple doc with screen-width columns outlined, and printed multiple copies for sketching. After trying out many ideas by hand, I created more refined versions of the best using Google Sheets. I included an iPhone overlay with a transparent window to provide the same sanity-checking ability I had with the paper cutout.

 
 

1st Iteration - Sketch, Model, Test

Each team member individually sketched their best ideas for a desktop interface, preparing rough wirelines to share with the group. As a team, we gathered around a whiteboard and synthesized a single strong concept. Two team members then built an Axure model of this initial concept, and other team members led user studies to evaluate.

Tests Showed:


Home page tiles were well liked. Can show 6 total. 

Restaurant horizontal nav confusing. Move to side.

 

2nd Iteration - Sketch, Model, Test

Following user testing, we were literally back to the drawing board to improve our designs. The key to this design revision was a left-hand navigation on 2nd level pages such as "Restaurants & Cafe" and "Catering". This provided a clear indicator of options within these main topics, and showed the user's current selection. Test subjects no longer expressed confusion with this new iteration, and the configuration was more flexible to accommodate future business expansions to include new restaurants or catering options.

Tests showed:


Much better reaction to side navigation.

Excessive text hurt usability.

 

Content Improvements

A final necessary step to improve usability required a complete rewrite of the content of most of the site. This took a surprising amount of effort but really paid off, with a subsequent round of testing showing a great lift in user approval. Throughout the rewrite process we kept these overarching principles in mind: 

 
 
 

Final Model

Our final model, including content refinements, is available in a medium resolution Axure interactive model. The desktop prototype has the homepage, navigation menus, and flows for our three scoped personas built out: Restaurant, Catering, and Donation. The mobile prototype was not formally in scope for our project, but we could not pass stop without at least a home page proof of concept. 


 

Reflections

 
 

Research: 

  • A variety of research methods were required to triangulate toward the most important site improvement factors and achieve balance. Any single method provided a skewed view.
  • While client staff had an expertise in their business, their site had evolved to a lengthy marketing brochure, burying the most frequent user's site needs 3 or 4 levels deep.
  • While we were able to scope only three major personas, the business model was unique in that it had at least a half dozen unique segments who would make frequent use of the site.

Information Architecture:

  • A task matrix formed a solid first step in our process. By taking an inventory of current site functionality, plus proposed new capabilities, and mapping to our primary personas, we were able to prioritize.
  • Card sorting tools gave us clear feedback from real customers who had volunteered to help us during the survey.
  • Individuals were widely scattered in their ideas of how info could cluster, so card sort visualization trees were less helpful. Looking at individual user logic was more helpful.

Prototyping: 

  • Sketching individually before meeting as a group helped us each participate more passionately and personally, and overall raised the caliber of our first iteration.
  • In my opinion, you are never too short on time to consider mobile in your earliest sketches. While the team and project asked us to focus on desktop alone, my mobile prototypes were easy to create and helped inform and shape a simpler and more usable desktop model.

User Testing: 

  • Testing frequently with just a few users proved valuable.
  • Common issues were evident in each of three iterations, and our model got significantly more usable in each round of testing.

Files and Deliverables:

 
 

Copyright © Paul Townsend