Project Deliverables: Mobile app and responsive website design

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

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

Foodable responsive designs by Jenn Borton

User Personas: Mei & Clayton

Foodable user personas by Jenn Borton

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.

Foodable user personas by Jenn Borton

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.

Foodable competitive audit by Jenn Borton
Foodable competitive audit by Jenn Borton


I did a quick ideation exercise to come up with ideas for how to address the gaps 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.

Foodable ideation sketches by Jenn Borton

Low-fidelity Prototype

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.

Usability Study Findings



These were the main findings uncovered by our usability study:

High Fidelity Prototype

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.

Accessibility Considerations

Information Architecture

Foodable site map by Jenn Borton
Foodable desktop website screens by Jenn Borton
Foodable mobile app screens by Jenn Borton

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.


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.

Next Steps