Designing a Fresh & Healthy UI
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.
A demonstration of various form-factors (web, mobile, tablet) and how the new design adapts to each.
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.
A teardown helps identify the current user flow and how many interactions are required to complete a task. In the standard ordering flow, five independent steps are required for a user to add a new item or to customize a menu.
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, .
Tearing down 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.
Based on our persona and competitive analysis, we identified a hypothesis – if the ordering process was shorter and more visually intuitive, customers would show greater engagement in ordering food. While considering metrics for testing, we sketched out a new information architecture that would allow users to inspect items and customize their orders in 3 steps.
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.
We were pleased to deliver a comprehensive redesign for iOS that produced an appealing, accessible interface with greater contrast cues and visuals that highlighted the quality of the meals.
