MIXAR
Overview
An augmented reality tool which enables you to explore cocktail recipes and make drinks easily at home
Role
Product Designer
Developer
Timeframe
8 Weeks
Project Type
Individual & Academic
Tools
Unity | ARKit
Sketch
Principle | Framer
Illustrator
Design Process
Key Feature
Browsing
Check out your personalized drink and explore the fantastic cocktail world with the elegant interface
Filter
Descriptive filters for cocktail lovers to easily find their drink and check out the recipe
Augmented Reality
The Augmented Reality feature shows the levels of each ingredient in an intuitive way and allows users to mix drinks without professional measuring cups
The Problem
I got inspired by my friend sharing her failure experience trying to mix drinks at home. Due to lack of professional tools and bartending knowledge, she ended up with unsatisfying drinks. Therefore, I started to think how I can build something to make it easier to mix drinks at home.
Research and Insights
User Interview
I conducted five user interviews with a variety of interviewees including professional bartender to people who have zero knowledge about drink mixing. They provide me a lot of qualitative feedback such as their alternative ways when there is no measuring cup. The interview helps me to understand user behavior better and helps me to make design decisions later.
Renee, 24
Cocktail lover
Till, 25
Cocktail lover
Tarun, 27
Home bartender
Chris, 24
Home bartender
Nelson, 32
Bartender
User Persona
Based on the user research, I found cocktail lovers who have little or no bartending experience are the group that faced with most difficulty when it comes to mixing drinks at home. Therefore, I selected this group as the target user and created the user persona by synthesizing their goals, frustrations, and needs.
Comparative Analysis
I researched the different cocktail recipe apps and drink mixing tools and analyzed what we can learn and improve from each.
Yummy App
I really like the on boarding process of Yummy. It is very helpful to include allergy, diet, and things user doesn't like. For example, I don't like any cocktail that has mint inside.
Lush Cocktails App
Lush Cocktails shows the levels of each ingredient, however, seeing an illustration doesn't help drink mixing much because users still need to guess the levels on their glasses.
Another feature that we can learn from Lush Cocktails is, you can search based on what you have, and get to know what you can make with them.
Bartending Glass Set
I also found this bartending glass set including four glasses. Each glass stands for a cocktail base, and on each side it shows a recipe with that base, marking the levels of each ingredient. This is very straightforward to show users how much should each ingredient be. However, it is limited because it only provides 16 recipes with the four base.
Smart Drink Scale
The smart drink scale can connect to your phone with bluetooth. Then users search recipe on their phones, and just pour each ingredient until hearing a 'ding' sound. When overpour, the scale recalculates to ensure its proportions and taste. Then users add ice and shake. The product is not very popular because it's pretty expensive for beginners or amateurs.
Ideation
First I brainstormed with possible ways to make drink mixing easier for amateurs.
I analyzed the feasibility, ease of use, cost, and creativity of each method and decided
Augmented Reality tool to show the level of each ingredient will be an innovative solution to explore.
AR will work better than a recipe in text, illustration, or video tutorial because it is shows the quantity on user's own glass and it is more straightforward.
Key Features
Recipes
Users can checkout trending recipes, recommendations, and cocktail articles.
Descriptive Filters
Amateur users can find out their favorite tastes with our descriptive filters.
Augmented Reality
AR can recognize the glass and show levels of ingredients on top.
User Flow
Journey Map
I dig further into how potential users use our app and mapped it out the experience, empathized the problems that they may encounter in each stage, and found out new opportunities where we can reduce friction and provide an enjoyable experience.
Wireframes
I created low-fidelity wireframes to test out different layouts and flows.
UI Design
I researched and experimented colors, typography, and layouts, and designed logo and high fidelity interface with a sweet and refreshing interface that fits the characteristics of cocktails.
Technical Implementation with Unity and ARKit
The ideal solution would be AR recognize the real glass, and mark the levels on the glass directly shown on the screen. However, the existing AR technology is not mature enough now to recognize reflective and transparent object like glass.
I am very clear that the user goal is to show the levels of each ingredient. So I tried alternative solutions such as image target, cylinder target, and finally decided to overlay a virtual glass onto real glass through ARKit, and show levels on the virtual glass, which achieves the same users goal.
Reflection
Feedback
I demoenstrated this product to target users, people from NYC Media Lab and The New York Times. They really like the creative idea and also suggested possibilities to consider, such as the use in coffee making.
Learning
My biggest takeaway from this project is, always keep user goal in mind because that is what you are designing for and technology is to serve your user goal.
Future Improvements
1) I wish to do more user testing, for example to observe how users use the filter feature and better customize to their needs.
2) I will integrate glasses in shapes so that users can map with their own glasses more accurately.
3) I would take more consideration with the accessibility. For example, when user is holding camera with one hand and pouring drinks with another hand, it will be helpful to have audio/buzz feedback when the real liquid is approaching the anticipated level.
MIXAR