discover cocktail recipes


Beber encourages both novices and connoisseurs to discover new cocktail recipes and flavors.



Independent Project

Project Timeline

1.5 weeks

My Role

UI/UX Design
Interaction Design
Visual Design
Interactive Prototype
Usability Testing




1. recipe discovery lacks intuitive categorisation

Imagine you're at a bar and you're asking for a drink recommendation. You're not sure exactly what you're looking for and are open to try something new. You may say something like "I like something sweeter and not bitter. Maybe something with gin." 

Current online and printed resources, however, often categorise recipes by liquor (ie: gin, whisky...) rather than how the cocktail tastes like. This makes discovery both difficult and unapproachable for especially novice drinkers. 


2. presenting only 1 recipe option is a missed opportunity

Current cocktail recipe apps tend to only present 1 recipe option to the user. Although this ensures a quick experience for the user, it's a missed opportunity to aid in user discovery. 





Easily discover recipes through categories and recipe cards



Find your recipe matches based on your preferences 

Show Filter

adjust filter

Change your mind and discover new flavours


dual recipes

Discover multiple ways of making the same recipe


Choose how you want to categporise your saved recipes



I interviewed a total of 7 people in order to understand the habits, desires, and needs of potential users. Identifying the commonalities and differences between the them, I discovered that there are generally 2 types of users:

Casual Drinker

CASUAL but curious DRINKER

- Would like to explore more but do not know where and how to start

- A familiar point of reference to be motivated to seek out new recipes

- "There are so many [drinks-related things] out there I don't know about, but it's too embarrassing to ask the bartender or your friend."

Advanced Drinker

frequent explorers

- Want to dive deeper into the nuances between liquor types and drinks

- A platform that acknowledges different ways of making a similar recipe

- "I want to know how to make my drink better. What can I do to make it better? What else should I buy?"


In addition, only the "Frequent Explorers" talked about having the courage to ask the bartenders for recommendations or clarify what's in a drink, while the "Casual But Curious Drinker" usually sticks to what they or their friends have gotten before. 


competitive analysis

Although there are many cocktail-related applications on the market, they offer poor navigation, poor categorisation that limit exploration, and often had a party-related theme.  Below are 3 of Apple App Store's most popular applications.

Market Analysis 1


1. Highlights flavours


1. Unhelpful categories
2. Catered to people who already know what they want



1. Card format makes it feel like a "collectable"


1. Limited information and directions
2. No structure on how to filter or explore recipes

Market Analysis 3


1. Can search by ingredient and top rated


1. Lack of a grid makes it hard to follow information
2. Illustrations only showcase glass type and not what the cocktail looks like


Each of these mobile applications do not adequately address our two user groups' needs in having a familiar point of reference to discover new recipes or decipher between a "basic" recipe from a "master" level.


user flow

Combining what I have learned through my users and the competitive analysis, I drew out the user journey with this current application. Because "Casual But Curious Drinker's" has cited their lack of courage and motivation to try new things at bars, I decided to focus on their private experience at home or prepping for the friend's party as the leverage point. Although the two groups' habits, mental models, and behaviours diverge depending which user group they are in, they talked about a very similar process. 



wireframes version 1


*Note: Wireframes are cropped to phone screen size in the above image for quick glancing here. This is not the entire flow.


user test #1



1. Verify proof-of-concept

2. Verify user journey


I conducted a simple clickthrough user test through Principle with 4 users with the above wireframes. Below are my 2 major findings, paired with the original wireframe with the iterated version .



1. SEARCH BAR placement confused users on information hierarchy

I originally placed the search bar on top of the home page to have a clear call-to-action and separated it from the Filter button on the bottom to not confuse their functionality. However, users were confused about the relationship between search, filter, and why they were seeing the cards that they are.

/ Solution

  • Place search and filter close to one another but separate it from the rest of the content
  • Label the logic behind why the cards are shown as such
  • Additional feature: Encourage browsing by creating quick access to recipe categories



wireframe v1
(prior to usability test)

Home Wireframe 2

wireframe v2
(after usability test)


2. users were unclear what the un-clicked and clicked states meant

Although the preference selection interaction was clear, they were unsure what an "un-clicked" state meant. I also observed awkwardness when users had to scroll through the entire list before reaching the "Apply" button.

/ Solution

  • A much simpler selection list focusing on flavour profiles
  • Added accordion drop-downs to signify to the user that they do not have to select every category
  • Pushing the "Apply" button to be consistently at the bottom for clear action

wireframe v1
(prior to usability test)

Filter 2

wireframe v2
(after usability test)


user test #2



1. Validate Information Hierarchy
2. Uncover how motion can relate pieces of information


With iterated wireframes, I conducted 3 longer usability tests (1 "Frequent Explorers" and 2 "Casual but Curious Drinkers"). Motion was also added to hint at the user how information is related. Below are 3 key moments I tested on the iPhone through Principle: 



1. home / recipes

  • 3/3 users found the ability to browse through categories of recipes useful
  • 2/3 had difficulty understanding the relationship between search, filter, and the categories


  • 3/3 users found filtering through recipes by flavour profile helpful
  • 3/3 found the two preferences to be sufficient
Show filtered list


  • 3/3 enjoyed the flexibility of cancelling filters
  • 2/3 questioned whether the search bar means searching within the list or the overall library


high-fi mockups



the experience 


home: casual discovery

The home page highlights curated categories for users who may just want to explore without any specific ingredient in mind.


filter: user-driven discovery

The filter option allows users to filter through flavour profile - for those who has minimal knowledge of liquor - and specific ingredients - ie: what they may have at home.

Show Filter

show + edit filter: easy changes

The user can quickly adjust their filter list if they change their mind.


recipes: basic vs. expert

To support both of our user groups' desire to learn and discovery new ways of making the same cocktail.

Saving a Recipe


Helping users find their recipes faster with user-labeled lists.

My bar

my bar: personal collection

Quick access to the user's recipes in the sub-navigation for returning users.



  • Visual hierarchy is key when Search, Filter, and Browse are all available options: Without a strong visual hierarchy, users can get confused at how discovery options relate to one another (if at all).
  • Use motion to signify relationships and clusters: It was much easier for the users to understand how filtering recipes worked with motion to signify how they were clustered previously.
  • Do one thing really well and ideate around that offering: During early stages of ideation, I designed additional features like bar recommendations based on the user's location. However, as I continued to hone in my specific value proposition in helping users discover cocktails in an intuitive way, I realised that the additional feature did not match the intent of the app.