SPIRITED
An online cocktail/mocktail recipe platform with AI and interactive social features, offering users a one-of-a-kind collaborative way to search, collect, create, and share recipes.
[My Role]
Solo Project
[Platforms]
IOS, Web
[Areas]
Responsive Design, UI, Branding, Research, AI
-
Increasing effectiveness of cocktail recipe searching/sharing + alcohol content awareness and calculation.
I was praised by reviewers for my effective storytelling and inclusion of AI.
-
Design attractive and effective visual components from scratch and improve UI & responsive design skills.
-
End-to-end product design including responsive design - from UX research to final UI prototype + video. This was a solo project with a total of 80 screens completed on Figma.
-
3 month project
PROJECT OVERVIEW
Why cocktail recipes?
Cocktails (and mocktails) are on the rise as the younger generations look to fun and convenient drinks that appeal to their tastes. The personal expression, variety of options, and customization of these drinks give them a culture that separates them from the more traditional alcoholic drinks. BUT…
1] Recipe pages are inconvenient and full of unnecessary information.
2] Recipe apps are missing essential social and interactive features.
3] Recipes are static - changing proportions and ingredients is difficult.
4] AI can aid in the creation of new flavor combinations.
[01] research
What’s wrong with apps?
[Competitive Analysis]
When researching the market I found that none of the existing most popular recipe apps offered the social and creative features I was looking for that play a large part in the appeal of cocktail culture.
What are the missing social features?
Public User Profiles
Ability to comment/like on recipes
Rating other’s recipes
Ability to follow other users
Share polls/ideas with other users publically
These apps were primarily used as a database of existing recipes for users to cycle through on their own, therefore users don’t interact with each other and many don’t let users post their own recipes.
[Insight]
Inexperienced mixologists would benefit from visual cues. Drinks are typically easy to make unlike cooking food, therefore, the focus should be on enhancing the user’s ability to decipher flavors and proportions properly especially when trying to make their own recipes.
-> Design dynamic UI elements/buttons to show ingredient proportions and help users create their own combos.
[Insight]
New recipes are often created by altering elements of existing recipes - recipes online are static and unable to be edited by users.
-> Design a process of recipe alteration that’s innovative/easy.
[Insight]
Google SEO algorithms have led blog recipe websites to include paragraphs of keywords in order to appear higher up on Google’s search pages - creating an extremely inconvenient experience for readers for something as simple as a cocktail recipe.
-> Design so that ALL information is visible within seconds
I knew I could create a more -CONVENIENT & interactive- digital experience that engages cocktail lovers with each other and -The art of mixology.
What did I learn from Interviewees?
[Other survey questions + results]
Conducting a user survey led me to find the recipe/browsing features most valued by users - the image on the right represents the percentage of respondents wanting the features listed. Some of these features are provided by existing apps, many are not.
The most desired feature - accessible drink flavor profiles - was not a feature I found on any other apps.
[User survey - 42 respondents]
[02] deFINE
WHO ARE THE “cocktail lovers”?
[User personas ]
I accumulated all user research into three personas to represent the key users. Then I broke it down into a chart of the primary goals/needs so I could make sure to hit all the most important issues for all three categories of users.
[Connoisseurs]
People who like to craft drinks at home
Primary User Goals/Needs
[Novices]
People who like to drink but don’t know much about alcohol
[Bar Staff]
Cocktail bars and the staff that make new cocktail recipes
HOW WILL USERS INTERACT WITH THE APP?
mapping it out
[Information Architecture & User Flows]
For this platform, I wanted the ux/ui to be as minimalist as possible, since making drinks is typically easy and fast, so should it be to browse, engage with other users, and use the platform’s features. Therefore I limited features to just what users wanted most, and mapped it out in the most intuitive way- leading to the creation of 4 main navigation pages.
[Wireframes]
In the initial wireframes, the four main navigation pages were explored, allowing a general layout for the main features of the app. The base layout stayed the same for the final prototype, but small changes were made to create a consistent visual feel across the platform.
[03] tEST & REFINE
Testing goals:
Test the flow of pages - ensure easy navigation and confirm that users can find all main features.
Identify hang-ups in UI - find where users get stuck or where users wrongly click when trying to complete a task.
Test the effectiveness of the visual identity of the app.
Gather feedback for missing features, information, or visual elements.
[Insight]
-> The recipe card background color should correlate with the base spirit used to create the drink.
[Insight]
-> The recipe alteration feature should be accessible from the front page of the recipe card.
[Insight]
-> Allow users to change recipes to be stronger or weaker based on preference and automatically display the new alcohol %.
UPON refinement users expressed that the flow was -seamless- and that the social features were an -intuitive- addition.
What did I learn from tESTERS?
What CHANGED?
[Refinements Summary]
Corrected the flow of pages to make navigation easier.
Altered drink icons to display more flavor information and look better.
Saturated the color palette and removed distracting border lines.
Created a key for matching the recipe card background color with the type of alcohol used in the recipe.
Made recipe information more detailed on the profile page.
Added the social features to the bottom of the recipe cards for easier access.
Made the search filters and polling pages more efficient - less clicks/pages.
[04] ui & branding
[05] Final pROTOTYPE
What makes spirited unique?
[Remember this list?]
1] Recipe pages are inconvenient and full of unnecessary information
2] Recipe apps are missing essential social and interactive features
3] Recipes are static - changing proportions and ingredients is difficult
4] AI can aid in the creation of new flavor combinations
here’s how I -solved- it.
[01] simplicity
[Recipe Cards]
All information is visible at a glance.
Background color correlates with the base spirit.
Icons indicate the flavor profile of drinks.
Graphics help users visualize ingredient proportions.
[Front]
[Tapping Flips Card]
[02] Community INPUT
[Social Features]
Each recipe card includes the ability to like, comment, and share images, adding to the community and personal aspects of the platform.
[Public/Private Polling]
One of the most unique features of Spirited is the ability to create polls that can be shared privately or publicly with friends, customers of your bar, or other users of the app. This feature brings exciting opportunities for businesses to test out new ideas, for casual users to plan better gatherings, and more.
[03] smart CALCULATION
[Proportion Calculation Tools]
Most recipes are static and the proportions of ingredients, units, or serving size cannot be changed. This has on many occasions been an inconvenience for myself and for many of the users I interviewed.
Spirited directly and easily allows users to alter these aspects of the recipe straight from the recipe card. Spirited also lets users turn any cocktail into a mocktail by turning the strength to “none” as mocktails are becoming increasingly popular in recent years. No more trying to calculate how to turn ounces into tablespoons or guessing how much alcohol content is in each drink.
[04] AI Inspiration
[Flavor Generator]
Use AI to explore personalized flavor combinations which can be added to a “flavor card” to be saved for later use. These flavor combos can be directly added into recipes or polls and can be a useful tool for bars/mixologists to create new cocktails easily.
SPIRITED CHECKS ALL THE BOXES.
[06] reflection
What i learned
Having seen the abundance of recipe apps available, I pushed myself to learn about the allure of cocktail culture and how to create a digital experience that aligns with and expands on that artistry. I felt like I had to walk the line between what would be purely aesthetic versus effective since I had not done such a graphic-heavy project. I believe I accomplished this by recognizing that -cocktails are an avenue of personal expression- and purely aesthetic choices are still very important to the appeal and effectiveness of such a platform. Also pushing myself to research into new features (polling, recipe alternates, dynamic calculation features, & AI) rather than just redesigning existing products led to Spirited to bring multiple innovative aspects that advance the users experience more than other platforms. Spirited engages users to -push their own creativity- and -express themselves to others- in a way no other cocktail recipe apps have before.
What i would do different
Since this was an end-to-end project I had to spread my time between full product construction and also high-quality UI, and at the end, I felt I missed out on opportunities with high-fidelity UI features such as animations, more responsive design elements, and logo design. I would also want to test the high-fidelity prototype further with users, and engage more with cocktail bars and their mixologists to expand on how their needs could further be met through this platform. I can see how I focused more on the casual at-home user than business-oriented users and how there could be much more to be explored in that particular area. Spirited is not meant to be a marketing platform for bars/businesses, however, it is meant to be a tool, and bars and their bartenders could have more ways to benefit from Spirited than what I provided.