beber

discover cocktail recipes

 
DrinksApp_Hero_edited.jpg
 
 

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

 
 
 

Team

Independent Project

Project Timeline

1.5 weeks

My Role

UI/UX Design
Interaction Design
Interactive Prototype
Usability Testing

 
 
 

opportunity

 

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. 

 

solution

Home

discover

Easily discover recipes through categories and recipe cards

Filter

filter

Find your recipe matches based on your preferences 

Show Filter

adjust filter

Change your mind and discover new flavours

Recipe

dual recipes

Discover multiple ways of making the same recipe

MY BAR

Choose how you want to categporise your saved recipes

 

users

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

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

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

Quote
- "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

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

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

Quote
- "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

pros

1. Highlights flavours

cons

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

 
02.jpg

pros

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

cons

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

 
Market Analysis 3

pros 

1. Can search by ingredient and top rated

cons

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

wireframes_v1

*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

 

goals

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

 

Recipes/Home

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
Filter

wireframe v1
(prior to usability test)

Filter 2

wireframe v2
(after usability test)

 

user test #2

 

goals

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: 

 

 
categories.gif

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
 
Filter

2. FILTER THROUGH INGREDIENTS

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

3. 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

home: casual discovery

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

 
Filter

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.gif

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

SAVE: USER-DRIVEN lists

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.

 
 
 

takeaways

  • 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.