cocktail recipes and learning prototype
A cocktail mobile app designed for both novices and connoisseurs to learn and experiment with liquor and recipes.
*For the sake of experimentation and learning, I used Death & Co.'s recipe book as the anchor for my project. Not only are they one of the best bars in the world, but their book beautifully blends their deep intention in making cocktails with helpful lessons from liquor to bar tools.
research + competitive analysis
Before diving into design, I looked at potential design conventions in both food recipes and drinks mobile apps. Below are some of my findings:
- Names: For food recipes, users can easily make an informed guess when choosing to view a recipe or not.
Insight: This makes full-screen scrolling possible.
- Categorisation: Many current drinks apps have a simplified and/or party-themed categorisation system.
Hypothesis: This could potentially alienate users who are more serious in making cocktails / mixology.
- Flavour profile is more important than what bottle of liquor to buy. Abstracting from the prior 2 insights, I realised that for drinks recipes, it is more important to show what the flavours are over what type of liquor or even which bottle to buy.
I went through many iterations on the UI in order to create a look & feel that is confident and sophisticated while showcasing enough information for a user to navigate through a stream of recipes.
Death&Co. had a detailed 24-level categorisation that differentiated, for example, "Gin Shaken" from "Gin Stirred".
With the hypothesis that many novices would not care of the difference, I narrowed the 24-levels to 13 for the app. This information architecture was later confirmed to be positive during usability testing.
wireframes sample - recipes page
*For the sake of space, I will only show wireframes for the recipes home screen.
In order to design a flow that encourages user exploration, I ideated a variety of versions for the recipes screen which seems to be the biggest pain point while I was doing research with other apps.
I decided to move forward with Design #4 for having clear sub-categorisation with the top horizontal-scrolling sub nav that makes labelling each recipe simpler and easier for the user to flip through. I wanted to strike a balance for users to understand enough about a recipe category while being able to explore freely.
In order to suit the needs of novice and expert users, the user flow is divided into 3 parts.
- Recipes Home: Placed as the home screen, the user can explore different recipes by either choosing to customize his/her drink or to choose from one of the single liquor categories.
- My Bar: To suit scenarios where the user may want to remember a recipe or is at a party and wanted to share it with a friend, he or she can quickly view their saved recipes and liquor list.
- Learning: The learning section is currently divided into 3 parts - liquor, modifiers, and bar tools - and allows users to learn about each on the fly.
1. recipes home
Added "Customize your drink" to encourage users to discover new and/or tailored recipes.
2. FIRST RECIPES GLANCE
Showcases the cocktail's flavour profile before viewing the entire recipe.
3. recipe card
Easy-to-flip card format.
4. customize your drink ui
Liquor and Flavor choices.
5. my bar
Saved recipes and personal liquor list.
Ability to learn about the history and make of a variety of liquor, modifiers, bar tools etc.
I'm working on putting the revised prototype into a consumable format for the web, be ready soon! :)