Tavern Beer Garden
A device-agnostic digital menu and ordering system for the beer garden
To Enjoy hassle-free digital experience when ordering food and drinks at your fingertips!
Overview
" Tavern Beer Garden" is best known for its unique and different varieties of availability of beers. The beer garden has now taken a significant step by implementing a self-service kiosk, for revolutionizing the business and customer experience.
Customers will independently engage with the digital menu and seamlessly browse and order items, all while maintaining their privacy without interruptions.
This approach enhances efficiency and convenience and elevates the overall dining experience in the beer garden.
Problem
The beer gardens have modernized with the introduction of technology. The Tavern Beer Garden encounters issues with the menu lacking information about the food and drinks.
Users often feel frustrated when they cannot find discounts or combo options available for food or drink items.
Customers often have to wait in long lines to place orders, which can be frustrating and time-consuming.
Goal
The goal was to build a responsive and device-agnostic approach for the menu and ordering system of the beer garden making it environment-friendly, enhancing customer satisfaction and keeping the business and ethical viewpoints
Date
Sept,2022
Type of work
Research, Responsive design, UI Design, Interaction Design
Role
Research, UX Designer, UI Designer, Interaction Designer
Tools
Figma, Notion, Adobe Illustrator
The Research Process: Let's Understand
What is a Beer garden?
A beer garden is an open area outside, usually surrounded by trees, where food and beer are served. It's a very social area that's meant to create new connections between strangers
​
Beer gardens were originated in the early 19th century in Germany.
After going through additional research and obtaining data about the beer garden, I initiated to elevate experience problems with the users and actualized Information to become more familiar with the user's pain.
Enhancing User Understanding through Qualitative Research
To gain valuable insights into users' pain points, goals, and expectations, I conducted qualitative research (interviews).
Through these interviews, I engaged with 8 users to understand their experiences and uncover the underlying challenges they faced.
This user-centric approach allowed me to understand users' needs and desires, ensuring that the final solution would address their pain.
Based on the insights gained from the interviews, I uncovered the issues and challenges that users encountered during their visits to the Beer garden.
For these issues, I developed a solution that prioritizes the needs and expectations of the users.
Considering user feedback and preferences, I aimed to create an effective solution that enhances the overall user experience and resolves the identified pain points.
Proposed solutions :
# 1. How Might we implement a Self Service Kiosk system for the Digital menu and ordering POS system for Beer Garden?
Concept and Ideation
1. What is a Self Service Kiosk and POS System
A self-service kiosk is an interactive device that enables users to perform specific tasks without the need for any human assistance. It mainly includes a touchscreen display that offers a range of interactive services for users.
POS ( Point of sale )is software used for transactions & managing a company's Point of sale, inventory transactions sale, tracking & to accept various forms of payment including credit & debit cards, and QR code scans.
POS device
Tablet kiosk ( Self service kiosk)
The image represents the tablet kiosk for the restaurant with a POS system.
The "Why" for the tablet kiosks
Self-service kiosk comes in a variety of forms and types according to the business needs. For the beer garden dining experience, it is necessary to provide a better customer experience, reliability, customization, and cost-effectiveness as utmost priority.
Tablet kiosks can be a better and more fruitful choice for the beer garden due to their cost-effectiveness compared to enclosures and stands. It is flexible and easy to use and requires minimal space to locate.
The self-service Kiosk is a hardware and software suite, integrated with the POS systems of the catering establishment.
For tablet kiosks, a budget-friendly tablet specifically, Android could be a better choice. Kiosks and POS software are needed to set up tablets as kiosks. s as kiosks.
The Business views:
2. Self-service Kiosks and POS Systems are Revolutionizing the Food Industry
From a business view, Self-service kiosks, QR code scans & POS systems are altering the traditional methods of ordering and paying systems in food industries.
Below are some market research insights from surveys and reports:
.png)
Implementing a self-service kiosk and POS system in the Tarven Beer Garden would significantly enhance the customer experience. It lets customers place orders independently, ensuring privacy and a seamless ordering process.
Reducing staff burden allows them to focus on other customer service aspects. The paperless menu approach promotes an environment-friendly approach.
Furthermore, the increased efficiency in order placement and streamlined operations can contribute to improved profitability through a higher volume of food and drink orders.
After careful observations from user interviews and surveys, the insights obtained from user goals and expectations share one common finding "Self-service kiosks or Qr code scans for digital menus and POS systems. " Implementing a digital menu as a kiosk or a Qr code scan may lead to a technical issue. To resolve this issue,
# 2. How might we incorporate a device-agnostic (responsive) approach to the Digital menu and POS system
QR code scan works wonders for Self-ordering and Payment system
Scan me!
QR code scans are transforming the dining experience in the food industry. According to an Ohio State University study, 8 in 10 customers are willing to pay more for a “green” dining experience.
In the Tavern Beer Garden, the device-agnostic responsiveness and QR code scans will be a better alternative for Tablet kiosks as they will help customers deal with any technical issues they face. QR code scans will provide a digital experience for customers as a digital menu and ordering.
The Story of a User journey
To understand it more profoundly, the following user story depicts the responsive approach, How the user journey will be, and what steps the user might approach for the particular task. The information obtained through research, followed by user interviews, helped me to frame the user story with relevant steps of the user journey.
Design process: Ideation
The Device agnostic approach: Responsiveness
The Device agnostic approach: Responsiveness
From the initial research phase to the ideating solutions, I started designing for device-agnostic responsiveness for tablets and QR code scans on mobile screens.
I started with paper sketches, allowing me to iterate and refine my concepts. Transitioning into the digital, I translated my paper sketches into refined digital screens, presenting an improved and well-structured representation of my design concept.
1. Home screen - Mobile and Tablet
.png)
While ideating, I was firm with the concept of easy-to-use technology. For the digital menu, I kept the interface minimal and clean, focusing on the beer and food combo as the top priority, followed by the weekends and happy hour discounts.
2. Menu screen - Mobile and Tablet
.png)
The food and beer sections of the menu represent the items with an image and description to get an overview of the items displayed and get information about them, not costing them to visualize the particular item.
Design process: Moodboard & UI screens
The minimal design Setup
My goal was to keep the design minimal, simple & elegant. I took inspiration from the name itself to present the elegance of the garden and the infusion of beer in it.
Navigating the UI Development for Tablet and Mobile Screens
I initially began with low-fidelity digital screens, followed by an iterative process as I advanced toward high-fidelity screens.
Moodboards emerged as valuable tools in our design, enabling us to effectively communicate and evoke the desired emotions, aesthetics, and brand identity.
The core belief of designing for fun and ease of use permeated every stage of our process-crafted interactions, navigation flows, and visual elements to a sense of joy, playfulness, and simplicity.
Below are my two versions of the screens according to my research.
1. Home screen
The home screen provides users with different food, drinks, and combo offers for placing orders.
It serves as a hub where users can get a glimpse of what the beer garden has to offer.
This centralized platform provides a convenient and user-friendly interface for exploring the available menu items and making informed choices.
2. Varieties availability.
Multiple foods and beer varieties are available with images and descriptions for better understanding so users can place orders according to their needs.
3. Information's on board
Customers can look for items' descriptions and information before placing an order.
4. Order page
The overlay final order page lets customers view their order before placing it. The order page details customers' orders and the amount they need to pay.
.png)
Testing process : Iteration and more
Testing the usability for better insights.
Testing the responsiveness of the screens across devices was part of my iteration process. To make design accessible across different devices, I carried out usability testing with 8 users to gain valuable user feedback and deliver better solutions with accessibility considerations. From the testing, I managed to make iterations based on the insights and deliver solutions precisely.
1. Iteration for UI of the Home Screen
.png)
The iteration process was first carried out with the UI design of the Mobile screen, followed by the tablet screen.
A complete change in UI was demanded when the first version of Mobile and tablet screens were tested.
2. Hover effect for order process
.png)
Enhancing the user experience for the order process by adding an overlay effect with clear and simple additional interaction
3. A tone to describe it better
The use of an engaging tone was recommended to enhance UX writing.
4. Easy Return to home Screen
An easy way to return to the home screen when your order has been served.
Visual process: Branding & Identity
Visual system design
The visual system was designed by keeping minimalism and aesthetics in mind. A primary color-focused color palette was used to represent the simplicity and security that evoke feelings of nature.
.png)
The digital menu prototype - Tablet kiosk
The QR Scan code prototype - Mobile kiosk
Scan the QR code on your phone
The conclusion
Key learnings :
Designing with responsiveness: The responsiveness approach works well when it comes to the framework of device agnostic. The project has supplied me with knowledge of responsive systems to create a consistent user experience across devices. The digital menu for tablets and QR code for mobile equipped with responsive features worked well for the device-agnostic approach.
Consistency across devices: For responsive design, a well-formed information architecture needs to be designed for a consistent user flow regardless of the device.
Aesthetics visual views: Visually appealing designs tend to be more appreciated by the users to grasp information and feel confident to use it. The usability testing insights provided information about the importance of visual understanding, and users felt comfortable experiencing the digital menu for the particular device.
"The device-agnostic system would leverage the beer garden business through its ability to reach a wider audience, improve customer experience and engagement, increase profitability and scalability, better use of resources, and reduce staff burden."
Next Steps:
This project taught me to look out of the box, design for responsiveness, and have a user-centered approach to understanding people and their core motivations to deliver correct solutions. I look forward to applying the same for my upcoming projects.
Previous
Next