Skip links

Coffee House

Date

2022

Client

Portfolio Project

Category

Mobile App

CoffeeHouse first1

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.

beans

Design Process

Empathy2-03

EMPATHIZE

- User Research
- User Interviews

Define-02

     DEFINE     

- User Persona
- Empathy maps
- User Journey

ideate-03

     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

User flow
beans

Paper Wireframe

beans
CoffeeHouse Sketches3
Chocolate chips cookies

Digital Wireframe

compare1

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.

categories mobile1
categories
categories mobile2
coffee House high-fi product screen.
page4
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

    🍪   We use cookies for the best web experience. Read our cookie policy."
    Zahra Ali
    Home
    Account
    Cart
    Search
    Drag