Three Tree Point Cafe
menu & ordering app
Three Tree Point Cafe is a fictional local cafe in the suburbs of Seattle known for its fresh bread and pastries, as well as a variety of coffee and healthy lunch options.
The business targets customers who are short on time and are looking for healthy, locally made options.
Project duration: August 2021 - January 2022
Project Overview
The Problem:
Busy people need to be able to order food quickly and easily, with access to healthy and kid-friendly options.
My Role:
UX designer designing an app for Three Tree Point Cafe from conception to delivery.
The Solution:
Design an app for Three Tree Point Cafe that allows users to easily order drinks and fresh, healthy food for delivery or pickup.
My Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research
For my user research, I conducted 12 interviews. I chose participants with a variety of ages, gender identities, occupations, and lifestyles.
My goal was to identify the frustrations that people experience during the process of ordering from a restaurant. I wanted to identify the features that people are most interested in when it comes to ordering from restaurants, and to identify the information that users want to see when viewing an in-app menu.
Before doing my research, I assumed that users would care about customer reviews within the app, but only a few participants mentioned it as something that they would appreciate.
I found that the vast majority of my participants wanted to see a photo and a description for each menu item.
Pain Points
1. Order Status
Participants reported their frustration when using apps that either do not have in-app order tracking, or do not have accurate order statuses.
In my designs, I will be sure to include a way for users to track order status so that the food is always as fresh as possible.
2. Customization
Participants who have dietary restrictions or simply do not like certain ingredients need to be able to customize their order. My participants said that even when they can customize their order by swapping certain ingredients, they worry it will be ignored.
In my designs, I will give the user confirmation of their customization request.
3. Lack of Photos or Description
Participants said that when there are no photos or descriptions to accompany the menu items, they have to look up what the dish is — especially when ordering from a restaurant where the food names are in a different language.
To ensure the user understands what each menu item is and what the ingredients are, I will be sure to include a photo and description for everything.
User Persona: Jessica Nguyen
Problem statement: Jessica Nguyen is a busy working mother who needs to order healthy dinners for herself and her family because she needs time to work instead of cook during the evenings.
User Persona: Jacob Hermann
Problem statement: Jacob Hermann is a hardworking software engineer who needs to review nutritional information before ordering because he has dietary restrictions.
User Journey Maps
Paper Wireframes
I first drafted each screen on paper to lay the foundation for my digital wireframes, and to ensure that I was addressing user pain points.
I used stars to mark the elements that I wanted to include in the digital version.
Digital Wireframes
As I moved from paper to digital wireframes, I designed each screen with my user research findings in mind.
One key user pain point was that ordering apps tend to give inaccurate pickup or delivery time estimates. I designed this order confirmation and tracking page with that in mind.
Low Fidelity Prototype
With this prototype, you can go through the user flow of browsing the menu, selecting menu items and adding them to the order, checking out, and finally tracking the order.
-
Usability Studies: Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
-
Round 1 Findings
-Users want to order and reorder quickly.
-Users want to be able to fully customize their orders.
-Users want to be able to choose between pickup and delivery.
-
Round 2 Findings
-Users found the reordering process confusing. They want confirmation of what menu items they’re reordering.
Mockups
The first usability study revealed that the app was missing the options for order delivery and pickup. Now, users will choose between delivery and pickup before proceeding to Payment.
The second usability study revealed that users needed more specific confirmation when re-ordering from their Recent Orders, so I now show the date, the items included in the order, and the quantity of each item on the ‘added to cart’ page.
Key Mockups
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for selecting menu items and checking out. It also met user needs for a pickup or delivery option.
Accessibility Considerations
Used detailed imagery for menu items to help all users better understand the menu.
Used icons to help make navigation easier.
Takeaways
Impact: The app makes users feel like Three Tree Point Cafe really cares about the customer and the experience that they have while browsing the menu and ordering.
What I learned: While designing the Three Tree Point Cafe’s app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs, and the mockups will look very different from the initial wireframes.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Thank you for your time reviewing my work on Three Tree Point Cafe’s app!
If you’d like to see more or get in touch, my contact information is provided below.
Email: vlmastrosimone@gmail.com