CoverBanner-Medium.jpg

FoodAble Case Study

Project overview 

FoodAble is a meal delivery service that offers healthy, pre-portioned, ready to heat & serve meals for seniors with mobility issues. It’s easy to use, allowing seniors to select a week’s worth of meals for delivery at home. FoodAble targets senior customers who don’t drive and can’t get to the grocery store regularly, as well as those with fine motor control challenges caused by arthritis or Parkinson’s, making chopping and preparing ingredients challenging.

The problem

Many grocery delivery websites only deliver raw, unprepared ingredients. This means the user needs to meal plan, choose a recipe, and then cut and prepare their own food. This can be difficult for seniors with mobility issues who often do not drive or have access to a vehicle.

The goal

Our FoodAble app and website will let users quickly and easily order a week’s worth of pre-portioned, healthy dinners that can be reheated and served without additional prep work required.

Concrete-Dark-Small.jpg
Mockup-Laptop-Landing.png
Mockup-Tablet-Landing.png
Mockup-Phone-Landing.png

Understanding the user

User research: summary

I conducted interviews and created empathy maps to understand the users that I am designing for, and their needs. A primary user group identified through this research was retired senior-aged adults who don’t have the time, mobility, or motor skills required to grocery shop, prepare, and cook meals at home.

This user group confirmed initial assumptions about FoodAble customers, but research also revealed that mobility was not the only factor limiting users from cooking at home. Other user problems included interests, lack of access to a vehicle, obligations or challenges that make it difficult to grocery shop and prepare ingredients at home.

User Personas

Mei: Problem statement

Mei is a retired grandmother with limited mobility, who needs to order fresh, healthy, easy-to-prepare meals for delivery, because she doesn’t have the budget or energy to grocery shop and cook as often as she’d like.

Clayton: Problem statement

Clayton is an energetic retiree who suffers from arthritis, who needs an easy and affordable way to order healthy, pre-portioned meals, because he doesn’t have the fine motor skills needed to prep and cook his own dinners.

Competitive audit

The goal of this audit was to understand the various products and features currently available in the marketplace and to see how some or all of those features could be combined into one ordering website and mobile app.

gux-fa-competitiveaudit-01-1.png
gux-fa-competitiveaudit-02-1.webp

Ideation

I did a quick ideation exercise to come up with ideas for how to address the gaps I identified during the competitive audit. My focus was specifically on a clear, uncluttered user flow with easy-to-identify navigation elements, featuring lots of photography so users can see what their meals will look like.

paper-wireframes.png

Refining the design: Digital wireframes

Refining the design: Digital wireframes

Refining the design: Digital wireframes

I then moved on to create digital wireframes of my initial concept screens. Here I was able to refine the visual designs by implementing a grid system and establishing a visual hierarchy of elements. I also started to better understand the user journey from screen to screen within the app.

lf-mockups.png

I began to establish a basic layout for the main pages of the app. Here is the menu details page, which includes the name of the dish, a feature photo, customization options, the main navigation bar, and ‘add to cart’ functionality.

fa-notes.png

Low-fidelity prototype

The prototype connects the user flow of choosing and customizing a menu item, so the prototype could be used in a usability study with users.

lf-user-flow.png

Usability study findings

Parameters

Study type: Unmoderated usability study
Location: Calgary, Canada: Remote
Participants: 10 participants
Length: 40-60 minutes

Findings

These were the main findings uncovered by our usability study:

  • Navigation: Users want to know where they are in the app at all times, and be easily able to click back a page.

  • Choosing meals: Users wanted lots of suggestions on which meals to choose each week, sorting by ingredient, dietary restrictions, and most popular items.

  • Instructions & Tutorials: Users wanted clear, concise instructions on how to navigate and use the app, and how the delivery service works.

  • Screen reader: Many of our participants have visual impairments and requested we incorporate a screen reader.

Mockups

Mockups

Mockups

Based on the insights gained from our usability studies, I applied design changes like increasing the elevation of buttons so they’re more obvious, increasing the contrast between the text and backgrounds, and including a ‘how it works’ tutorial page explaining how FoodAble works.

During the usability study, some users became confused as to how many meals they needed to select. We added a countdown to the ‘add to cart’ pop-up to indicate how many meals they had chosen.

fa-ba1.png
fa-ba2.png

High fidelity prototype

The high-fidelity prototype for the FoodAble ordering app follow the same user flow as the low-fidelity prototype, including the design changes after the usability.

hfp-user-flow.png
hf-sign-in.png
hf-menu-item.png
hf-how-it-works.png
hf-edit-cart.png
hf-menu.png
hf-cart.png
hf-chicken.png
hf-added-to-cart.png

Theme

Dark: #2F2F2F

Header: Lato Bold

Paragraph: Lato Regular

Buttons: Lato Semibold

Primary: #9DC132

Header: Lato Bold

Paragraph: Lato Regular

Buttons: Lato Semibold

Secondary: #9F9F9F

Header: Lato Bold

Paragraph: Lato Regular

Buttons: Lato Semibold

Accessibility considerations

  1. Provide access to users who are visually impaired by using large font sizes (16pt minimum), high contrast text (black on white), and that all buttons and navigation items are highly elevated and labelled with clear, unambiguous terminology.

  2. Large, high quality photos of all menu items help users better understand what meals they are ordering.

  3. Ensure the app and website are fully compatible with screen reader technology, accessible through an icon in the footer of all pages.

Information architecture

Once the app design was complete, I began work on our responsive website. I used the FoodAble app to guide the information architecture of the website to ensure a consistent and cohesive experience across devices. 

gux-fa-sitemap-1.png

Responsive designs

The designs for screen size variation included a mobile device, a tablet, and a desktop computer. I optimized the designs to fit specific user needs for each device and screen size, keeping in mind that the majority of our users will be using the desktop website, not the mobile app.

With the desktop website, we were able to increase our font size as we had more screen to design with. We were also able to add more tutorial and informational call-to-actions such as ‘cooking tips’ and how FoodAble works.

Concrete-Dark-Small.jpg
Mockup-Laptop-Home.png
Mockup-Tablet-Home.png
Mockup-Phone-Home.png

Going Forward

Takeaways

Users shared that the FoodAble delivery service is something that they would use on a weekly basis. They felt that FoodAble really considered how to meet their needs. One quote from a user during a peer feedback session was “the FoodAble website is so simple and easy-to-use! I will definitely use it next week as prepping food is becoming more difficult as time goes on.”

What I learned

While designing the FoodAble app and responsive website, I learned that the first ideas are just the beginning of the design and iteration process. Diligently going through each step of the UX design process and aligning with user needs helped me come up with solutions that were feasible and useful, and influenced every step of the iteration process and design.

Next steps

  1. Conduct another round of usability studies to validate whether all of the pain points identified in the first study have been effectively addressed.

  2. Add more educational resources to the app and responsive website to further assist users in ordering and preparing their meal deliveries.

  3. Conduct further research to identify and determine any new areas of need.