Coffee House
Date
2022
Client
Portfolio Project
Category
Mobile App

Project Overview
9
Weeks
30+
Screens
15
Interviwed
We’re Designing a Coffee House app to engage and retain customers in our online system. Recognizing the success of competitors’ dedicated mobile apps for ordering, we aim to create a competitive product to boost sales and enhance customer satisfaction.
01 Problem
Customers face difficulties ordering in-store at Coffee House; a new app aims to address these issues, enhancing customer experience and business efficiency.
02 Approach
Conduct user research to identify in-store ordering pain points. Design a user-friendly app to streamline the process, fostering convenience and satisfaction.
03 Solution
Introduce the Coffee House app, providing a seamless in-store ordering experience, increasing customer satisfaction, and boosting overall business efficiency.

Design Process

EMPATHIZE
- User Research
- User Interviews

DEFINE
- User Persona
- Empathy maps
- User Journey

IDEATE
- User Flow
- Sketches

PROTOTYPE
- Wireframe
- Mockups

TEST
- Usability test
Research & Interviews
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. Two primary user groups identified through research:
Workers
Busy workers who needs to skip lines and place group orders in an orgenised way and to pickup or for delivery.
Students
Students who needs their food to be delivered because they don’t have vehicles or doesn't want waste their study hours.


User Flow


Paper Wireframe



Digital Wireframe






Mockups
Early designs allowed for some customization, but after the usability studies, with using actual components I was able to use space properly.
I added additional options to facilitate browsing through different products and deals.
Adding the notification option will allow the user to track existing orders.
I choose more attractive design for the bottom tab bar.















Accessibility
considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier and help people with dyslexia figure out the content.
Used detailed imagery for food and toppings to help all users better understand the designs.
Ready to talk about your project?

Share on










