UX Research/Interaction/Visual/
Motion/Designer
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.
The people who were interviewed for this project described four pain points:
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.
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.
Mobile app paper wireframes
Desktop website wireframes
Mobile website wireframes
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).
I replaced the navigation buttons for drinks, food and kid’s menu on the landing page with buttons that were easier to identify.
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.
You can access the mobile app for Biergarten here.
The desktop web design can be found here, and the mobile web design here.
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.
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.