CAVA

Mobile App Design

CAVA is a growing Mediterranean culinary brand with a flavorful and healthy fast-casual restaurant experience featuring customizable & crave-able salads and grain. Customers can create their dishes and place orders in-store and online (App and website).

To better serve healthy food with great experiences to customers, we’ve added a feature wherein users can use an interactive menu and visually see their customized food while ordering via iOS App.

Project Objective

• Design an interactive menu feature to add to the existing app

• Design an interactive menu that allows users to visually create and see their customized food while ordering

• Design a feature that is easy to use and browse through the app with filtering options

• Design within constraints, especially within an existing visual design system

ROLE
UX/UI Designer
Brand Designer
Mobile App Designer

DURATION
4 Weeks
80HRS

TOOLS
Figma
Miro
Photoshop

Process

Research

We wanted to learn more about the impact of interactive menus in an App and how this feature can improve user’s usability while using the app.

Research Goals

• Understand the impact of interactive menus
• Discover why users order food via App
• Discover how an interactive menu can benefit users and the business
• Discover other restaurant Apps with/without interactive menu
• Discover what are the pain points users experience in ordering food via APP
• Understand the users’ ordering behaviors including habits, needs, and motivations

Research Method

• Market Research
• Competitive Analysis
• User Interviews

Market Research

To collect data and resources of the current clothing industry market, trends, and demographics.

CAVA App
With the CAVA app, customers can easily pay at the counter and order their favorite meals ahead to skip the line. They can also find the nearest CAVA location and earn rewards with every purchase they make. As customers continue to use the app, a more complete profile of who they are (when they like to visit, their favorite menu items & much more) begins to form.

Some problems found on CAVA iOS App reviews:

Cannot recall previous orders (no-reordering option)
Too much scrolling
Cannot visualize (Too descriptive)
Not informative with the limited emojis when ordering (need to be more descriptive)

Interactive Menu
An interactive menu is a digital menu with elements the diner can interact with. They typically make it easy for customers to browse and learn more about each dish. The interactive menu includes enticing food images and descriptions that encourage purchases, nutritional and allergy information that makes choosing food easier, and highlights the most profitable promotions and specials.

The benefit of the interactive menu:

Easy Ordering
Customize Menu
Contactless Experience
Detailed Menu
Manage the perceived wait time

Competitive Analysis

To find how current restaurant apps are and an interactive menu on their App. Competitive analysis was a helpful tool to gain information of what is working and not working from the other competitors.

User Interviews

User interviews were conducted to understand to collect more qualitative data of users' ordering food on the app habits and which platform they use, and why.

•Participants: Individuals ages 25-35 who ordered food via App in past the 3 months.
The interview was conducted with 5 participants below:

Participant 1: Female (34), Marketing Specialist, Single, Orange County, CA

Participant 2: Female (33), Product Manager, Married, Los Angeles, CA

Participant 3: Male (27), Mechanical Engineer, Singer, San Francisco, CA

Participant 4: Female (29), Videographer, Single, Manhattan, NY

Participant 5: Female (31), Fashion Designer, Single, San Francisco, CA

Affinity Map

After the user interviews, an affinity map allowed us to collaboratively analyze the research findings.

User Interview Summary

User Goal
To order customized food faster and easier using the App.

User Needs
• Clean and easy UI design
• Quick and fast to order
• Saving time
• Accuracy of delivery/pickup time
• Featured/most rated food
• Recommended add-ons
• Reorder option
• Fun ordering experience

User Frustrations
• Time consuming
• Delayed delivery time
• Unexpected fees
• Too many texts
• Unfamiliar UI design
• Ingredient not available
• Ordering wrong food

User Motivations
• Customized order
• Convenient ordering
• Ordering without frustrations
• Ordering specific foods

Research Findings

• All participants are interested in using the interactive menu.

• All participants stated that an interactive menu is helpful to order food.

• 4 out of 5 participants order food on the App more than 1 time a week.

• 4 out of 5 participants stated the reason for ordering food on the App is for convenience.

• 3 out of 5 participants normally check top rated/featured items first on the menu.

