UX Research/Interaction/Visual/
Motion/Designer
Like many beer gardens, Biergarten has its patrons wait in line to order food and beverages. The stakeholders requested an app that would make patrons' in-house ordering at Biergarten a more seamless and enjoyable experience for those who don't like, or can't, wait in lines.
The people who were interviewed for this project described four pain points when ordering at beer gardens or similar establishments:
The goal for this app was to alleviate the pain points listed above, and allow the users to enjoy their stay, which in turn, may encourage them to buy more items and return in the future. This app will also allow those with limited mobility to order from the comfort of their table, negating the need to wait in line.
I conducted interviews to understand the users I’m designing for, as well as their needs. A primary user group identified through research was adults who want detailed information about the items they order at a beer garden, especially the beverages. These details should include the style, flavor profile, aroma, alcohol by volume (ABV), and country of origin.
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 for those ordering with limited mobility.
For this app, I created digital wireframes in Figma after I made several iterations of paper wireframes. I then made connections to test out a low-fidelity prototype. During this process I ensured everything flowed and linked to the proper items and pages, as well as provided an easy to understand checkout process.
I replaced the navigation buttons for drinks, food and kid’s menu on the landing page with buttons that were easier to identify. Although the changes were good, users wanted larger buttons to access the menus, so a third iteration was created, ensuring all the buttons maintained that scale throughout the app.
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.
This app didn't just take mobility limitations into consideration. It also uses colors and font structures that can aid those with visual impairments.
The design I created uses accessible design and a simple navigational structure. I also ensured that the app was more interactive, allowing users to add whatever items they wanted to the cart, making the experience more enjoyable and true to the final developed app. The added interactivity helped users understand the ordering process even more and made them feel like they accomplished their goal.
I found that my users really wanted to get a feel of how the app worked, rather than just navigating from frame to frame in the user flow. They wanted to add their own items to the cart, see what it looked like when checkout information was added in the text fields, and finally, see how the order tracker functioned after they completed their orders. Once these changes were made, the users appeared to be more satisfied with the prototype.
All the pain points mentioned earlier have been addressed in this app. Detailed descriptions are provided for all of Biergarten's offerings. The app also ensures accurate delivery by including a field for users to input their table number when ordering. This feature gives patrons an alternative to standing in line, which is particularly beneficial for those who dislike waiting and for individuals with mobility impairments.
Please note: Sometimes Webflow (where I host this site) doesn't handle embedded Figma prototypes well. If you notice anything strange while you play with the Biergarten app here, please try it out in Figma.
