Helen Wang
  • Design
  • About
  • Resume
Picture

Afternoon Tea

UI/UX Project

About

​Afternoon Tea project is inspired by Starbuck Redesign.
​Afternoon Tea is a local bubble tea store dedicated for young adults and teenagers who like drinking bubble teas. The naming idea comes from that the bubble tea store often opens on 11 am and most people grab a bubble tea in the afternoon.  Afternoon Tea tends to make every sip special and tends to create unforgettable memory for the customers.
As a big fan of bubble tea, I tend to improve drink ordering experience through this app and explore a unique solution to approach.

Time frame: September - October 2021
Tools: Figma, Adobe Illustrator
Skills: UI/UX Design, Branding
Category: UI/UX Design

Goal

The imaginative product' goals are to provide bubble tea ordering experience and to set up bubble tea rewarding program.

Constraints/Challenge

1. The app needs to look professional that can reasonably work in real life.
2. The users cannot zoom in, zoom out, or spin the screens.

Questions to ask myself

  • Do I need to reference a lot from Starbuck Redesign?
  • Can I reference local bubble tea app and study their styles?
  • How to make this project looks special?
  • Do I need to show every screens?

Branding Idea

Logo Idea:
The bottle represents bubble tea bottle, the sprout represents the store using eco-friendly straws and packing supplies, the sun represents the tittle Afternoon Tea.

​Color Idea:
​Purple means mystery. The idea of choosing purple comes from that bubble tea lovers find tasty drinks from seasonal mysterious drinks. Additionally, purple also encourage people to explore mysterious drinks.
Cyan, yellow, coral, and purple are cosmic colors that represent rewarding system. Cosmic colors are galaxy colors, so connecting the store's rewarding system to galaxy makes the reward challenge and meaningful.
Picture
Picture

User Research

Most buyers are bubble tea lovers who are 15 year-old to 35 year-old.
​
Pain points
😫"I want to order drinks ahead so I can get my drink when I just arrive there"
🧐 "As a ESL student, I cannot speak English fluently. It's super awkward when I face the kiosk. It would be great to order with phone app."
😅"As a bubble tea lover, I don't want to miss any seasonal drinks."

Users' Needs

  • Easy and secured way to pay via credit card
  • Easy to find their favourite drinks​
  • Easy to customize their toppings and preference​
  • Order and pay ahead so they can skip the waiting time
  • ​View reward progress
  • ​Chat with Barista if any changes made

Owners' Needs

  • Receive users' orders ahead
  • The menu clearly displays the products​
  • Easy to receive money
  • Easy to communicate with clients​​

User Persona

Picture

User Flow

Picture

Competitor Analysis

Chatime, Starbuck, Presotea

Marketing Website

The purpose of the website is to help the users to find the store from Google search. It gives the users a simple and easy to understand way to find menu, reward, news, gift card information in few seconds.
Picture
Picture

Lo-fi wireframe (sketch)

Picture

Wireframe

Picture

Wireframe Revision

Picture

Key Features

Dashboard

Picture

Load money

Picture

Choose preference

Picture

Order in app

Picture

Revision

Picture
Picture

Design System


Lesson I learned

  • I learn the font system for a UI/UX web or app design. (Large title for head banner: 55pt - 65pt/ Sub-title font-size: 35 - 45pt/ Paragraph: 12 - 18pt/ Navigation(Menu): 14 - 18pt)
  • Figma Mirror helps me to design accurate fonts and image sizes for app.
  • I improve my user interface design knowledge and skills a lot from last year.
  • Adding illustrations can make user interface design looks even more attractive.

Reflections

I use my favourite cosmic color palette for this project in order to approach a unique solution. By the end, I approach a illustrative style to complete the project. In the future, I wish I can continue to work and evolve this illustrative style.

Thank you for reading ❤️

Powered by Create your own unique website with customizable templates.
  • Design
  • About
  • Resume