Dragon Tea Cafe

The Product

Dragon Tea Café is a small business café located in the Washington DC area. The app aims to diversify customers by offering more choices than just coffee and hopes to draw customers in by offering loyalty points as well as easy ordering.

Duration

June - October 2022

Project Overview

The Problem

‍Busy workers and commuters lack the time to line up and wait for the drink to be prepared.

The Goal

Design an app for Dragon Tea that allows users to easily schedule orders ahead of time and to keep track of their loyalty points.

My Role

UX designer designing an app for Dragon Tea from conception to delivery.

My Responsibilities

Brainstorming, paper and digital wireframing, low and high-fidelity prototyping, conducting interviews and usability studies, accounting for accessibility, and iterating on designs.

Understanding the User

Summary

I conducted interviews and created empathy maps to understand the users I’m designing for. The target group were café-goers of all ages and backgrounds. Research has confirmed that many users do not have time, especially in the morning, to wait in line for more than 10 minutes for a drink before rushing off for work or other obligations. Many users also like the fact that they are able to keep track of their points and manage payment info on the app.

Pain Points

Time

People don’t have time or patience to wait in line

Schedule Ahead

Allows for people to plan their day and schedule their drinks at a specific time of the day

Pictures

While ordering in-store does not provide pictures, the menu online does

Loyalty Points

People want to keep track of their loyalty points

Starting the Design

Paper Wireframes

Coming up with five drafts, I took the elements I liked from each draft and made the final product that prioritized a simple and straightforward navigation as a home page.

Digital Wireframes

I made sure to follow the basic wireframe while adjusting to digital proportions.

Easy button to go to menu to place orders

Quick look at profile info

Allows users to go back and edit their orders

Easy to read receipt on orders placed

Giving users a quick and easy home page as well as an overall summary of their order before being placed were two major factors of the app

Low-Fidelity Prototypes

Using a completed set of digital wireframes, I created a low-fidelity prototype that will be used in usability studies. I completed the set with profile settings, favorites, loyalty page, menu bar, about us, contact us, and schedule ahead page.

View Dragon Tea’s low-fidelity prototype

Usability Studies: Findings

I conducted two rounds of usability studies, consisting of five people each. Findings from the first study helped find flaws in the lo-fi wireframes and strengthened the mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

Users wanted a way to delete items from the cart
Users want more icon/language options
Users want to be able to schedule ahead

Round 2 Findings

Users think it would be good if items can actually switch in and out of shopping cart/favorites like a fully-functioning app
Users would like to see the actual items page now that it is a functioning prototype

Refining the Design

Mockups

Following usability study’s insights, I decided to add a way to delete orders from cart as well as a way to schedule orders ahead of time.

Following the usability study’s insights, I decided to add icons to the menu as well as a saved payment page so that users can see all of their payments in one location.

High-Fidelity Prototypes

The final hi-fi prototype showed a cleaner user flow for placing orders. I also made edits in order for people to order more than one drink at a time, as well as adding a scrolling time picker for scheduling ahead and changing the loyalty points status to a bar instead of a circle due to the easier glanceability.

View Dragon Tea’s high-fidelity prototype

Going Forward

Accessibility Considerations

1

Additional icons to help make navigation easier

2

Plans to implement night mode and large text mode

The Impact

This app enables users to order Dragon Tea on the go more efficiently and keep track of their payments better.

One quote from my peer feedback:

“The app is easy to use and navigate.”

What I Learned

I learned that as you go, there will always be new ideas that pop up but you have to pick and choose which ones make it into the final design and which do not.

In addition, as this is my first project, I learned the entire process of how to use Figma, conduct usability studies, create wireframes, mockups, and prototypes.