THE PROBLEM

Cafe-goers are unsure if they have time to order and pick up their coffee before work or do not want to wait in line while they are seated at the cafe to order.

PERFORMING A COMPETITIVE ANALYSIS

To start, I analyzed our competitors

I chose 3 direct competitors and 1 indirect competitor to evaluate the strengths and weaknesses of their mobile app. This helped in providing key information of what I wanted to build off of and what I wanted to avoid when considering the design.

IDENTIFYING PAIN POINTS THROUGH USER INTERVIEWS

5 frequent cafe-goers were interviewed with the goal of understanding their needs, behaviors, and preferences.

A sample research question that guided our interviews was "Can you describe any challenges you've encountered when ordering at a cafe, either in-person or via mobile app?" We came up with 4 user pain points.

1. TIME CONSTRAINTS

Many cafe visitors often found themselves in situations where they didn't have enough time to wait in line and order. This issue was particularly prevelant among busy professionald and students on tight schedules.

2. COMPLEX CHECKOUT PROCESS

Users frequently expressed frustration with a convoluted checkout process. The challenge was mainly navigating through multiple steps to complete an order, leading to potential user drop-offs.

3. Menu confusion

Cafe-goers often encounter confusion regarding the menu and what each item entailed. This confusion extended to pricing, leaving users uncertain about what they were paying for.

4. Desire for customization

A significant portion of our users desired the ability to customize their orders to align with their specific preferences (usually not readily available).

PICTURING USER FRUSTRATIONS

Let's visualize a customer's experience

This map details the steps of Marcus, a working father of 2 children who would love to eat breakfast and spend time with his family every morning. In the end, it allowed me to visualize pain points and moments of frustration, guiding efforts to building the optimal cafe ordering experience.

ORDERING AHEAD FOR CONVENIENCE -
many of our users fell into one of two categories. They either found themselves deeply engaged in work or study at the cafe, reluctant to vacate their seats, or were in a hurry to get to work immediately after purchasing their coffee. For these users, the ability to order ahead provided not only convenience but also the freedom to focus or to keep up with their busy schedules.

BRAINSTORMING WIREFRAMES

Laying the groundwork

Paper wireframes were instrumental in shaping the app's design by helping me pinpoint essential features early on in the design process. 3 priority elements I identified are:

1. User greeting for a more personalized experience.

2. Visual menu presentation to aid quick understanding.

3. Estimated wait time display for convenience planning.

These initial sketches provided a clear design direction for the lo-fi wireframes and the start of creating a successful cafe app.

USABILITY TESTING

Two tests were conducted to gauge user experience and gather feedback

To evaluate the usability and functionality of the prototype, I crafted a series of task scenarios that mirrored real-world interactions users would have with the cafe ordering app. These tasks included actions such as: browsing the menu, placing an order, reviewing the order, and navigating account settings.

5 potential users participated in these usability tests. The first test was conducted with the lo-fi prototype, while the second was done after the hi-fi prototype was designed. For both, I observed how participants interacted with the app, noted any difficulties or confusion and recorded their overall impressions. These notes were organized into themes in an affinity diagram.

MAKING THE EXPERIENCE BETTER

Necessary changes based on user feedback

USABILITY TEST #1: Users thought the wait time feature was confusing. For instance, did the wait time mean that their order would be ready in 20 minutes or that the staff would start working on their drinks in 20 minutes? Furthermore, users thought it took too much time to find the item they wanted, especially if they had ordered before. Here are the changes I made.

USABILITY TEST #2: There were a few critiques for the "Order History" screen that was added. Many participants thought that the items listed were difficult to read when listed with commas. Furthermore, participants wanted to know if their orders were ready from the same screen. Below are the refinements that were made from these insights.

FINAL SOLUTION

The end result from constructive feedback

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

In the end, we stuck with our priority elements of providing a personalized experience, including visual representation, and displaying an estimated wait time in order to address the pain points identified from initial discovery. We also added features to support our priority elements in giving users a better user experience when ordering from the cafe.

This app focused on allowing cafe-goers to feel more comfortable before deciding if they want to order ahead of time.

to my first .

THE PROBLEM

✴︎ let's create something together ❋