Byron Burger
Designing an app that manages reservations, order at the restaurant and manage payments
Methodologies Used
UX/UI design, User research, Prototyping
Duration
2 weeks (September-October 2020)
Team
Carlos Arellano (medium.com/@carlosdesousaarellano)
Florence Lo (medium.com/@florencelo.jy)
Julia Schwarz
Chris Wellmar
Deliverables
· Complete Research Findings
· Native app UI
Software
Figma, Miro Board, Trello
Brief
Byron Burger has been serving delicious burgers, craft beers and extra thick shakes since 2007 by combining grass-roots food trends with the traditional and well-known universe of chain restaurants.
Challenge
- The primary objective was to introduce a mobile app that handles ordering, payment and the ability to book specific tables. Partly due to the global pandemic but also to the growing popularity of mobile payment and ordering systems, making the dining experience safer and more efficient.
- Secondarily, to reflect Byron Burger’s unique brand identity through visual design.
My Role
As a team, we participated in all aspects of the project, from the initial stages of the research to the final presentation.
Note: I am not affiliated with Byron Burger, or any other company, in any way.
Outcome
We met the brief creating a tailored mobile app to handle booking, ordering and payment, providing flexibility and control for the customers in light of social distancing. By giving customers the ability to book specific tables on their favourite location. Finally, reflecting Byron Burger’s unique brand identity through visual design.
The process
Discover
Screener Survey
Our first step was to conduct a screener survey to gain insights from people’s dining experience and to capture the right audience to conduct further user interviews.
User Interviews
From the survey responses we were able to conduct 15 user interviews to get deeper insights into their behaviour and to better understand their experience to be able to enjoying a meal in a restaurant. We asked questions to gain insights into their experience relevant to: how to make a reservation, the ability to book a specific table and how to manage and split payments.
Competitor analysis — Direct
With the competitor analysis we would be able to take better decisions on further stages of the project, complete the main user journey and find possible market gaps.
Only Wahaca offers the possibility to book a table. None of them help their customers to divide nor split the bill.
Competitor analysis — Indirect
As indirect competitors we analyzed Vue, Cineworld and Walk up for their allocation systems and Deliveroo and Uber Eats for their ordering systems.
Contextual Inquiry
We conducted, as a team, a contextual inquiry to learn what is important to the users and customers of Byron Burger’s in South Bank, London. We enjoyed a meal and were able to ask some questions to staff members to gain insights in their daily tasks.
Discovery phase Key Findings
- Users preferred method to book a table is online, through the restaurant website or app, and want to be able to check the menu beforehand.
- The restaurant currently uses QR codes for NHS guidelines and for their customers to download the menu.
- Staff works with tablets with a centralised ordering system. There was a learning curve but they preferred it now as they got used to it.
- Staff will ask about allergens and will do follow ups but customers need a way to mention their allergies or food related issues when making a reservation.
- Users don’t want to calculate or split the bill manually, they need a fast and easy process that works with large groups too and does not hold them in the restaurant.
- Contactless card payment is fast and easy, but also will limit the contact with other when paying. Only cashless payment methods are allowed due to social distancing guidelines.
Define
Experience Map
To visualise the user experience and identify the pain points we created an experience map based in the information gathered in our research.
We decided that we would focus on booking a table on a specific restaurant and to be able to split and pay the bill.
Persona
To synthesise the findings of our research we created a persona. This will help us represent a specific type of user, focus on a specific set of issues and identify pain points and help the team to stay on track while moving forward.
Design Studio
To explore and define some of the features and see how some of our ideas might look we did two sketching design studio sessions.
In both sessions, we timed our selves for a first round of sketching to then share our ideas in a Miro board. We presented, critiqued each others work and moved on the second round of sketching gathering and further developing everyone’s best ideas individually. Finally we presented for a second time, critiqued each others work again and dot voted features or specific characteristics that we wanted to include in our design.
To help us launch the creative process we generated a series of short questions or how might we statements. How might we..
…make booking a table more convenient?
…let a group of friends to split the bill across different devices?
Design Studio Key Concepts
Booking:
- Restaurants categorised by distance nearest to current location.
- Party size selection.
- Date and time selection options.
- “Floor Plan” style table selection.
- Booking confirmation page.
Payment:
- Total bill overview prior to splitting.
- Allow for equal and itemised splits.
- Option to add people to your party (via contacts list).
- Allow to allocate items for others in your party.
User Flow
To gather the insights generated in the design studio and to represent the steps the user will take to complete the tasks we created a user flow to map out the whole dinning experience, highlighting Booking and Payment flows as the areas to focus on.
Develop
Paper Prototype + User Testing
To start exploring possible solutions testing the user interface and some of its features, we developed paper sketches for each of the defined flows. We scanned our sketches and prototyped them to be able to test both scenarios with users remotely and obtain feedback. We tested 8 users between the 4 members of the team.
Booking
The users wanted to minimise the number of steps necessary to book a table, a pop up or overlay window was preferred over opening a new page, while keeping information clear was key. The user also needs a confirmation page to know when the process is completed.
Payment
Similar to the booking process, users wanted to minimise the steps necessary to pay and split the bill. To be able to allocate items to other people, not just themselves, an item overview for each party guest was needed. Finally, users preferred to see the £ amount than the % percentage.
Iterations + User Testing
On the final stage of the design process we did 3 more rounds of testing with 8 different users on each round, increasing the level of fidelity, detail and functionality. We applied the tested users’ feedback from the first paper prototype and for every iteration. After the 3 rounds of testing we started working on the final UI design.
Book a table
Difficulty to differentiate between available and non-available tables. Users want clearer depictions of windows, exits, and kitchen area.
Split the Bill
How to allocate items to each person was confusing, the dragging items function was not clear to them.
We thought to use a slider and percentages to allocate items, but that seemed even more confusing to the user. It was clear, the process needed to be simplified. We decided to focus on making the dragging items function clear and simple to use trying to indicate whose items were being split. To allocate items easier we added image thumbnails instead of dots to help user indicate the claimed ones.
Confirm Your Bill
When it is the time to pay the bill, users want as few screens as possible and to experience an easy and flexible process that allows them to pay for themselves or some else.
Deliver
Styleguide
Prototype
Next Steps
Finally, and as suggested next steps, we would like to:
- Continue to do more user research on the targeted audience,
specifically customers from Byron Burgers. - Build out the remaining user flows for the app.
- Further test and refine our final prototype to improve the user experience.
- Pitch accessibility changes to Byron Burger.
