Café Menu

A local, suburban coffee shop needs to create an app for ordering items for busy students and adults. I designed this app to learn Figma as my first project in the Google UX design certificate program.

Mar - Jun 2023

My Role

UX designer designing an app for a Café Menu through the design process.

Mockups for the Café Menu app

Goal

Design an app for a Café Menu that allows users to quickly and easily order food and drink from the coffee shop.

Audience

App targets ages 16 - 70 that enjoy drinking coffee at least once a week from a coffee shop.

Persona for the Café Menu app
User Journey map for the Café Menu app
Sketches for the Café Menu app

Challenges

A key challenge was making the menu easy and quick to order. Users need to see what they’re ordering and customize the options.

Research

I created a Persona and a User Journey map to understand tedious and confusing steps while ordering coffee in existing apps.

Ideas

I sketched a few ideas before selecting the layout to pick a design that shows recent orders and allows for filtering the menu from the home screen.

Affinity diagram for the Café Menu app
Home screen wireframe for the Café Menu app
Low-fidelity prototype for the Café Menu app

Wireframes

My first wireframes focused on making it easy re-order items. Users need to easily filter and view items as well with large images and shorter titles.

Mobile

Usability Studies

I conducted a moderated usability study of 5 friends and family to learn that the text was small and there was confusion about the images. I learned that users were confused when finding items and confirming they had selected the right item to order. I organized the feedback with an Affinity Diagram.

Prototypes

I took the feedback into my Figma mockups and prototypes by adding real examples of coffees to order and making the cart reflect the selections from the task. Having 3 items in the cart as an example after only selecting 1 made users feel like they had been deceived.

Mobile

High-fidelity prototype for the Café Menu app

Takeaways

Designing the Café Menu app gave me a hands-on experience to learn how to build wireframes and prototypes. Also, I learned how to create research questions and conduct a usability study. One key insight I’ll takeaway from this project is to consider ahead of time where users may have pain points while completing the usability task. Providing clear examples helped bring users up-to-speed with the task and compare it to familiar experiences with other apps.

Before and After for the Café Menu app

Next Steps

While I addressed some accessibility improvements with text, images, and reducing unnecessary screens, there is still much more to do to make this product accessible to those who are visually impaired. In the future, I’d like to conduct a usability study with a more diverse group of people to learn from them how to make it easier and quicker to use the app.