UI/UX Design
FISH BAR
ANN LI, PHOEBE SUI, KYLE RO
TIMELINE
2 MONTHS
FIGMA, AFTER EFFECTS, ILLUSTRATOR
TOOLS
TEAM
Flow based on research
©Designed by Ann Li
PROBLEM
People love cocktails, but not many know how to make.
In the new age with the rise of cafe culture, many people love to go out for drinks but not many people know how to make at home. Hosting parties rarely involves making your own drinks at home anymore.
solution
Welcome to our app!
Fish Bar has many new features such as guided learning, personalized flavor profiles, and mood-based recommendations. With its cute fish bartender mascot, interactive learning system, and easy sharing and saving features, Fish Bar makes cocktail-making mix well into your lifestyle.
After conducting user interviews and self studies…
THE PERSONA
LANDSCAPE
Analysis
Yes
Categories
Finished
What is Fish Bar?
after research…
Line height and paragraph spacing for body text is : 1.35 x font size
A
a
Body
19.6 px
22.4 px
25.2 px
28 px
Line Height
14 px
16 px
18 px
20 px
Font size
Small Text Bold
Small Text Regular
Normal Text Bold
Normal Text Regular
Medium Text Bold
Medium Text Regular
Large Text Bold
Large Text Regular
Name
Poppins
typography
system
Assets
COLOR
system
Accent
#FF9D68
Light Blue
#82B1FF
Off White
#F7F7F7
Black
#000000
Accent Colors
Primary
/
#1E3E73
Secondary
/
#BEE2FF
Brand Colors
Drink
Learn
Version1
Version2
Celebrate
Angry
Secondary Logo
Icons (WIP)
AI
AI
On Boarding
Lesson Complete
Welcome to fish bar
Full Deck
PROTOTYPE
VIDEO
90 SECONDS