Introduction
My Role
Sole UX Designer for California Café. Designed the app completely from beginning to end.
Project Duration
March 2021-May 2021
Responsibilities
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.
User Research : Pain Points
Time
Most customers have busy schedules and want to find a quick meal when they are out.
Customization
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”.
Coupons
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 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.
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.
Digital Wireframes
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.
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.
Usability Study: Parameters
Study Type
Moderated Usability Study
Location
Sacramento, CA
Participants
5 participants. Ages 20-70. 3 females and 2 males. Must order from food apps at least twice a month.
Length
15-20 minutes each.
Goal
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.
Design Iterations
Post Usability Study
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 #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.
Mockups
Accessibility Considerations
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.
Takeaways
Impact
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.
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.