CocktailFinder
UI/UX Design · Web & Mobile · Interaction / IA
Project Overview
CocktailFinder is a web and mobile prototype that helps users discover cocktails and learn mixology with ease. The project focuses on simplifying the cocktail-making experience through structured information and engaging interactions.
Problem
Most tutorials are video-based, forcing users to pause and rewind. This creates frustration and slows down the cocktail-making experience.
Solution
CocktailFinder offers multiple ways to explore: filters and hover previews on web, visual search on mobile, and clear step-by-step recipe guides with text and looping video.
Target Audience
Amateur hosts, professional bartenders, and cocktail lovers who want an easier, more engaging way to explore cocktails.
Key Features
Smart Filtering
Multi-path exploration with filters for Base, Flavor, Strength, Occasion, and Fruit, plus a quick search bar. This helps users quickly narrow down recipes by ingredient, mood, or context instead of scrolling through endless lists.
Design motivation: Match different mental models (ingredient, mood, context) to reduce time-to-first-result.
Hovering Preview on Web
Hovering a cocktail name reveals its image and subtly tints the text, turning a plain list into a visual browse. Users preview before clicking, reducing page hops and keeping the scanning flow fast.
Design motivation: Encourage playful exploration while minimizing unnecessary navigation.
Step by Step Instruction
Recipes are broken into small, actionable steps with short copy and looping clips. Next/Back controls, a progress indicator, and timed cues let users move at their own pace—no pausing or rewinding long videos.
Design motivation: Remove the friction of video-only tutorials and lower cognitive load during making.
Camera Search on Mobile
A camera-first mode allows users to snap or upload a cocktail photo to identify it instantly.
Design motivation: Support in-bar, on-the-go discovery where users may not know the drink’s name.
Design Process
Research & Archetypes
To ground the design, I identified three core archetypes: the Amateur Mixologist, the Professional Bartender, and the Cocktail Lover.
These profiles highlight different motivations and needs, from step-by-step guidance at home to advanced recipe exploration in bars.
Information Architecture
The information architecture maps out four main user paths for CocktailFinder.
Users can discover cocktails through featured recommendations, exploration, targeted search with filters, or mobile visual search.
This structure ensures multiple entry points that support both casual browsing and goal-driven discovery.
Sketching
Early sketches explored different ways to present search, filters, and recipe steps. This stage allowed quick iteration before committing to higher fidelity.
Visual Language & Inspiration
The visual direction blends editorial sophistication with vibrant cocktail culture.
Typography & Layout: Inspired by magazine spreads, bold and elegant type enhances readability.
Texture: Neutral marble textures create a refined backdrop where cocktails remain the hero.
Imagery: Bright liquid splashes and drink photography capture energy and playfulness.
Contrast: Minimal backgrounds with pops of vivid color emphasize the drinks as the focal point.
Form: Usage of lighting effects to create depth.
SPACE: White space usage. Visual hierarchy created through spacing.
Lo-fi Variations
Early sketches explored different ways to present search, filters, and recipe steps. This stage allowed quick iteration before committing to higher fidelity.
Final Screens&Prototype
Early sketches explored different ways to present search, filters, and recipe steps. This stage allowed quick iteration before committing to higher fidelity.
Reflection
Through CocktailFinder, I learned the importance of balancing clarity and exploration. Breaking tutorials into step-by-step flows reduced user frustration compared to video-only instructions, while interactive filters and visual search created multiple entry points for different user mindsets. The project reinforced the value of designing for both casual and expert users by offering flexible paths toward the same goal.
Future Directions
To expand its value, CocktailFinder could integrate commerce features. For example, the cocktail detail page could link directly to a curated shopping list of spirits, mixers, and tools, allowing users to purchase ingredients seamlessly. This would bridge the gap between inspiration and action, turning discovery into a complete end-to-end experience.