Developing a reserve, order & pay app in pandemic times
2-week group concept project for a British burger restaurant chain
The Client
Byron Burger is a British restaurant chain, founded in London in 2007 by Tom Byng, who developed the idea while living in New York City. It got its foot in the door by combining grass-roots food trends with the traditional and well-known universe of chain restaurants.
The Problem
In light of social distancing measures currently in place due to the COVID-19 pandemic, consumer habits and needs are changing rapidly. Byron Burger needed a way to let customers book a specific table, order food and pay for their meal, with as few contact points as possible.
The Challenge
Develop an iOS app which gives customers the ability to make a reservation, including the option of choosing a specific table. It should also handle order placements, and the ability to pay for the meal with the option to split the bill between various members of the party if needed. The app should also be synced across all devices, so users are able to allocate items and divide the bill in real time among themselves.
Deliverables
Survey, Interview, User Research, Affinity Map, Competitor Analysis, Contextual Inquiry, Experience Map, Persona, Empathy Map, Problem Statements, How-might-we Statements, Design Studio, App Map, Userflows, Sketches, Wireframes, Low-Fidelity Screens, Mis-Fidelity Screens, High-Fidelity Screens, Prototype, Usability Testing, Iterations, Style Guide
Outcomes
- Project completed on time and to quality
- Positive feedback from testers
Our Approach
We used an iterative approach with four phases, discover, define, develop, and deliver. The idea being to diverge and gather information and ideas, then converge to distil this into actionable insights to take to the next phase.
My Role
My team consisted of myself and three other teammates. We worked in a flat structure, with me taking on the role as facilitator and lead UI designer. We used Miro and Figma as our main platforms for brainstorming and design. Throughout the project I made sure that the team stayed on track and completed our deliverables on time and to quality.
Discover
The discovery phase began by reviewing project requirements, before exploring user needs through qualitative surveys and interviews.
Survey
To gain greater insight into consumer habits in regards to reservations, orders and payments we conducted a survey. It included more general questions, so we could pin point which pain point to focus our design efforts on later on. We sent this out to our own network and received 63 responses in total. Some of our key findings were:
- Users primarily eat out with 1 to 3 other people
- When they eat out, the majority of customers make a reservation in advance
- Making a reservation is done largely online
- The preferred payment method is Debit or Credit Card
User Interviews
In order to understand consumer habits, their pain points and needs, and for us to make better design decisions in regards to the priority features of our app, we set out to interview a variety of people within our own network. We interviewed a total of 15 people, 8 women and 7 men, aged between 24–40. Our main insights were the following:
- When going to a restaurant, people make reservations via the restaurant’s website
- People often check the menu beforehand
- Customers get frustrated when they have to manually calculate their amount when splitting the bill
- People prefer contactless payment methods — mainly card or through their phone
- Users felt that the payment process should be faster and easier
Competitor Analysis
Next, we looked at what other top competitors in the burger space were doing in light of current circumstances, including Patty&Bun, Five Guys and Wahaca. We analysed what features they offered, and which they didn’t, which we then used to establish a competitive advantage. It became clear that we could set ourselves apart by offering the option to book a specific table as well as having the ability to split the bill easily between multiple customers.
Contextual Inquiry
To fill in the gaps of our research and interviews, we had a team outing to Byron Burger in London. We observed people in their natural context and ask them further questions in regards to ordering and payments. We watched other visitors during our dinner and got the opportunity to talk to our waiter after our meal as well. Some insights that we were able to make were:
- The venue has a QR code placed at the entrance to check in customers initially and then have further QR codes at the table for customers to access the menu (reducing the number of touch points between people)
- Staff are working with tablets now instead of pen and paper — there was a steep learning curve but now they preferred using it
- Various payment methods were accepted, but most customers paid with card or contactless
Define
Experience Map
Having gained all these valuable insights through our research, interviews and contextual inquiry, we set out to create an experience map which would showcase our key findings in a visual way and highlighting key pain points and emotional states for the user throughout. As you can see in the graphic below, the were two areas with the biggest pain points. These were booking a specific table in advance as well as the ability to split the bill between multiple customers. This is what we then focused our app development on.
Persona and problem to solve
To help keep the users’ needs front of mind throughout the design process, we created a fictional persona based on our findings from the users we interviewed. Meet Sam, who enjoys going out, trying new foods and spending time with her friends.
Putting ourselves in Sam’s shoes, we used another UX tool known as an Empathy Map to really understand her thoughts and feelings.
At this point, it was clear who we were designing for and what her needs and pain points were. To guide our design thinking going forward, we honed in on our problems to solve
- Sam needs and easier and faster way to split the bill and pay her correct share, so her restaurant and payment experience is less tedious and more enjoyable
- Sam needs a way to book a specific table and order food through her phone, because she wants to minimise the contact she has with others when she eats out in order to feel safe during the pandemic.
Ideation and Sketching
Having discovered our users problems and keeping these in mind, we ran a design studio. A design studio is a workshop that combines divergent and convergent thinking. It helped us come up with various ideas on how we could possibly solve our problem at hand. To get our creativity going and spark ideas, we used another UX tool called ‘How might we’ statements, which are questions that assist in launching brainstorms. The statements we came up with and found most relevant for our session were
- How might we make booking a table more convenient
- How might we let a group of friends split the bill across different devices
Some great ideas came out of the design studio, which also proved to be a fantastic bonding experience for our team. From our collection of ideas, we extracted a list of potential features which were crucial, that we wanted to include in our designs going forward.
Booking
- Categorising locations by distance, showing the nearest to ones current location first
- Including party size, date and time selection for table reservation
- Having a clear floorplan so customers can easily choose a specific table
- Showing a booking confirmation once the reservation has gone through
Payment
- Having a bill overview prior to splitting the bill
- Allowing for equal and itemised split of items between people
- Ability to add people to your party, incase the user wants to pay for themselves and someone else
- Allocation of items to other people in your party, not on your bill
Navigation
To make navigation as easy and intuitive as possible, we had to decide as a team which category tabs would be most important to have for our app navigation. Taking our key pain points into consideration and the functionality and features the client asked for, we went with the following:
User flow through the app
To determine which screens we needed to design, we created a user flow, which was done by mapping out Sam’s potential journey through the app. Seeing as the booking and payment process were the biggest pain points that we uncovered in our research, we started our design process with these two flows.
Develop
Design Phase
Our design efforts for our sprint focused on testing quickly to gather feedback and iterate on those insights as quickly as possible, given our time constraints. We started with basic sketches which were done with pen, paper and a tablet, and then worked our way up to a high-fidelity, clickable prototype.
As we moved throughout the different stages of fidelity, we were able to test with a total of potential 12 users. This helped us gain key insights that ultimately helped us improve our prototype. Some of the feedback we received from our testers was
Booking
- The table selection process was confusing — it needed to be a screen pop up or overlay, not a new page
- The numbers on the tables were confusing, users did not know what they meant i.e. table number or number of possible seats at the table
- Users did not understand the shading differentiation of the tables — could not figure out which ones were taken and which available for them to choose
- There needed to be a confirmation page once the booking was complete
Payment
- Users wanted to see the £ amount, not just % amount when splitting items
- There were no indicators on how to split the bill which was confusing for users
- Users would like to be able to allocate items to other people, not just themselves
- Users wanted to see a bill overview per person
- There were overall too many steps in the splitting bill and payment process
Deliver
Final design
We collected all of our testing feedback, analysed it and took it into consideration for our final prototype. Final testing of our prototype went smoothly and overall got great feedback. Users understood how to reserve a specific table, split the bill and allocate items to each customer, as well as pay their correct share.
How we met the brief
Keeping the project scope in mind throughout the project, we delivered on the following
- Created a tailored mobile app to handle ordering and payment
- Provided customers the flexibility and control to book specific tables in light of social distancing
- Reflected Byron Burgers unique brand identity into our app
Conclusion
Next Steps
Having completed this design sprint, some things we would like to address in the future are
- Continue with user research on the target audience, specifically current customers of Byron Burger
- Build out the remaining user flows of the app
- Test and refine our prototype to improve the user experience
- Reach out to Byron Burger to get their feedback
- Pitch accessibility changes in regards to colours to Byron Burger
Challenges and key learning
I discovered early on in the process that we all had very different working styles, with me being focused and a fast-paced worker. I tried to use this skill to help keep the team aligned, focused and on track throughout the project and made sure we delivered everything on time and to quality. Furthermore, I used by previous graphic design experience and knowledge to support the rest of the team members whenever needed throughout the project, especially during the design and prototyping phase.
