Drinks and food ordering app

My role

UX Design
UI design
Prototyping

Tools

Figma
Miro

Duration

September - December 2022

Project background

“Whisk it up”* is a popular beer garden in Dresden, with two locations in the city. This place is mostly visited by students and young professionals. Owners observed that due to the long time of waiting in the line to order products people are leaving. *this was a conceptual project as a part of Google UX certificate.

My goal

My goal was to improve the overall experience and efficiency of the ordering process.

View prototype

Design process

Project roadmap

1. Research

To really understand what struggles people face when visiting beer gardens I conducted online interviews. I indetified 4 main problems:

Receiving messed up orders due to noise
Making rushed decisions at the bar
Lack of the place to sit during weekends
Lack of card payments

2. Looking for solution

Based on the interviews I decided to analyze how customers might currently find and interact with the beer garden to perform key actions. Creating user journey maps helped me immensely to identify bottlenecks and areas for improvement.

3. Designing the app

I started by creating main components and style guidelines to maintain cohesive and easy to scale design. At this stage I ensured that it meets accessibility standards.

4. Usability studies

I performed 2 rounds of tests, from Lo-Fi to Hi-Fi prototype. During this phase I discovered 3 main issues that were resolved in the final product.

Final product

Mobile app

view of the checkout processs on mobile device

view of the beginning of the checkout process on mobile device

(01)

Order, pay - save time

Users can order products to their table by scanning QR code. No more waiting for stuff members or staying in the line.

(02)

Booking system

Users can book table in advance by selecting the location, date and number of guests.

mobile screen of booking a seat in a pub on the app

mobile view of second step for booking a table

view of the previous order on the mobile device

(03)

Manage orders in one place

Provided a way for customers to check their orders and reservations. It’s especially helpful to keep track of group orders and splitting the bill.

(04)

Ease of navigation

Users know which section of products they are looking at thanks to highlighting it in the navigation bar. They can easily decide what to order without feeling rushed.

view of te confirmed order on the mobile device

Accessibility considerations

01

I combined icons with text to make navigation easier for all users

02

I ensured that the size of clickable elements is minimum 48 px

03

I picked color combinations that meet WCAG 2.1 requirements

Final results

As this was just a conceptual project I don’t know how it will perform in real life. However all the people I interviewed and showed this app to said that they would love to use it. It would solve many problems like waiting for someone to collect your order and then pay for it.

Reflections

This was my first time designing a mobile app. I explored the guidelines of Material Design and Apple’s Human Interface Guidelines. I grasped the importance of testing design with users to ensure that the interface is intuitive not only for me but also for others.

Contact me to hear more about the details of this project and how each stage affected the final design.

Other projects

Redesign of B2B site for Zegarek.net

Simplifying the process of creating B2B orders

View project

mobile and desktop preview of b2b website I created

Concept project

Design of e-commerce for jewelry brand

Enhancing the user experience of the old-fashioned website