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.
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
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.
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.
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.
|
|
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."
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
|
Owners' Needs
|
User Persona
User Flow
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.
|
|
Lo-fi wireframe (sketch)
Wireframe
Wireframe Revision
Key Features
Dashboard
Load money
Choose preference
Order in app
Revision
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.