discover cocktail recipes
Beber encourages both novices and connoisseurs to discover new cocktail recipes and flavors.
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
Change your mind and discover new flavours
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 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."
- 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.
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.
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
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.
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.
- 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
(prior to usability test)
(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.
- 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
(prior to usability test)
(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
2. FILTER THROUGH INGREDIENTS
- 3/3 users found filtering through recipes by flavour profile helpful
- 3/3 found the two preferences to be sufficient
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
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 + 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.
SAVE: USER-DRIVEN lists
Helping users find their recipes faster with user-labeled lists.
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.