Urbana Mobile App- UX Case Study

Mobile app design mockup showing a café menu interface with drink options like café latte, cappuccino, espresso, and food items like sandwiches.

Project Overview

Silhouette of a laptop and smartphone on purple background.
White star on purple circle background
Purple circle with a white clock icon, hands indicating two o'clock
Generic user profile icon in purple and white

The Product:

Urbana is an artisan coffee roaster with several locations in Ohio. Urbana is in need of a mobile app primarily to order ahead. Secondly to manage coffee bean subscriptions, and to promote events and services. 

Buisness Goals:

Create a mobile app that allows users to order coffe, subscriptions, and receive news and information from urbana.  

Make it easier for customers to order coffee, be consistent customers.

My Role:

Product Design: UX research, UX, UI Design

Abstract white scribble on purple background
White star in a purple circle on white background.

Project Duration:

Three weeks

Problem:

Urbana locations is losing customers in early morning due to long lines and limited services.  


Responsibilities:

User research, Creating Personas, Empathy Maps, User Journey Maps, User Flows, Wireframe, Hi Fidelity Design

  • User research

  • Personas

  • Problem statements

  • User journey maps

Understanding the User

User Research Summary

Number 2 in white on a purple circle background

Ordering

Users  know how they like their coffee and usually like it the same everyday. 


User Persona

User Journey

User Flow

Simple three-bar graph icon in purple circle
Purple circle with number 3

Group Orders

People often order coffee for their team, this is a tedious process when ordering in person and causes delays for everyone involved.

Purple circle with white number 4

Dietary Restrictions

People are specific about coffee orders, even without restrictions, with serious allergies ordering food people want to clarify on paper their allergy.

Number 5 on purple square background

Consistency

Users are impatient in the morning and expect things to take the same about of especially when they’re frequent customers.

Persona profile of Ryan, a 37-year-old Senior Account Executive from Cincinnati. He enjoys hot coffee and breakfast on his walk to work, mainly expressed goals and frustrations related to his morning routine. Desires efficient mornings, dislikes long lines and cold coffee. Portrait image of Ryan holding a phone and coffee cup.
Infographic showing Ryan's morning user journey comparing experiences with and without an ordering app. Includes wake-up time, workout, shower, coffee pickup, and arrival at work, highlighting differences in stress levels and efficiency.
Flowchart of a user journey for ordering coffee via a mobile app, showing steps from logging in, selecting menu items or subscriptions, customizing orders, and confirming payment.

  • I interviewed 4 people about their experiences going to coffee shops before work

  • I lead a focus group of 4 people who have experience using an order ahead app for coffee and 2 baristas

  • I observed individuals using an order ahead app and ordering coffee at Urbana

Customer Pain Points

Purple circle with number 1 inside

Time

Long lines waiting to order, timing order with arrival, traffic, store output.

Starting the Design

  • Paper wireframes

  • Digital wireframes

  • Low-fidelity prototype

  • Usability testing

Paper Wireframes

Hand-drawn app wireframes on paper illustrating a coffee ordering process, including menu options, order customization, and payment selection.

Key objectives


-Simplicity

-Minimum Features

-Customization



Low Fidelity Prototype

Mobile ordering app wireframes for iPhone 14 Pro Max featuring menu customization, drink selection, location choice, and order confirmation pages.

Main parts

Menu

Customization

Confirmation

Usability Study: Findings

I tested the low fidelity prototype with five users. After making changes from the first round of testing, I tested again with with three new users and the five from the first group. 


Round 1 findings

  1. Users wanted to see full images of items on menu

  2. Users wanted a clearer selection process for menu items

  3. Usurers wanted more customization options

Round 2 findings

  1. Users wanted to see the name of an item after selecting it.

  2. Users wanted milk type to be specified more clearly

  3. More options for customization

Refining the Design

  • Mockups

  • High-fidelity prototype

  • Accessibility

Mockups

Before Testing

Mobile app wireframe for ordering drinks and food, featuring categories for hot and cold drinks, and hot food items. Includes checkboxes, scroll bar, and buttons for navigation to Home, Order, and Subscription.

Before Testing

Mobile app interface for ordering drinks, showing options to select drink size and milk type, with buttons for customization, add to order, and navigation (Home, Order, Subscription).

Hi-Fidelity Prototype

Purple arrow pointing right on white background.
blue arrow pointing right on white background

After Testing

Mockup of a mobile ordering interface with categories for drinks and food, featuring sections for hot and cold drinks, and grid layout for items. Includes navigation buttons for Home, Order, and Subscription. "Add to order" button visible.

After Testing

Mobile app interface mockup for ordering drinks, showing options for selecting size, type of milk, and customizations, with an add to order button at the bottom.
Mobile app interface for coffee ordering from Urbana Cafe. Features include drink selection, size and milk options, customizations, and order confirmation. Pink gradient background with logo and navigation icons for home, order, and subscription.
Person holding smartphone displaying coffee and food order app interface.