top of page

Iced Out

Your all-in-one cocktail app
Designing for responsible cocktail lovers

Duration

3.5 weeks

Role

UX Designer & Team Lead

Tools

Figma, Figjam, Miro, Github, Visual Studio Code

The Story

In a world where costs are on the rise and home gatherings are increasingly popular, the desire to be an exceptional host and create lasting memories for guests is strong. However, the overwhelming abundance of online cocktail recipes often leaves hosts uncertain about what to serve. That's where Iced Out, our user-friendly app, comes in, guiding hosts to discover unique and impressive cocktails tailored to their preferences and guests' desires, ensuring an unforgettable and enjoyable event.

The Task

To create a cocktail app that helps users in choosing what cocktail to make for their next event. We started with extensive user research to discover the pain points of users’ when making cocktails and finding recipes. 

The Problem 

Kevin, a customer success manager, is hosting a small dinner party (3-4 friends) and is in search for recipes that his guests and himself will enjoy. Despite visiting numerous websites and social media platforms, he is overwhelmed by the sheer number of recipes available and desires a more streamlined approach. Kevin wishes to find recipes that are personalized and tailored to his and his guests preferences and occasion. Additionally, he values the visual aspect of recipes, as well as user reviews to gain insights into how real people have enjoyed these cocktails.

How might we assist Kevin in efficiently discovering recipes that will satisfy him and his guests?

The Solution 

To develop a cocktail making app to help adults who like to drink cocktails and host small get-togethers solve the issue of finding the perfect drink no matter the occasion. Whether it be for relaxing after a long day after work with a friend or hosting a small get-together, cocktail enjoyers can discover and make their new favourite recipes.


Through our preference-based personal suggestions, user reviews, and refined search filters we will enable cocktail drinkers to make informed decisions about new cocktail recipes to enjoy and prepare for their guests.

My Design Process

Research Goals

  • Understand users’ background and past experiences with cocktail apps and finding recipes 

  • Learn users’ motivations, behaviours, and attitudes on making cocktails and finding recipes

  • Identify users’ pain points when making cocktails at home and finding recipes 

  • Discover what target audience would desire in a cocktail app

Research

The foundation of successful research begins by formulating well-crafted, open-ended questions that enable us to gain a deep understanding of our users' pain points.

Key Research Questions 

  • Walk me through the process of the last time you looked up a cocktail recipe

  • What motivates you to look up recipes? 

  • What factors influence your choice when selecting a cocktail recipe platform?

  • What would you want in a platform for discovering new cocktails recipes?

  • What are some of your pain points with platforms that you have used when searching for recipes?

Affinity Map

To organize all of the research information (gathered from the user interviews) an affinity map was made to sort the data and start identifying patterns. 

Pain Points

Search Experience

Features

Key Points: Affinity Map

  • Filters would be helpful when searching- event type, spirit type, flavour profile etc

  • Lack of customization is an issue

  • Overwhelmed too many recipes don’t know what to choose

  • Pictures and reviews are important (visual factor)

  • Bookmark feature would be useful

User Quote

“Having the ability to filter recipes based on the type of event I'm hosting would be incredibly helpful, as it would allow me to choose the perfect cocktails that align with the specific occasion.”

-Dominic R-

Competitor Analysis 

A SWOT (strengths, weaknesses, opportunities and threats) analysis was conducted on our main competitor, Mixel. The analysis was completed to enhance our design by identifying and leveraging our competitors' strengths, weaknesses, identify opportunities for improvement, and evaluate potential threats.

User Persona

Upon completion of our research, a user persona was crafted to provide us with a comprehensive understanding of the needs, motivations, and goals of our users.

I Like, I Wish, What If

To stimulate our creative process, we opted for an I Like, I Wish, and What If chart as a means to generate a plethora of ideas. While certain ideas may be unfeasible, it serves as an effective method to explore ideas and potential features that can help users.

