Skip links

Coffee House

Date

2022

Client

Portfolio Project

Category

Mobile App

Smartphone displaying coffee app menu with roasted beans and liquid splashing on black

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.

Roasted coffee beans scattered across a white background in three clusters.

Design Process

Empathy2-03

EMPATHIZE

- User Research
- User Interviews

Define-02

     DEFINE     

- User Persona
- Empathy maps
- User Journey

Top-down view of a grey mug featuring lightbulb puzzle pieces.

     IDEATE     

- User Flow
- Sketches

prototype-02

PROTOTYPE

- Wireframe
- Mockups

test-03

     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.

latte mug
croi

User Flow

Black background with white flowchart diagram showing app user navigation paths.
Roasted coffee beans scattered across a white background in three clusters.

Paper Wireframe

Roasted coffee beans scattered across a white background in three clusters.
CoffeeHouse Sketches3
Chocolate chips cookies

Digital Wireframe

Gray UI showcase displaying mobile app pages for searching locations and browsing food

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.

Mobile app interface showing coffee and sandwich menu categories.
Four grayscale mockups of food delivery app screen with menu categories
Monochrome mobile app UI showing a dark menu screen with pastry and pie options and
coffee House high-fi product screen.
Black and white photo of roasted coffee beans falling against a dark background.
latte mug
Danish

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?

CoffeeHouse form

    Share on