UX/UI
Super Drink Interface
UX/UI and brand concept for a superhero-inspired digital cocktail machine built to simplify a multi-step ordering experience.
Role: UX/UI (Team of 2)
Platform: Digital machine interface
Duration: 8 weeks
Overview
This project centers on a superhero-inspired interface for a digital cocktail machine. Based on user research, I created a precise flow that supports two paths: pre-made cocktails and a build-your-own experience, with a focus on clarity, fast decision-making, and smooth guidance throughout. I also used AI tools to create custom ingredient illustrations and designed a Visual Build Preview that lets users see the drink come together while tracking sweetness, sourness, and alcohol levels in real time.
Overview
This project centers on a superhero-inspired interface for a digital cocktail machine. Based on user research, I created a precise flow that supports two paths: pre-made cocktails and a build-your-own experience, with a focus on clarity, fast decision-making, and smooth guidance throughout. I also used AI tools to create custom ingredient illustrations and designed a Visual Build Preview that lets users see the drink come together while tracking sweetness, sourness, and alcohol levels in real time.
Overview
This project centers on a superhero-inspired interface for a digital cocktail machine. Based on user research, I created a precise flow that supports two paths: pre-made cocktails and a build-your-own experience, with a focus on clarity, fast decision-making, and smooth guidance throughout. I also used AI tools to create custom ingredient illustrations and designed a Visual Build Preview that lets users see the drink come together while tracking sweetness, sourness, and alcohol levels in real time.
UX/UI
Super Drink Interface
End-to-end UX/UI and brand concept for a superhero-inspired digital cocktail machine built to simplify a multi-step ordering experience.
Role: UX/UI (Team of 2)
Platform: Digital machine interface
Duration: 8 weeks
UX/UI
Super Drink Interface
End-to-end UX/UI and brand concept for a superhero-inspired digital cocktail machine built to simplify a multi-step ordering experience.
Role: UX/UI (Team of 2)
Platform: Digital machine interface
Duration: 8 weeks
Research Snapshot
Research Snapshot
I combined competitor analysis with hands-on testing of real ordering machines to identify what works well, what feels intuitive, and what breaks the flow then used those findings to shape the customization journey and information hierarchy.
I combined competitor analysis with hands-on testing of real ordering machines to identify what works well, what feels intuitive, and what breaks the flow then used those findings to shape the customization journey and information hierarchy.
Cocktail-Building Model
I analyzed cocktail components and organized them into ingredient groups and a selection order, forming the framework for a guided customization flow.
alcohol
liqueur
juice
spices
fruits
accessories
ice
vegetables
dried fruits
Gummies
Cocktail-Building Model
I analyzed cocktail components and organized them into ingredient groups and a selection order, forming the framework for a guided customization flow.
alcohol
liqueur
juice
spices
fruits
accessories
ice
vegetables
dried fruits
Gummies
alcohol
liqueur
juice
spices
accessories
ice
vegetables
dried fruits
Gummies
fruits
Research Snapshot
I combined competitor analysis with hands-on testing of real ordering machines to identify what works well, what feels intuitive, and what breaks the flow—then used those findings to shape the customization journey and information hierarchy.
I analyzed cocktail components and organized them into ingredient groups and a selection order, forming the framework for a guided customization flow.
Cocktail-Building Model
Key Insights
Insights from research that directly shaped the design direction:
Dual-Path Entry
Built two clear flows for ready-made cocktails and custom drink creation.
Live Feedback
Keep selections and total cost visible as users customize, with real-time updates.
Step Guidance
Use a progress indicator to keep users oriented and moving through the flow.
Clear Review
Show a single, scanable summary (ml, ingredients, add-ons, total) before payment.
Key Insights
Insights from research that directly shaped the design direction:
Dual-Path Entry
Built two clear flows for ready-made cocktails and custom drink creation.
Live Feedback
Keep selections and total cost visible as users customize, with real-time updates.
Step Guidance
Use a progress indicator to keep users oriented and moving through the flow clearly.
Clear Review
Show a single, scanable summary (ml, ingredients, add-ons, total) before payment.
Key Insights
Insights from research that directly shaped the design direction:
Dual-Path Entry
Built two clear flows for ready-made cocktails and custom drink creation.
Live Feedback
Keep selections and total cost visible as users customize, with real-time updates.
Step Guidance
Use a progress indicator to keep users oriented and moving through the flow.
Clear Review
Show a single, scanable summary (ml, ingredients, add-ons, total) before payment.
User Scenario & Flow
A guided customization flow from ingredient and portion (ml) selection to cart, payment, and confirmation.
User Scenario & Flow
A guided customization flow from ingredient and portion (ml) selection to cart, payment, and confirmation.
UI Style Guide
UI Style Guide
Style Guide
Logo Design
Logo Design
Aligned with the superhero-inspired identity, the cup-as-hero logo creates a dynamic, playful feel. Bold red, bright yellow, and vivid blue reinforce a vibrant comic-book vibe that’s memorable and energetic.
Aligned with the superhero-inspired identity, the cup-as-hero logo creates a dynamic, playful feel. Bold red, bright yellow, and vivid blue reinforce a vibrant comic-book vibe that’s memorable and energetic.
Typography
Typography
Aa
Aa
Aa
Rubik
Rubik
Heading 1
Heading 1
Heading 1
Rubik Medium | 35PX
Rubik Medium | 35PX
Rubik Medium | 35PX
Heading 2
Heading 2
Heading 2
Rubik Medium 25 PX
Rubik Medium 25 PX
Rubik Medium 25 PX
buttons
buttons
Rubik Bold | 20 PX
Rubik Bold | 20 PX
Body 1
Body 1
Rubik regular | 18 PX
Rubik regular | 18 PX
Icons
Icons
Color scheme palette
Color scheme palette
The color palette was designed to reflect the superhero concept through a bold yet cohesive visual language. Red is used to highlight key CTA buttons, while the supporting hues create a playful, dynamic feel inspired by comic-book aesthetics.
The color palette was designed to reflect the superhero concept through a bold yet cohesive visual language. Red is used to highlight key CTA buttons, while the supporting hues create a playful, dynamic feel inspired by comic-book aesthetics.
F2E121
F2E121
09415F
09415F
BF0513
BF0513
EBC623
EBC623
FFFBC9
FFFBC9
D6F7FF
D6F7FF
Visual Build Preview
A step-by-step illustration that updates the drink preview as ingredients and portions are selected.
Visual Build Preview
A step-by-step illustration that updates the drink preview as ingredients and portions are selected.
Ingredient Illustrations
Ingredient Illustrations
