LinkedIn
Email
Introduction
The Beer Garden Ordering App is a digitalized solution to the traditional waiter and menu card. As not everyone is comfortable using a purely digital solution, it will not replace, but supplement and be seamlessly integrated into the traditional process.
Problem
Due to the nature of beer gardens, it can take a lot of effort to get the attention of the waiter. Many people associate this interaction with negative feelings and see it as a necessary evil when visiting beer gardens. The App aims to improve customer satisfaction, reduce ordering time, and therefore increase sales volume.
Goal
To design a mobile application that allows guests to order beer directly to their table, including payment through the app. As not everyone is comfortable to use a mobile phone, the solution needs to work alongside the traditional process.
Process
Design thinking
Empathize, define, ideate, prototype, test
Empathize, define, ideate, prototype, test
Timeline
09.2021 – 11.2021
6 weeks
6 weeks
Tasks
UX research
User interviews
Wireframing & prototyping
UX testing
UI design
User interviews
Wireframing & prototyping
UX testing
UI design
Discovery
I conducted interviews and created empathy maps to better understand the needs of my users. A primary user group identified through research was working adults who sporadically visit beer gardens.
Interview focus
- Understanding the current ordering process
- Gain insight on pain points of customers
- Build understanding for customers
Target participants
- 18-105 years old
- Drinks alcohol
- Varied genders & abilities
- Local & foreign visitors
Main pain points
- Getting attention from the waiter
- Having to interact with the waiter
- Long, uncertain wait times after ordering
- Giving tip
Considerable insight
- No matter the demographic, payment at the end by card is preferred
- Mobile ordering system functions as an extension, physical menu card and waiter are essential
- To promote quick access, a web app over a mobile app is a preferred solution
Meet the users
Two main personas have been extracted from the user interviews. They cover the most prominent visitors, which are regular guests and sporadic visitors.
User story & journey map
Storyboards
A regular scenario of Soyeon Kim going to a beer garden on Friday evening to meet friends and to enjoy a cold beer to welcome the weekend.
Two storyboards have been created, a big picture storyboard for the narrative, aka user needs and their context, and a second storyboard as a close-up to focus on how the product works.
Two storyboards have been created, a big picture storyboard for the narrative, aka user needs and their context, and a second storyboard as a close-up to focus on how the product works.
Big picture
Close-up
Information architecture
The information architecture, including the main navigation points in the application.
Wireframes
Once the flow diagram is established, the first hand drawn wireframes and the consequent digital wireframes are created.
Research plan
Analysing if the app improves the ordering process over traditional ordering through a waiter, how real users interact with the design and how well the product meets their needs.
Research questions
- How long does it take to get to the ordering part of the app from the first opening of the app, and how people feel about it
- Is ordering through the app faster than through a waiter, on regular days and busy weekends
- Do people use and care about the estimated time when they receive their order
- Do people want to use an ordering app over traditional ordering?
- Do people prefer to pay by mobile or at the cashier?
KPI
- Time from login to the menu screen
- Time from finishing selection to finishing order
- Quantity of people aborting the process
- Times repeating the same task due to error or misunderstanding
Results
While users in general are happy with the app, there are opportunities for improvements, especially for the login process.
User path insight
The heat map shows that users struggled during the login phase and selecting companion beers, yet did well when presented with only a few options or when the next steps were clearly highlighted.
Affinity diagram
Aggregation and visualization of the insights from the prototype test. The information is split into categories that directly relate to parts of the UI. Through this process, we can visualize which parts of the UI need the most attention. The information can then be further refined into patterns and insights which will present us with a clear way forward to improve the usability.
Summary of the insights
Login process is troublesome
Companion beer feature is confusing and unnecessary
Need for reordering past order
Cancel a mistaken order before delivery
Provide additional login methods and improve the phone number verification process. Phone number verification cannot be removed as it is a necessary requirement.
Functionality that confuses the user and brings no business value should be removed.
Users commonly reorder their same beer at a beer garden, such a functionality brings business value and user satisfaction.
Mistakes happen, and when possible there should be an opportunity for the user to either revert that mistake or lessen it.
Updated wireframes
Login
Additional options for the login have been added and the phone verification process strongly simplified, even though one more click is necessary.
"It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.” - Krug's second law
Menu
The companion beer functionality has been removed and introduced minor improvements to adding a beer to the order. Furthermore, when adding the first beer to the order, a notification appears to explain the next step for ordering.
Order
The order screen has been reorganized to give users a clearer overview of the currently added items. Additionally, a function to cancel the order shortly after ordering has been added, as well as an option to reorder a previous order.
Design
The main focus of the design is to reflect the atmosphere at a beer garden, which has been defined as a feeling of warmth, elated, friendly, cosy, and belonging. As beer gardens are considered an important traditional asset, the colours and typography are kept in traditional German style.
Color
#FFBA08
Main colour highlighting of a regular call to actions from the user flow
#D00000
Secondary colour highlighting of call to actions that are outside the regular user flow
#9D0208
Secondary colour substitution when used on the main colour to increase contrast
#03071E
Text and regular non highlighted elements
#FFFFFF
Background and regular non highlighted elements on main colour backgrounds
Typography
German beer culture is strongly associated with tradition and history, therefore the logotype is baroques, combined with a display serif typography for the body text.
Logotype
Klaber Fraktur
Bodytype
Noto Serif Display
Figma sticker sheet
Meet the App
Login & verification
Menu & ordering
Reorder
Lesson learned
As this is a study project to become more familiar with the goal-directed design process, I put a lot of emphasis on the learning process and the reasoning of the process itself.
I've learned that when creating an application, the environment where it is used plays a big role in its usability. Applications should not be designed in a sandbox.
Another important point I've learned is that the context decides if a functionality is desirable or not. Using the application as an example; given the choice, people would avoid ordering through a waiter, yet choose a waiter over in-app payment. It can be easy to assume otherwise without valuable user feedback.
This project taught me how important well-conducted interviews and user testing is.
I've learned that when creating an application, the environment where it is used plays a big role in its usability. Applications should not be designed in a sandbox.
Another important point I've learned is that the context decides if a functionality is desirable or not. Using the application as an example; given the choice, people would avoid ordering through a waiter, yet choose a waiter over in-app payment. It can be easy to assume otherwise without valuable user feedback.
This project taught me how important well-conducted interviews and user testing is.