☕️

Case Study: Café App

<

Case Study #1

Café Order App

UX CASE STUDY
Designed on Figma
Displayed with code

Design Process

User Research

Persona

User Journey

Goal: An easy to use app for coffee lovers

Competitive Audit Report

Goal: Compare the user experience of each competitor's iPhone app

Competitors
Below I will represent every characteristic of a competitor with a different “color”.
“Starbucks”
“Food Panda”
“Cama Café”
“Knock Knock”
“Dodo Café” (Our Company)
General information
Competitor type
Indirect
Indirect
Direct
Direct
Location
Worldwide
Taiwan
Taiwan
Taipei City
Taipei and Taichung
Business size
Big
Big
Medium
Small
Small
Target audience
Tourists
Millennials
Workers
Office Workers
Locals and Workers
Price
💸💸💸
💸💸
💸
💸💸
💸💸
Product offering
more than 20 types of coffee
All kind of foods and drinks
10+ types of coffee, hand selected coffee
Few variety of coffes
25 types of coffee
Unique value proposition
Some unique flavours of coffee and drinks
Wide variety to choose
Cheap and good coffee
Cheap and good coffee
Large variety of coffees from hundreds of local coffee shops
First Impressions
Desktop Website Experience
Outstanding
- Low resolution in the UI icons
+ Clear Branding
Outstanding
+ Fun and easy to use
+ Engaging animations
+ Have the same color scheme throughout the interface
Good
+ Easy to navigate and find information
- Missing some functions
Okay
- Missing some functions
Good
+ Visually appealing
- Feels dense and overwhelming in places
Mobile Website Experience
Outstanding
+ Fully responsive
+ intuitive layout
+ Menu is easy to read
Outstanding
+ Fully responsive
+ Engaging animations (same as desktop)
+ App can be downloaded to collect points
NOt good
+ Key information is present
- Not fully responsive
Okay
- There are only ads in the home page
- Menu is hard to find
Good
+ Fully responsive
- Interaction was not as smooth on mobile
App Interaction
Features
Okay
+ "Create account" feature
- Users have to download PDF of menu to open it
Outstanding
+ "Create account" feature
+ "Trending" menu
+ Online ordering feature with pickup/delivery options
Needs work
+ Store locator feature
- Checkout process requires user to input payment info twice
Okay
+ app features a discount
Good
+ Online ordering feature with pickup/delivery options
+ Users have to download PDF of menu to open it
+ "Create account" feature
Accessibility
Okay
= App only available in English and Chinese
- Menu is included as an image and is hard to read
Okay
= App only available in English and Chinese
+ Menu isn't included as an image and is easy to read
Not Good
- Website available in Chinese
- Menu isn't compatible with screen reader technologies
Not Good
- only Chinese
- Some images of menu items aren't clear and legible
Good
+ App available in four languages
+ Images of menu items are clear and legible
- Menu isn't compatible with screen reader technologies
User Flow
Okay
+ Easy to find the menu
- Needed to search to find hours
- Home page is too busy
Okay
+ Fun to use
- Difficult to find key info (menu, location, hours) due to animation load time
Outstanding
+ Easy to find key info (menu, location, hours)
+ Info is kept up to date (e.g., holiday opening)
Okay
+ Easy to navigate, four taps
- Difficult to find the complete menu
Good
+ Easy to find key info (menu, location, hours)
- No clear hierarchy, difficult to scan quickly
Navigation
Okay
+ easy to navigate
Outstanding
+ Easy and fun way to navigate
Outstanding
+ Very easy to navigate
+ Familiar way to navigate (e.g., swipe)
Okay
- Somewhat difficult to navigate
- Some elements seem clickable but are not
Outstanding
+ Easy to navigate
+ Clear indication of clickable elements
App visual design
Brand identity
Outstanding
+ There is a brand identity at all
+ Clear color scheme and art direction
Outstanding
+ Strong brand identity, including colors, font, style, motion, imagery, and photography
Okay
+ Clear color scheme and art direction
- Tabs font are photos instead of fonts
Good
+ Strong brand identity, including colors, font, style, motion, imagery, and photography
Good
+ Clear color scheme, font, and art direction
- Inconsistent use of imagery and photography
App Content
Tone
Friendly and indirect
Friendly and indirect
Friendly and direct
Serious and direct
Serious and direct
Friendly in some places
Descriptiveness
Outstanding
+ There is a brand identity at all
+ Clear color scheme and art direction
Good
+ Short and to the point
+ Easy to follow
Outstanding
+ Short and to the point
Outstanding
+ Short
+ Short and to the point
Outstanding
+ All key info is present

Sketches

UX DESIGN STORY BOARDS

Big Picture

Close Up