Project Preview
Leopold's Café app is the ideal solution for coffee lovers in Madison,
Wisconsin. You can easily order your favorite coffee during the day
and reserve a table at the café, which transforms into a lively bar at
night. Whether you prefer to pick up your order or have it delivered,
the app makes it simple and convenient. Enjoy unique coffee brews or
cocktails without leaving your home or office with the Leopold's Café
app.
Project Duration
September 2023 - December 2023 (15 weeks)
Tools Used
Figma, Adobe Illustrator
My Role
I took charge of the entire app design process for a User Experience
Design course I took at UW-Madison, starting with conducting research
and competitive analysis to understand the landscape. I then led user
interviews to gather insights, which helped me prioritize goals and
shape the direction of the project. From brainstorming ideas to
designing and testing, I created informed designs, including
wireframes and both low and high-fidelity prototypes, continuously
iterating and refining based on feedback throughout the process.
Problem Statement
At Leopold's, a local café that transforms into a bar in the evening,
customers often face the frustration of waiting in line, especially
when they’re in a rush or trying to reserve a table for a special
occasion. This issue impacts both the daytime coffee crowd and the
evening bar-goers, making the experience less seamless for everyone
involved.
Solution
The Leopold's app is designed to solve these issues by allowing
customers to pre-order their coffee or food, choose between pickup or
delivery, and reserve a table in advance. With this app, we aim to
create a seamless, stress-free experience for both daytime coffee
lovers and evening bar-goers, making every visit to Leopold's more
convenient and enjoyable.
Goal
Our goal with the Leopold's app is to ensure your café experience is
as smooth and convenient as possible. You’ll be able to pre-order your
favorite coffee or food, choose between pickup or delivery, and
reserve a table at the café, all without the hassle of waiting in
line. Providing a stress-free and efficient solution for our busy
customers is our top priority.
Design Process
User Research
The goal was to understand user needs, pain points, and frustrations
when ordering from Leopold's. I conducted interviews with six
participants, revealing issues like unclear menus, delivery delays,
and limited customization.
I also conducted a competitive
analysis by gathering and auditing screenshots from top competitors,
focusing on design, navigation, and mobile experience. This helped
identify best practices and allowed me to design a solution that
improves Leopold's ordering experience, streamlines navigation, and
enhances both café and bar functionalities.
Insights from
this research shaped a user-friendly journey, addressing key
challenges and improving customization, menu clarity, and table
booking.
Interview Questions
-
Do you currently use an app to order coffee or drinks? If so, which
one?
-
What features do you like most about the coffee or food ordering
apps you use?
- How often do you visit Leopold’s for coffee or drinks?
-
Do you prefer enjoying coffee at the café or ordering for
pickup/delivery?
-
What is the first thing that stands out to you when entering
Leopold’s?
-
What type of coffee or drink do you usually order from Leopold’s?
-
How has your experience been using other coffee/drink ordering apps?
-
How many times a week do you typically order from Leopold’s or visit
the café?
-
What payment methods do you find most convenient when ordering
drinks?
-
What challenges or frustrations do you encounter when ordering
coffee/drinks online?
-
What improvements or features would you like to see in a coffee shop
ordering app for Leopold’s?
Research Insights
-
Customers dislike long wait times and prefer ordering ahead to avoid
standing in line.
-
Mobile ordering on the go is a top preference, especially for
customers with busy schedules.
-
Users value multiple payment options, including digital wallets like
Apple Pay and Google Pay.
-
Evening customers appreciate the café-bar transition, but want an
easy way to order both coffee and drinks.
-
Simplicity in app navigation is crucial; users want a streamlined
experience to place orders quickly.
-
Pre-booking a table for meetings or group events is a feature highly
desired by regular customers.
User Pain Points
-
Uncertainty about seating: Customers worry if they'll find a table
or if Leopold's will be too busy.
-
Long wait after pre-ordering: Even with pre-orders, customers face
delays in receiving their drinks.
-
App navigation issues: Some users struggle to customize orders and
navigate the app smoothly.
Personas
I created four user personas based on Leopold's target audience and
the insights gathered from the research. These personas represent key
user groups, helping to tailor the app design and experience to meet
their specific needs and preferences.
User Journey Map
I created 4 user journey map’s based on each persona to visualize
how each persona interacts with Leopold’s. This helped identify pain
points and opportunities for improvement. A key feature that emerged
was the "seat saver," which addressed a common need across all four
personas, enhancing their experience at Leopold’s.
Competitor Analysis
I analyzed seven top competitors, auditing their app screens and
features to identify strengths, gaps, and opportunities for
improvement.
Paper Wireframes
Taking the time to draft iteration of each screen of the app on the
paper ensured that the elements that made it to digital wireframes
would be well-suited to address user pain points.
Digital Wireframes
This is the first wireframe that demonstrates the design thinking
aligned with user research.
Usability Testing
Usability testing involved two rounds of research, leading to key layout changes that simplified navigation and improved the overall user experience. The hamburger menu was removed in favor of a search bar and a streamlined top section for quick access to important pages, while the bottom navigation bar was refined to better reflect users’ needs. This iterative process ensured that ordering, reserving, and exploring menu items felt smoother and more intuitive.
Refining the Design
The initial design lacked a clear order-tracking path, so I removed the hamburger menu and introduced a search bar, adding a top header with text buttons for “Menu,” “Previous,” and “Favorite” to improve navigation and visibility of key features.
Before Usability
After Usability
The usability study revealed frustration with the complex 9x9 grid
menu layout and impractical navigation options. To streamline the
user experience, I revised the design by simplifying each menu
section into a single row that horizontally scrolls, removed the
hamburger menu in favor of a search feature, and updated the bottom
navigation bar to include more practical options like Home, Order,
Cart, and Reserve.
Before Usability
After Usability
Usability testing revealed gaps in the reservation system, including
no options for time, date, or party size selection and a preference
for table reservations over bar seating. We redesigned the process
into two screens—one for time, date, and party size, and limited
reservations to tables, leaving bar seating first-come,
first-served.
Hi-Fidelity Prototype
The final high-fidelity prototype for the Leopold’s app showcased
improved user flows for browsing and making reservations, offering
a smoother and more intuitive booking experience overall.
Hi-Fi Designs
Getting Started
Leopold’s app offers a seamless login or sign-up process, with a
guest mode that lets users explore products without needing to
register.
Home and Account Pages
The Leopold’s app home page offers access to your account, past
orders, rewards, and points, with options to pay in-store, order
ahead, and a featured coffee card with an "Order Now" button.
Order Page
The Order page features a search bar, menu, previous orders, and
favorites, with items organized into sections like Coffee,
Espresso, and Tea, all horizontally scrollable for easy browsing.
Order Customization Page
The customization page allows users to select size, choose milk,
syrups, and sweeteners, and finalize their preferences with an
"Add to Order" button.
Cart and Checkout Pages
The Cart page allows pickup or delivery selection, item editing,
deletion, or favoriting, displays the total, and links to a
Checkout page with multiple payment options for a seamless
experience.
Order Completion and Tracker Pages
The Order Completion page lets you track your order, reserve a
seat, or return home. The Tracker page shows your order status,
pickup location, and home address on a map, with call and message
options.
Table Reservation Pages
The first page lets users select the number of people, date, and
time, while the second page allows them to view available and
reserved tables and choose their preferred table.
Style Guide
This style guide showcases the typography, color palette, buttons, and icons used throughout the design.