biergarteN UX

•client•

•My role•

UX Research/Interaction/Visual/
Motion/Designer

•PROJECT OVERVIEW•

Biergarten App and Website

The goal of this project was to create an app that would make patron's in-house ordering at Biergarten a more seamless and enjoyable experience. Once that was completed, I was tasked to create a responsive website that would supplement the app.

•Problem•

The people who were interviewed for this project described four pain points:

Not enough product information
Long lines
Frequent interruptions by wait staff
Accessibility Issues

•Project Goal•

To create an app that alleviates these pain points and allows the users to enjoy their stay, which in turn, may encourage them to buy more food and drinks. Once that is complete, create a website for Biergarten that informs users of their offerings, whereabouts, and events.

Image of people sitting at a communal table at a beer garden, eating talking and drinking beer.

•USER RESEARCH SUMMARY•

I conducted interviews to understand the users I’m designing for and their needs. A primary user group identified through research was adults who want detailed information about the items they order at a beer garden. The user group also confirmed frustration and annoyance when they are faced with long lines, unclear ordering systems, uninformed bartenders, too many interruptions from wait staff, and lack of accessibility in the menu for those with disabilities.

•Pain points•

Adults who go to beer gardens tend to go to learn about and try new beers that they haven’t tried before. Lack of information frustrates them.

These user groups get annoyed by the time wasted in long lines, or when the ordering system is unclear.

These user groups also tend to get frustrated when their conversations are constantly interrupted by the wait staff.

These adults also wish the menus at beer gardens were more accessible to patrons with disabilities.

•target audience•

Has a preference for detailed information
Wants a family friendly space
Desires efficient service and to cut long lines
Needs accessible design

•User Journey Map•

A very detailed user journey for the typical Biergarten patron.

•sitemaps•

In-house Mobile App

Website for desktop and mobile devices

The Sitemap for the desktop and mobile website.

•Paper wireframes•

Mobile app paper wireframes

Desktop website wireframes

Mobile website wireframes

•Low-fi prototype•

For the mobile app, as well as the responsive website, I created digital wireframes in Figma using my paper wireframes. I then made connections to test out a low-fidelity prototype. During this process I I ensured everything flowed and linked to the proper items and pages, as well as provided an easy to understand checkout process for in-house (app) and delivery orders (website).

An image of the low-fidelity prototype for the desktop website.

•usability study•

Round 1 Findings

Some of the navigation buttons need refinement.

Better visual cues need to be added for scrolling.

Round 2 Findings

Most users found the app easy to use.

The users liked the order tracker’s improvements.

•MOCKUPS•

Mobile App - Landing page edit

I replaced the navigation buttons for drinks, food and kid’s menu on the landing page with buttons that were easier to identify.

An image that shows the changes made from the first iteration of the mobile app landing page to the new one.

Mobile App - Menu page(s) edit

On the menu pages, people felt like their only drink choices were the featured drinks because they couldn’t see the items below the fold. I removed the header image. which allowed users to see that there were more options on the page.

An image that shows the changes made from the first iteration of the mobile app drinks menu to the new one.

•HI-fi prototype•

You can access the mobile app for Biergarten here.
The desktop web design can be found here, and the mobile web design here.

An image of the final High Fidelity prototype of the app.

An image of the final High Fidelity prototype for the desktop website.

An image of the final High Fidelity prototype for the mobile website.

•ACCESSIBILITY Considerations•

I ensured the heading structure and hierarchy followed WCAG 2 standards.

All of then fonts used are no smaller than 16pt to ensure readability for those who may be visually impaired.

All of the colors create contrast in a way that allows the user to see all content within the site.

•takeaways•

Impact:

The designs I created for the mobile and web sites use accessible design, and use a simple navigational structure, allowing the user to find and order whatever it is they are looking for.

What I've Learned:

One of the things that I really had to think about when I was doing this project was, what elements should be strictly used in the app, and how can this responsive website fill in the gaps. I added an about section for the website and mobile site, and left it out on the in-house ordering app, as it seemed less likely that the patron would need this info when they were already at the restaurant. I also made take-out and delivery available on the website and mobile site, but only made it possible to order in-house on the app.

•next steps•

Testing on actual patrons of the restaurant to see if there are any pain points we missed during the usability testing.

Re-design the app and site based off of any feedback we get from Biergarten customers.

Send to developers to implement changes.

BACK TO WORK