Exploratory design: a mobile app that allows users to order food and drink directly from their table from their phones
My Role: UX Research/Design · Visual Design
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:
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.
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 with the original iconography 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.
The resulting high fidelity prototype addressed all of the issues brought up in the usability studies. It also uses WCAG guidelines to ensure accessibility, while creating a robust interactive experience. Users are able to add items to their cart, place their order, and watch the progress of their order as it's prepared.
This app didn't just take mobility limitations into consideration. It also uses hierarchy, color, and font structures that can aid those with visual impairments.
The design I created uses accessible design and a simple navigational structure. The final iteration is 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.
