Cover Image

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

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

  1. Do you currently use an app to order coffee or drinks? If so, which one?
  2. What features do you like most about the coffee or food ordering apps you use?
  3. How often do you visit Leopold’s for coffee or drinks?
  4. Do you prefer enjoying coffee at the café or ordering for pickup/delivery?
  5. What is the first thing that stands out to you when entering Leopold’s?
  6. What type of coffee or drink do you usually order from Leopold’s?
  7. How has your experience been using other coffee/drink ordering apps?
  8. How many times a week do you typically order from Leopold’s or visit the café?
  9. What payment methods do you find most convenient when ordering drinks?
  10. What challenges or frustrations do you encounter when ordering coffee/drinks online?
  11. What improvements or features would you like to see in a coffee shop ordering app for Leopold’s?

Research Insights

  1. Customers dislike long wait times and prefer ordering ahead to avoid standing in line.
  2. Mobile ordering on the go is a top preference, especially for customers with busy schedules.
  3. Users value multiple payment options, including digital wallets like Apple Pay and Google Pay.
  4. Evening customers appreciate the café-bar transition, but want an easy way to order both coffee and drinks.
  5. Simplicity in app navigation is crucial; users want a streamlined experience to place orders quickly.
  6. Pre-booking a table for meetings or group events is a feature highly desired by regular customers.

User Pain Points

  1. Uncertainty about seating: Customers worry if they'll find a table or if Leopold's will be too busy.
  2. Long wait after pre-ordering: Even with pre-orders, customers face delays in receiving their drinks.
  3. 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 Personas
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.
User Journey Map
Competitor Analysis
I analyzed seven top competitors, auditing their app screens and features to identify strengths, gaps, and opportunities for improvement.
Competitor Analysis
User Flow and Information Architecture
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.
Paper Wireframes
Digital Wireframes
This is the first wireframe that demonstrates the design thinking aligned with user research.
Digital Wireframes
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
Before and 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
Final Before and 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-Fidelity Prototype
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.
Getting Started
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 Page
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.
Order Customization Page
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.
Cart and Checkout Pages
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.
Order Completion and Tracker Pages
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.
Table Reservation Pages
Style Guide
This style guide showcases the typography, color palette, buttons, and icons used throughout the design.
Style Guide
Cover Image