A Fresh & Healthy UI

mockup of methodology app.
A mockup for the methodology app – a fresh take on ordering pre-made, healthy meals.

As our devices bring delivery services and food together, how do we decide what’s appetizing? Many of the traditional cues of a restaurant or grocery store – the smells of cooking of the texture of fruits and vegetables – do not translate to screen interfaces. In leading this app concept redesign, we took the hypothesis that expressive, instagram-worthy images were the core of the experience, and that users should be able to ‘flip’ through meals the way you’d flip through a recipe box. This redesign is a testament to the idea that in a future where food is delivered, we must first eat with our eyes.

work for
  • Design Sprint
tl;dr
  • Redesign of a ready-to-eat meal delivery service, currently active in the Bay Area.
roles
  • Competitive landscape & strategy.
  • UI
  • Wireframe and flow.
  • Design system library.
  • Abstract library for collaboration and frontend development.
A clickable hifi mockup of the updated app. This is the output at the end of the process.
Responsive design in motion – how the home screen adapts to a new device context.

When approaching a new industry or domain, background research is critical in surfacing opportunities or ground truths to frame the problem.
An inventory of the current app helps identify the user flow and how many interactions are required to complete a task. We identified five independent steps necessary for a user to add a new item or to customize a menu.
A detailed observation of each screen made it clear that hierarchies of objects, such as menus and meals, are ambiguous. From the home screen, it was impossible to differentiate 'locked in' menus that were scheduled for delivery from opportunities to add or edit menus.
A competitive landscape was carried out by testing other meal-delivery and grocery apps. Through observation, we identified a few features and trends, namely, the consensus around a three step ordering process, .
Before beginning the product design, a series of persona's are developed to embody the user requirements. To create this persona, we made use of surveys and interviews of existing users. Personas such as this helped drive consistent, definitive insights about the user, such as the need to provide an informative interface while reducing barriers to order.
Based on the literature and user research, we crafted two hypothesis problem statements to focus our efforts on.
With the information architecture as a guide, we began a quick layout of the ideas that we wanted to embody - images for food, and large cards to help group menus, meals, and items into recognizable hierarchies. Paper sketching can be a good tool for quick ideation and to get feedback.
After quickly ideating with sketches, the next step is to craft low fidelity wireframes. Here, specific buttons and interactions are specified, and text, button, and image placement begin to take form. The wireframe can be quickly mocked into an interactive, allowing for user testing and feedback.
Images of the essential screens for the application. In the new design, the ordering flow has been reduced from 5 to 2 interactions.
The final aspect of any project should include goals and metrics to identify if the redesign is creating the intended impact. In this case, we were excited to help place the food front and center while optimizing several of the interaction flows.