Discover Craft Cocktail Recipes

Project: Angel’s Share

Role: Product Designer - UX, UI, Research, Testing

Problem

People are craving the experience of going to their favorite bar and having a craft cocktail; unable to fulfill this desire, they are turning to their home bars and making themselves drinks! Angel’s Share was born out of the need to discover high quality cocktail recipes, like you might drink at an upscale bar, with the ingredients you have already.

Our Goal: Help users discover craft cocktail recipes

The App

Angel’s Share is an app to help people find and explore craft cocktail recipes. A user can select the ingredients they want to use and Angel’s Share will create a list of recipes using those ingredients.

 
Quiz Demo.gif
 
 
 

Drink Finder

Find the perfect drink using the ingredients you already have.

 
 
Teach cropped.gif
 
 
 

Original drink recipes

Quality recipes from world-class bartenders. Just follow our step-by-step instructions and if there’s something you don’t know, we’ll teach you.

 
 
 
 
 

Drink Customization

Express your creativity by making your drinks personal.

 

Process

Understanding through Empathy

Empathy Drawing.png

Although I had a basic understanding of the problem, there was still so much I didn’t know or understand. To gain clarity, I started my research by interviewing people who make a cocktail at least once a week as I felt that was a good place to start defining my target audience. Guiding me during the interviews, were my research objectives, which I wrote to focus on uncovering the habits and patterns of my interviewees.

  • Learn where a people usually go to find new recipes.

  • Learn how they search and what terms they use when looking for recipes.

  • Understand why they would choose a particular recipe to make.


Finding the Needs

Creative and tasty outlet: People love making new cocktails, its a fun activity and they get to taste the results! Participants noted that as they continued to make drinks they started searching for more complex recipes, they wanted to replicate the experience of an upscale bar at home.

Unable to find quality recipes: The most common way people find new recipes is through a search engine like Google. Top results are usually food blogs that post similar and basic recipes; participants mentioned they want more creative recipes and from trusted sources.

Use the ingredients that are around: Participants often had an idea of ingredients they want to use, whether that be unique spirits or seasonal fruits, but don’t know how to put them together into a drink. To search for a new recipe most started by Googling “Cocktails with ‘insert ingredient here’ ”.


Design by Iteration

With my insights in hand I started translating them into a design solution that would:

  1. Provide users a tool to find new recipes with the ingredients they have.

  2. Display recipes in an intuitive way.

  3. Enable users to express themselves through customization.

Knowing that users almost always search for recipes by their ingredients, I decided the main flow of the app would be an interactive quiz that asks what ingredients a user has or wants to use and then generates a list of recipes, using those ingredients, created by actual bartenders.

My process was not as simple as creating a set of wireframes and never touching them again. I designed multiple versions of several solutions before landing on designs that felt right.

Frame 10.png
Frame 11.png
I knew I needed some way for users to input their own ingredients into the quiz. My initial idea was a static tile on each page.

I knew I needed some way for users to input their own ingredients into the quiz. My initial idea was a static tile on each page.

I later realized this function would be an integral, so I increased its visual hierarchy by enlarging the tile and placing it higher.

I later realized this function would be an integral, so I increased its visual hierarchy by enlarging the tile and placing it higher.

As I refined the designs, I changed it to look and function like a search field. This makes it more recognizable to users who are already familiar with similar flows.

As I refined the designs, I changed it to look and function like a search field. This makes it more recognizable to users who are already familiar with similar flows.

 
Whatever it is, the way you tell your story online can make all the difference.
Wireframe Drink Screen Customize (2).png
Drink Screen Custommize Hifi.png

Defining the Visual Identity

There were two distinct directions I thought to take the visual identity of the project, but I couldn’t decide which to use. To choose a direction, I needed to envision what each could look like, so I created a mock-up of the recipe page using each visual style.

Frame 12 (2).png

Thinking back to my research and user goals helped me ultimately decide that the dark design would evoke the feeling of quality cocktails from an upscale bar better than the light design.

Testing and Results

After the initial wireframes and visual identity were defined, I refined my designs and created a prototype in Figma. Using the prototype I conducted moderated usability testing with 5 participants who make at least one drink a week. I tested the drink quiz flow, the drink customization process, and the general search usability.

Positive Feedback

Intuitive recipe screen: Participants loved the layout of the recipe screen. They felt it was easy to understand what ingredients they needed and the steps required to make a drink.

Customization: This was a nice surprise for participants, they often find drinks too strong or sweet and want to be able to make changes to suit their tastes.

Areas of Opportunity

Unclear gesture controls: The prototype I tested with use gesture controls with the intention of letting a user quickly swipe through the quiz screens. During testing, almost every participant paused not knowing how to advance the quiz process. They anticipated what the output would be, but didn’t know how to advance the screens, most inadvertently navigated away abandoning their quiz inputs.

The Fix - bringing buttons back: In the next iteration, I removed the gesture controls and added in buttons and labels. Now users will know exactly what step they are in the process and how to move forward.

Reflection

Designing Angel’s Share was a good reminder that its ok to pause and be thoughtful or create multiple versions of something when trying to build the best product. For example, I found defining the list of product features particularly challenging. My initial app idea was around bottle management, but after a quick search on the app store I realized that space was a crowded market filled with apps that didn’t actually solve the pain points I uncovered. To move forward, I gathered my interview notes and did a quick brainstorming session and the drink finder came out of this process. When I tested the prototype I was ecstatic that everyone loved the idea, less so that navigation wasn’t 100% clear, but I was able to improve that and a retest showed users had no more problems.

Overall the sentiment for Angel’s Share is best summed up by my friend Chris, a bartender of 7 years, “I wish this existed, I would use this everyday.”