BEER MATE

UI KIOSK DESIGN

Have you ever visited the beer aisle wanting to try something new and local…then realized you’ve been walking the aisle for ten minutes? Did you get frustrated and fall back to your old familiar ways? (*Cough* that 6-pack of Miller Lite)

Have no fear. Beer Mate is here – your quick guide to beer confidence. Simply step up to the standing kiosk and click a style of beer to learn more about it, or take a short beer finder quiz to find the right local beer for you.

User interface design, digital kiosk, web design

KIOSK DESIGN

BEER MATE Kiosk

INITIAL PROJECT GOALS

WHAT
• Design a user-friendly touchscreen kiosk that promotes and helps shoppers try new local beers

WHERE
• Ideal location for the kiosk is in the local beer aisle at a grocery or liquor store

WHO
• Target audience is adults age 21 or older who are interested in trying something new

Other Objectives
• Kiosk will offer two main interactions:
-Quick facts about beer styles with suggestions of local beers 
-A beer-finder Buzzfeed styled quiz resulting in more personalized recommendations

• Interactions must be simple to use and rather quick, as users will likely not spend more than 5 minutes at the kiosk during their grocery shopping

USER PERSONAS

Amy

Amy

Age: 46
Occupation: Sales
Location: Middleton, WI

GOALS:
• Learn about the different styles of beer
• Understand which beers are close to the style she already likes
• Be able to try a new beer with confidence

NEEDS:
• Beer Confidence
• Suggestions of more flavors she might like

FRUSTRATIONS:
• Her partner’s stubborn preferences
• When she is not able to say what she likes or dislikes
• Not being able to talk about beer with her more knowledgable friends

Rachel

Rachel

Age: 21
Occupation: Student
Location: Milwaukee, WI

GOALS:
• Learn about the different styles of beer
• Understand what flavors she might like more than others
• Be able to buy beer with confidence
• Understand the details between different styles of beers

NEEDS:
• Beer Confidence
• Suggestions of flavors she might like

FRUSTRATIONS:
• When she is not able to say what she likes or dislikes
• Not being able to talk about beer when she lives in a city where its always a topic of  conversation

Carlos

Carlos

Age: 32
Occupation: Designer
Location: Madison, WI

GOALS:
• Try new kinds of beers that he may have not heard of before
• Understand the minute details between different styles of beers
• Be informed as possible

NEEDS:
• New information to keep his interest growing
• New ideas of local beers to try

FRUSTRATIONS:
• When he is unfamiliar with a new style of beer
• Not being the beer expert among his peers

INITIAL BLACK & WHITE WIREFRAMES BUILT IN XD

Home page (initial view): Beer type icons listed across screen and a button to start the beer-finder quiz

Home page: If a beer type is selected, quick facts are revealed in a pop-up modal, and beer-finder quiz results would be shown after quiz completion

Home screen wireframe 2

WIREFLOWS / USER FLOWS BUILT IN XD

These two wireflows show two possible paths a user can take from the kiosk home screen to a successful action.

The first path shows the user taking the beer-finder quiz which results in three beer suggestions and the option to save their results.

The path below shows a user browsing the quick facts about different styles of beer. A modal would pop up when a beer style is selected. The user can open/close as many styles as they desire. Each style provides different beer recommendations to the user. 

Wireflow for quick facts on beer styles

MOOD BOARD

Mood board for beer kiosk inspiration

STYLE GUIDE

KIOSK PROTOTYPE – DESIGNED IN WORDPRESS

MAIN HOME SCREEN:

Kiosk Home Screen

QUICK FACTS POP-UP MODAL:

Beer style pop-up modal with quick facts

BUZZFEED STYLE QUIZ QUESTIONS:

Beer-finder quiz questions

QUIZ RESULT WITH RECOMMENDATIONS:

Quiz Results

WORKING PROTOTYPE

Try the kiosk prototype by clicking the button below!

*Keep in mind the project was designed to fit a large touchscreen Chromebook and will not be responsive on smaller devices.