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

  • Grey LinkedIn Icon
  • Grey Instagram Icon
  • dribbble icon

​© 2017 by Nicole Zhaoqi Zhong