• 3 out of 5 participants stated that the CAVA app is inconvenient due to unnecessary text on the menu.

• 3 out of 5 participants preferred to use an interactive menu instead of a text menu.

• 2 out of 5 participants stated to add a reorder feature to the CAVA App.

• 2 out of 5 participants highlighted the keyword for food App as #Accuracy.

Persona

A user persona, Jake, was created based on the insights gained from user research. Jake helped to better empathize with the target user throughout the design process. His main goal is to order/receive healthy food on scheduled time.

Point of View (POV)/ How Might We (HMW)

POV and HMW statements for Jake was created. This statement was helpful to reframe the design challenge in a way that incorporates all the information and insight we have uncovered so far. POV and HMW statement process allowed us to understand how might we help Jake to have a better user experience while using the CAVA App.

Golden Path

To complete the main task (ordering food), a golden path allowed us to create the key set of steps that a user takes to find a product’s real value. This path focused on the ideal default and not focus on exceptions or errors. The golden path was helpful to identify where to put the interaction menu in the App for users to have a better user experience.

Crazy 8’s

Crazy 8’s method was used after identifying the key pages of interaction menu in the App. Crazy 8’s is a core Design Sprint method that helped to push beyond the first idea and to generate a wide variety of solutions.

Low-Fi Wireframe

After the crazy 8’s sketching method, the interactive menu sketches were translated in to low-fidelity wireframe. Additionally to the existing CAVA App, the “Selecting time” and “Interactive Menu” wireframes were added for users to have more convenient food ordering process.

UI Kit [Interactive Menu]

Based on the low-fidelity wireframe, the interactive UI Kit was created. UI kits are helpful tools that allow designers to quickly and efficiently create mockups for handoff.

Hi-Fi Wireframe

Based on the UI kit, the the “Selecting time” and “Interactive Menu” high-fidelity wireframe was made.

High Fidelity Prototype

Live Prototype

Usability Testing

Test Objectives

To test the users' ease when navigating the app to complete a task
To test the overall quality and the flow of the design
To test how quickly the users can complete a task
To validate whether the design solves the user’s needs
Observe the interactive menu checkout process
Observe the user’s hesitations, frustrations, and confusions while navigating the app

Task
Create a customized salad using the interactive menu, and place the order for delivery at 12 PM at Santa Monica.

Ingredients for the customized salad includes:
Splendid Greens
Grilled Chicken
Roasted white sweet potato
Tomato + cucumber
Garlic dressing

Test Methodology

In-Person: The participants will be completing the given task on their phones using Figma Mirror
Remote (Zoom): The participants will be completing the given task on their computer while sharing their screen on Zoom

Participants

Number of Participants: 5 Participants
Age Demographic: 25 - 35 Years of Age
Participants ordered food via mobile app in the past 3 months.

Affinity Map

After the usability testing, we created an affinity map to sort what worked, needs to be changed, questions from participants, and new ideas. The affinity map helped us to prioritize and rank the user testing feedback.

Key Takeaways

All participants were able to complete the given tasks successfully
All participants stated that the app was easy to browse
All participants highlighted that the interactive menu was a positive experience, and satisfied with their ordering experience
2 out of 5 participants stated that CAVA interactive menu changed their perspective from using
a text menu
3 out of 5 participants suggested having an “Interactive menu instruction” for a better experience
3 out of 5 participants suggested adding a “Double portion” feature for a better experience
2 out of 5 participants were confused with “Roasted white sweet potatoes” being in the protein category instead of the topping category.

Priority Revision

Based on the user testing results, the highest priority revision was made. First of all, an instruction notification note was added to notify the users that they have an option to switch to a text menu. Also, adding extra portion option was added for users to have flexibility of adding/removing portions based on their preference.

Next Step

The existing CAVA app is using pure white (#FFFFF) and black (#00000) colors. Would highly recommend using not pure white and black colors for future adjustments.
The existing CAVA app is using a smaller font size than 16pt. Would highly recommend using at least 16pt for the smallest font size.
Update protein and topping categories in the menu
Add a light mode fuction
Increase the prototype functionality
Make further adjustments