UX Case study

Meals on Wheels

An app redesign that delivers a difference

pROJECT OVERVIEW

Meals on Wheels is a non-profit organization with over 5,000 local programs throughout America dedicated to addressing the nutritional and social needs of seniors. It is because of committed staff and volunteers that homebound seniors can receive a healthy meal, a quick visit, and routine safety checks.

cHALLENGE / Solution

Meals on Wheels’ existing mobile app allows volunteers to track deliveries and alert coordinators about changes in the client’s condition. It’s a valuable tool but it’s client centric, meaning it primarily focuses on the needs of the senior. However, the Coordinators and Volunteers also have their own unique challenges so the goal of this project was to identify how the existing app was or was not meeting their needs. Specifically, we discovered that an enhanced mobile application that also allows volunteers to map their client route, communicate with other volunteers and coordinate route coverage amongst each other.

role
Lead UX Researcher, UX/UI Designer
duration
2-week sprint
group
Leslie Lung, Jeremy Rife, Josh Levine
Design tools
Figma, Photoshop, White Board, Pen and Paper

The Process

(Hover to view more. Click to skip to section.)

user interviews

We started our research process by conducting user interviews. A team member and I sat down with the Coordinators at Meals on Wheels West in Santa Monica to better understand the volunteer experience from the people who organize it. It was here we were able to uncover real insights about their goals and frustrations as well as pinpoint areas where the existing app isn’t meeting their needs. Specifically, the Mobile Meals app wasn't fully implemented, coordinators have to arrange for a route to be covered if a volunteer backs out, and there isn't a systematic way for volunteers to communicate outside the program.

contextual inquiry

The following day we were invited back to Meals on Wheels West for a site visit and ride along. This allowed us to immerse ourselves into the Meals on Wheels experience and understand the context in which volunteers would be interacting with our product. We directly observed the volunteers’ behaviors, preferences, and interactions. I was also able to ask the volunteer questions regarding what works and what doesn’t work for them while another team member took detailed notes.

hypothesis

We believe that the existing mobile app can stand to be improved by allowing volunteers to easily navigate  to  clients, communicate with other volunteers and coordinate route coverage amongst each other.

meet barbara

We used this hypothesis to help build a proto-persona, which informed our decision making throughout the rest of the design process, specifically that we would be designing for volunteers of retirement age with limited technical knowledge.

LOW FIDELITY

Next, our team sketched a minimal viable product and created a low fidelity paper prototype. We then ran 3 usability tests and used the feedback from the tests to iterate on our designs.

what we learned
  • New users wouldn't be customizing their route
  • Add more confirmations of actions
  • List the office staff above the fellow volunteers in the contact list

medium fidelity & useR FLOW

We used the feedback from the tests to iterate on our designs and create a medium fidelity prototype. We then tested our prototype on 3 more users before moving to high fidelity.

what we learned
  • Include a list of available volunteers under request cover
  • Include onboarding tutorial screens to walk new users through the app
  • Show client name only as default on the map page
  • Increase font size for older users

sTYLE GUIDE

Next a team member prepared a style guide for our final design. We incorporated feedback from our user testing, making the font sizes and buttons larger and thus more accessible for our target audience. We used Meals on Wheels current color palette to reflect the same character of the brand.

typography

Aa

Century Gothic

Heading 1

size: 24 px

Heading 2

size: 21 px

Heading 3

size: 18 px

LABEL

size: 14 px

Body

size: 18 px

colors

Cadet Blue
#1BABB6
Midnight Blue
#052A3D
Dim Grey
#4B4B4B
Firebrick
#B61B24
White Smoke
#F6F6F6
Gainsboro
#E5E5E5
Yellow Green
#A6C74B
Dark Grey
#AFAEB5

High fidelity

Finally, I assisted another team member design our high-fidelity wireframes. I was in charge of designing the sign up / onboarding flow and the contact pages.

User onboarding

Volunteers are onboarded through the process of creating an account and have the option to tour the app.

Navigating to Clients

Volunteers can easily navigate to clients through the in-app map feature and have the ability to quickly update client information.

Request Route Coverage

Volunteers can request their route be covered by other available volunteers if they are unable to make a scheduled route.

Connect with Other Volunteers

The app allows volunteers to message other volunteers as well as get in contact with office staff.

reflection

It was a privilege to design an app for an organization that is making a difference. We listened to their frustrations and needs and provided thoughtful solutions resulting in an end product that truly has the user in mind. However, it wasn’t easy. We spent a lot of time iterating and testing and came up against a few walls. Also due to certain constraints, we we’re unable to test with Meals on Wheels volunteers; however we feel strongly that our design adds value to the volunteer experience, and we look forward to bringing it back to Meals on Wheels for further testing in the future.