User Centered Research & Design
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.
Competitive Analysis, Interviews, Surveys, Web Analytics, Affinity Diagrams, Personas, Task Matrix, Card Sort, Information Architecture, Sketching, Axure Prototypes, Usability Studies, Content
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.
A restaurant customer and two FareStart donors were interviewed. Staff members from various roles responded to questionnaires
A survey was sent to a list of FareStart customers and donors, with a large response, providing qualitative and quantitative data.
Qualitative responses from the interviews, questionnaires and surveys were analyzed for key trends using a card sorting activity.
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.
A baseline usability study was performed on the top two FareStart site priorities: a restaurant reservation, and a donation.
Already 30% mobile even though not optimized.
Mainly mature audience.
Mix of tech and professionals plus retirees.
Guest Chef (88%)
The restaurant dominated.
Top actions are buried.
Not enough images.
Wall of words.
Small font size.
Not mobile optimized.
Ease of Use
4.1 of 5
People did not generally dislike the site, but saw a lot of opportunities.
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.
Greg - Guest Chef Night
Greg and his wife really enjoy eating out at FareStart's guest chef night, and they care about the cause.
Guest chefs & menus easy to find.
Quick navigation through calendar.
Easily make or change reservation.
Access on desktop or mobile.
Caroline - Catering
Caroline is a catering admin who needs to order lunch for meetings at Amazon, which can be stressful.
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.
Make donation easy to find.
Make online donation much easier.
What are her donation options?
How will her donation be used?
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.
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.
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.
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.
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.
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.
Much better reaction to side navigation.
Excessive text hurt usability.
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:
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.
- 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.
- 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.
- 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.
- 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