Kevin Lew
thumbnails_tripplemix.jpg

Tipplemix App

 

Tipplemix Cocktail App

 
 

INTRO

A client in the brewery industry is dissatisfied with current cocktail apps on the market. He wants to create an app concept with a unique feature that generates recipes based on the type of alcohol users have at home. The client sees commercial potential for alcohol companies to advertise their products through this app and wants to pitch the idea to his company in the form of a prototype.

Role

As the UX researcher, UX designer and UI designer I worked alongside a team of researchers to collect quantitive and qualitative data. Using the data I created personas, scenarios, flow charts, wireframes and high fidelity screens for an interactive prototype.

 
 
Mockup _house party.jpg
 

 

THE PROBLEM

The client is dissatisfied with the functionality of current cocktail apps in the market. They do not provide some functionality he expects such as showing how users can make cocktails from their existing ingredients. He believes they is an opportunity to develop an app which is unique from competitors which also has commercial appeal to alcohol companies.

Discovery

  1. The client is interested in finding out whether his idea is of any interest to people.

  2. Who the target audience is.

  3. If there is anything (functionality) that popular cocktail mixing apps do not provide and user need, want or desire.

Empathize and understanding the user

USER INTERVIEWS 

To collect qualitative data we interviewed 2 users male and female who were both cocktail drinkers. We filmed them answering a series of prepared questions to understand users experience of cocktails.

Objectives

  1. Define if cocktail drinkers make cocktails

  2. How much knowledge they have in making cocktails

  3. Is there a demand for a tool to help educate users on how to make cocktails

  4. What functions they would like to see in such a tool

Users were also filmed using competitor apps to complete tasks to see how existing products do not meet the expectations of the user.

 
 
interviews.jpg
USER-STORIES.gif
 

Finding from interview

  1. There is an interest in making Cockails at home but the roadblock is a lack of knowledge

  2. People would like cocktail recommendations based on what they like.

  3. Cocktail drinkers want to know happy hour details regarding local bars

  4. Current cocktail apps were confusing to use offering a very mixed user experience

 
 
 

User surveys

To collect quantitative data we conducted research through social media such as Facebook asking friends and family a series of questions. We used the Typeform platform to setup a questionnaire which was sent out and eventually received data from 14 respondents.

 
 
Presented above are some quantative data compiled from survey respondents which gives an insight into who the potential user of this product would be.

Presented above are some quantative data compiled from survey respondents which gives an insight into who the potential user of this product would be.

 
 

Define user pain points

USER PAIN POINTS AND EXPECTATIONS

By combining the data we received from the research methods we were able to identify some key user expectations they would like to see in a  future product. The obstacles they faced we labelled as pain points which would need to address turning into actionable goals to prioritise and drive the purpose and features of our product. Below are some of the key obstacles we identified in the research.

 
 
cocktail_app_painpoints_v2.jpg
 
 

PERSONAS

Several personas were created based on the information we collected in the research stage of our project. A higher percentage of women responded to the survey showing interest in making cocktails so we created 2 personas to represent them. One was created for the male to not exclude male audience also interested in cocktails.

Creating the personas gave us an understanding of a target audience we would be designing for. To help us better understand the context in which they would be using the product we created storyboarded scenarios to understand how the app would be used.

 
Cocktail_app_Personas.jpg
 

Mapping user journeys and ideate solutions

storyboards

With our personas created I decided to place them in a context by creating a series of storyboards which was designed to achieve the following aims.

  1. Outline the main goal of the user for using the product

  2. Test initial ideas before building prototypes

  3. Validate the proposed features

  4. Understand the users motivations for using the product

I will be looking at how the features developed help the user to perform tasks such as mixing cocktails with the ingredients at hand, creating cocktail recipes, finding recipes, locating bars that offer happy hour, etc.

 
Cocktail_app_storyboards.jpg
 

Now that we have explored a context the user will use our product we start to prioritize which features we consider to be a essential and which ones would be a nice to have and perhaps available in a future iteration. We used a voting system amongst the research team to decide which ones we saw as a priority.

Once we had prioritised which features we wanted to develop we began to look into possible solution on how we could help the user achieve tasks such as generating cocktail recipes with ingredients at hand.

 
Cocktail_app_ideation.jpg
 
 

SITEMAP

From the research data we collected we know have a clearer understanding regarding the users wants, needs and expectations regarding our product. Our research also indicated a priority on which features users felt where more useful to them.
 
My challenge will be to create a journey that allows the user to complete their intended goal in the most direct and user friendly manner.  Along the way I must keep the user clearly informed so that whenever a problem occurs the user is notified and presented with alternative options to continue their journey.

 
 
diagram_sitemap.png
 

WIREFRAME FLOW USERFLOW

After generating a number of solutions on how we can help the user achieve their tasks, we being to understand how the user will use the products and which steps they need to take to achieve their goal.

We start to plan our the information architecture to figure out a logical way to organise information and features and explore in further detail how the user can be guided into using particular functions of the app.

One of the primary functions of the product was to educate and help users to create cocktail based on the ingredients that had at home. Several methods to add recipes to the app were considered such as manual input, scanning barcode of products but in the end I opted for a clickable list as it seemed much faster and efficient to compile an ingredients list that way. Once the user has entered they existing ingredients the app would help them generate recipes they could make. I used a flow chart to design a user flow before moving into more details with a wireframe flow.

 
 
cocktailApp_flowchart.png
cocktailApp_wireframe flow.png
 
 

Creative visuals for prototyping

VISUAL CONCEPTS AND PROTOTYPING

The wireframes were mocked up into high fidelity visuals to produce an interactive prototype. An interactive prototype will allow the designer to test the product proving or disproving theories on how a customer will interact with the product. By using the prototype as a test platform we can use the information to continue to improve and refine the user experience.

 
 
cocktail_app_ui_screen_01.jpg
mockup_screen_02.jpg
Mockup_bar-scenario_v3.jpg
Mockup_location_v2.jpg
 
 

What was achieved?

On this occasion the prototype was used as a proof of concept for the client to present to his stakeholders in the brewery company. The idea was met with positive feedback and the app has now put forward as a product for its marketing department for potential funding and further development.