I Like

I Wish

What If?

Frame 1831.png

Feature Prioritization Matrix

In order to establish priority for the ideas, we categorize them based on their impact and complexity. Ideas that demonstrate high impact in addressing the problem while requiring the least complexity in terms of feasibility and technology are selected for further testing and implementation.

Storyboard 

To visually illustrate our user's journey within our app, we developed a storyboard. This powerful tool assists in visualizing the user's experience and identifying any areas of dissatisfaction or frustration.

1_page-0001.jpg
Step 1:

Kevin is having friends over on the weekend for a small dinner party. He is standing in front of his home bar, feeling frustrated and unsure about which cocktail to make.

4_page-0001.jpg
Step 4:

He suddenly remembers a colleague at work mentioning a cool cocktail app that gives customizable recipes that fit any occasion. Kevin quickly downloads it from the app store and opens it.

2_page-0001.jpg
Step 2:

Kevin opens a tab on Google, hoping to find cocktail recipes. He enters "cocktail recipes" in the search bar, but is overwhelmed by the sheer number of results.

5_page-0001.jpg
Step 5:

Kevin explores the app's features and discovers a search filter for occasion type, spirit type, and flavour profiles. He selects "gin," "fruity," and "dinner party drinks" as his preferences.

3_page-0001.jpg
Step 3:

Kevin tries to narrow down the search results by typing "gin cocktails" but ends up with a long list of recipes that don't align with his taste preferences and the occasion.

7_page-0001.jpg
Step 6:

The app instantly provides Kevin with a curated list of recipes that match his preferences. Kevin reads the reviews and picks one that he thinks his friends will like and that goes with the theme of his dinner party. He is excited to make this recipe and wants to impress his friends. He looks at the ingredients needed and notes them down so he can buy them tomorrow!

User flow: Find a Recipe

Untitled design (1).png

Paper Wireframes

Before starting the design phase on Figma, we began by sketching initial ideas to conceptualize the app's appearance. Paper wireframes were used as a quick and low-fidelity method to explore design solutions and communicate ideas efficiently.

Splash Page

Sign Up Page

image 17.png

Home Page

IMG_4379.png

Onboarding Questionnaire

IMG_2204 1.png

Search Page

Frame 1845.png

Filters Pop Up

image 11.png

Cocktail Page

image 20.png

Profile Page

image 12.png

Low/ Medium Fidelity Wireframes

Splash Page
Splash.png
Sign Up Page
Sign in 1.png
Onboarding Questionnaire
Filter.png
Home Page
Homepage.png
Search Page
Search.png
Cocktail Page
Recipe Card.png

Key User Feedback

Splash Page
Onboarding Questionare 
Have skip option for questionnaire.png
Homepage fb (1).png
Don’t have events in opening questionnaire as events change frequently. Have event filter
Home Page
Trending tab too light can’t see.png
Include short description of cocktails flavour profile instead of what tools need.png
Cocktail Page
Homepage fb (2).png

Home Page Iterations Based on User Feedback

Homepage (2).png
Homepage (3).png

Style Guide

Screen Shot 2023-06-27 at 9.27 1.png

High Fidelity Wireframes (after feedback)

Splash Page
Rectangle.png
Sign Up Page
Rectangle (1).png
My Preferences Questionnaire
Rectangle (2).png
Home Page
Rectangle (3).png
Search Page
Rectangle (4).png
My Favourites Page
Rectangle (5).png
Cocktail Recipe Page
Rectangle (6).png

Conclusion

Key Takeaways
  • Refining and revisiting the problem statement regularly is important in order to ensure solving the right problem

  • To genuinely understand user needs and address them effectively, it is crucial to invest significant time in the research phase

  • Iterating is essential, while effectively managing timeline expectations is equally significant

Next Steps....
  • Online community forums

  • Ingredients filter for ingredients already have

  • Ingredient substitute feature

bottom of page