top of page
Ocean background

California Cafe

Cafe Menu/Ordering App Case Study

California Cafe App Case Study: Image


California Cafe App Case Study: List

My Role

Sole UX Designer for California Café. Designed the app completely from beginning to end.

Project Duration

March 2021-May 2021


Conducted interviews, competitive analysis, user personas, empathy mapping, journey mapping, user flows, storyboarding, paper and digital wireframes, usability studies, affinity mapping, low and high-fidelity prototyping, and accessibility accommodations.

The Product

California Café is a fictional café located in Sacramento, CA. California Café provides its customers with tasty burgers, sandwiches, and drinks. California Café is a brand new café, so it does not have an ordering app. California Café targets a diverse group of customers who want anything from a fast casual dining experience to a laid-back place to relax, study, or socialize.

The Problem

Customers need an easy way to order food when they are out running errands. They want a mobile ordering experience that matches the in-dining ordering experience.

The Goal

Design California Cafe’s app so that customers can easily order food on the go.

User Research: Interviews

I started the process by conducting interviews. Since I started with no prior information, this gave me an idea of what the average user wants in a food ordering application. By doing the research, I found that most people use food ordering apps when they are on the go either busy traveling home from work or running errands. This finding confirmed the assumptions I made about when users would use the app.

California Cafe App Case Study: Text

User Research : Pain Points

California Cafe App Case Study: List


Most customers have busy schedules and want to find a quick meal when they are out.


Customers are not satisfied with the food customization options. They want the app customization options to match what they would be able to do if they ordered in person.

Estimate Ready Times

Some customers had challenges knowing when to order their food because the app did not provide a “ready time”.


Some customers have had difficulties applying coupons to app orders.

User Persona: Elliot

Problem Statement

Elliot is a busy young adult who needs to be able to order food from a café when he is on the go because he does not have time to wait in line at the café.

User Persona: Elliot
California Cafe App Case Study: Image

User Journey Map

Elliot’s journey map shows the steps Elliot would have to take to order food on the go when he is short on time. Using a user journey map helped me imagine how the average user would go through the process of ordering food off of an app.

User Journey Map
California Cafe App Case Study: Image

Paper Wireframes

Creating paper wireframes for each of my screens was a really quick way to begin the iteration process. Creating wireframes on paper allowed me the flexibility to pivot whenever I needed to. This gave me a great starting point for my digital wireframes.

California Cafe App Case Study: About

Digital Wireframes

Digital Wireframe #1 - Customization Screen

Based on my initial design interviews, I wanted to ensure that the customization options were comprehensive. Since all of the interviewees had previous issues with customization. I wanted to ensure they had the ability to customize their meal just like they would if they were dining in.

Digital Wireframe #2 - Choose Time Screen

Based on my initial design interviews, I wanted to include specific times for when the food will be ready. 1 interviewee in particular had previous issues with other food apps not having a ready time.

California Cafe App Case Study: Features

Low-Fidelity Prototype

The low-fidelity prototype included the primary user flow of ordering a food item. This process began with the login screen and ended with an order confirmation screen. After the prototype was created, it was used in a usability study.

California Cafe App Case Study: About

Usability Study: Parameters

California Cafe App Case Study: List

Study Type

Moderated Usability Study


Sacramento, CA


5 participants. Ages 20-70. 3 females and 2 males. Must order from food apps at least twice a month.


15-20 minutes each.


I would like to figure out if our app is easy to use and how
we can improve to make ordering seamless. As a result, users were asked to order a meal on a low-fidelity mobile prototype.

Usability Study: Findings

Clearer Ways to Choose Food

In the usability study, some users were confused about how to choose a food item.

Leaving the Confirmation Screen

In the usability study, some users were hesitant before clicking the navigation tab to go home after the order confirmation.

Boring Features

In the usability study, some users found the app’s customization features to be average/nothing special.

California Cafe App Case Study: List

Design Iterations

Post Usability Study

Actionable Insight Screen #1: Menu Arrows

Actionable Insight #1

One of the actionable insights that I implemented was adding arrows to make choosing a menu item more intuitive. Prior to the usability study, users were not sure where to click to choose a food item. This should make choosing a food item easier to understand for those that were confused.

Actionable Insight #2

The second actionable insight from the usability study made me consider ways to help guide users to exit the confirmation screen. Prior to the usability study, there was no guidance to get users back home. By adding a “Done” button, it is clearer to users how they can exit the order confirmation screen.

Actionable Insight #2 Screen -Done Button on Confirmation Screen
Actionable Insight #3 Screens - Split My Meal in Half feature

Actionable Insight #3

The last actionable insight informed me that users were not excited about the customization features. I added a “Split My Meal In Half” feature for those that want to save half of their meal for later. With the world’s greater emphasis on portion control and meal planning, I hope that this innovative feature will make the app stand out. This feature also helps the app experience match the dine in experience.

California Cafe App Case Study: Features
App Mockup Screens


California Cafe App Case Study: Image
High-Fidelity Prototype

High-Fidelity Prototype

The high-fidelity prototype uses the same user flow as the low-fidelity prototype introduced earlier. The new design changes were implemented to make ordering/purchasing a food item easier for the user.

California Cafe App Case Study: About

Accessibility Considerations

California Cafe App Case Study: List

All form fields will follow a logical reading order, so a screen reader will read everything in a way that makes sense.

Images of each food item will have alternate text to describe what the picture shows for those that are using screen readers.

Using a color contrast analyzer, the entire app passes the WCAG AA/AAA color contrast guidelines.



The app really empathizes with a user’s busy schedule by providing them an easy to use app for their meals. It also provides the user with an application experience that matches the dine in experience.

Quote From the Usability Study

“This app has a really nice layout. Everything is so straightforward and well labeled”

What I Learned

I learned that you cannot really make assumptions about how people will interact with an app. Everyone uses an app in different ways and people have different ways to achieve a goal. The key is to use feedback from the users and apply it to your app design.

Areas for Improvement

In terms of areas that I can improve, I think that I want to improve my UI skills. Although the usability study proved that the app had solid UX design, the app's look could have been better. Although visual design is not my speciality, I need to make my designs more aesthetically pleasing.

California Cafe App Case Study: List

Next Steps

Next Step #1

Conduct more research regarding the customization features. Try to find new features that would help enhance the customization options. Although we added the "Split my Meal in Half" feature, we should always be looking for ways to modernize the customization experience.

Next Step #2

Determine if any other aspects prevent users from ordering food in an efficient manner. We could conduct another usability study to see what other pain points come up for the users.

Next Step #3

Continue to research ways to improve the app’s accessibility accommodations. We should always be looking to make our designs more inclusive. Not only will this help users with accessibility needs, but it may also help everyone else.

California Cafe App Case Study: List

Get in Touch

Thank you so much for taking the time to review my work. I would love to hear your feedback. My email is linked below.

California Cafe App Case Study: Text
bottom of page