mixar poster.png

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

Screen Shot 2019-03-09 at 9.28.44 PM.png

Key Feature

iphone 8 frame.png
Mixar Browsing 200% speed.gif

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

iphone 8 frame.png
mixar filter.gif
iphone 8 transparent.png
ezgif.com-crop.gif

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.

story1.png
story2.png
story3.png
story4.png
story5.png
story6.png

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.

IMG_1498.PNG
IMG_1503.PNG
IMG_1502.PNG

Renee, 24

Cocktail lover

Till, 25

Cocktail lover

Tarun, 27

Home bartender

IMG_1500.PNG

Chris, 24

Home bartender

IMG_1504.PNG

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. 

user persona orange.png

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

IMG_1508.PNG
IMG_1510.PNG
IMG_1511.PNG
IMG_1512.PNG

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

recipe.png
Based on what you have.png

 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

cock-glass_2000x.jpg

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

4610320_rd.jpg;maxHeight=1000;maxWidth=1

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.

IMG_1018_edited.jpg

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

caipu-3.png

Recipes
Users can checkout trending recipes, recommendations, and cocktail articles. 

tag.png

Descriptive Filters 

Amateur users can find out their favorite tastes with our descriptive filters.

ar.png

Augmented Reality 

AR can recognize the glass and show levels of ingredients on top.

User Flow

Screen Shot 2019-03-17 at 10.20.09 PM.pn

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. 

Journey Map gray bg.png

Wireframes

I created low-fidelity wireframes to test out different layouts and flows.

wireframe.png

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.

high-fi.png
Styles.png
style.png
Styles.png
Styles.png
style.png

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. 

Screen Shot 2018-11-19 at 11.25.38 PM.pn
IMG_5864.PNG
IMG_5868.PNG
IMG_6957.PNG
IMG_6964.PNG

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