FoodAble

Project Deliverables: Mobile app and responsive website design

My Role: Creative Direction, UX/UI design, graphic design, UX research, and writing

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 and allows seniors to select a week’s worth of meals for delivery at home. 

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 who often do not drive or have access to a vehicle, as well as those with fine motor control challenges caused by arthritis or Parkinson’s, making chopping and preparing ingredients challenging.

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

The FoodAble app and website has a simple and intuitive design, with large buttons, high contrast colors, and larger text sizes for users with visual impairments. The main screen displays a list of available meal options, along with photos and descriptions of each dish. Users are able to customize their orders by selecting options such as portion size and dietary restrictions.

The design allows users to schedule meal deliveries for specific dates and times, and provides a notification when the meal is on its way. It also includes a feature for users to provide feedback on their meals, to help the service improve and maintain high quality. The app is responsive, so it can be used on a wide range of devices including smartphones and tablets. It also integrates with the meal delivery service's website and customer database, to provide a seamless experience for users.

User Personas: Mei & Clayton

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 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.

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.

From there, I created a 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.

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.

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.

I then moved on to create a 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.

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.

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.

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.”

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.

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

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

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