IT’S ABOUT PEOPLE: Designing a mobile app for Byron Hamburgers
(A case study)
CONTEXT
PLATFORM: Native mobile app
TIMESCALE: Two-week design sprint
TEAM: Three UX designers (General Assembly UXDi students)
MY ROLE: UX Researcher, UX Designer, Product Manager
TOOLS: Sharpies, paper, Sketch, InVision, Adobe Photoshop, Keynote, various cameras
CLIENT: Byron (concept project)
CHALLENGE: Create mobile app for at-seat ordering and payment at Byron Hamburgers.
GOAL: Offer the customer a better restaurant experience while freeing up the waiting staff to interact with the customers in a less functional and more fun way.
SETTING THE SCENE
THE BRIEF
“With the growing popularity of mobile payment and ordering systems, Byron sees an opportunity to leverage existing customer habits by introducing a mobile app that handles ordering and payment.”
THE CONCERN
Currently Byron have no digital presence apart from their static website, which only allows booking via a third-party client. Ordering and payments are handled manually by the waiting staff.
Byron is fast-expanding restaurant chain and want to remain ahead of their competitors by making it easier for their customers, especially larger groups, to order and pay via mobile.
UX TEAM AND SCHEDULE
Ben Jacobs, Suso Arias and I were the three-person UX team tasked with realising this concept project.
Our two-week sprint was structured as follows:
WEEK 1: Discovery and definition
Project canvas, project plan and business analysis; survey, user interviews, affinity map, personas, experience maps and design studio.
WEEK 2: Development and delivery
Paper sketches, low-fidelity wireframes, mid-fidelity prototypes, mock-ups. We went through several iterations and usability tests which informed our final high-fidelity clickable prototype which was then tested further before it was presented.
During this sprint, I was involved in every aspect of the design process but also naturally assumed the role of project and product manager. I made sure everybody was on the same page and everything was aligned with our plan and fitted in with our goals.
OUR APPROACH
Our approach to the challenge was based on Byron’s brand values of
friendliness — laid-back atmosphere — simplicity — strong visual identity
RESEARCH
Survey
We created a survey that was widely shared across social media. We received 195 responses.
Our screener questions “How often do you eat out at restaurants?” and “On what occasions do you eat out at restaurants?” allowed us to focus on users who visit restaurants more than three times a month and with groups of friends, as we believe that those are the people who would benefit more from the app.
Interviews
We interviewed 16 people. We conducted the interviews in person, over the phone and over Skype. We recorded the sessions on Call Recorder and QuickTime.
Comparative/competitive analysis
We looked into a wide variety of direct and indirect competitors, with an emphasis on those who used digital technology, either in the form of a native mobile app or tablets, including DF Mexico, Wahaca, GBK, McDonald’s, Nando’s, Pizza Hut, Deliveroo and UBEReats.
Contextual enquiry
We took friends and family to other restaurants with pre-existing apps in order to find out what the highlights and pain points of their experience were.
“Arrgh, I added the same item four times!”, said Steve while using the GBK app for ordering
Affinity mapping
Taking the insights from the interviews, competitive analysis and contextual enquiries, we created an affinity map which in turn informed our key insights and our persona creations. The three main areas our users focused were:
The service (time it takes to order, ability to customise order, times it takes to deliver the food, time it takes to ask for the bill); the emotional impact of using technology at a restaurant (Will I still be able to contact the staff? Do I have to be on my phone during the whole meal?); and the payment practicalities (ordering in groups, splitting the bill, separate payment, various payment methods)
Personas
We focused on Mike and Maria as our two main personas as they are more likely to visit Byron. Their needs are different but they would strongly benefit from the app.
Experience map
Main pain points
Booking; waiting to order; not quite understanding the waiter when they speak; requesting the bill; splitting the bill.
Our solution
Our solution was to create an app that addresses the challenges Maria and Mike are facing when visiting a Byron restaurant in order to make their experience seamless.
Feature prioritisation
In order to define our minimum viable product for this sprint, we categorised the features we wanted to include as follows:
DESIGNING THE APP
We ran a design studio in order to explore the problems and sketch out some ideas for features.
FROM SKETCHES…
The initial solution included a double platform of mobile app and tablet app. The tablet was going to be at the table and people without a phone could place their orders there.
However, while testing the paper prototypes, we encountered various problems including:
- Complicated navigation
- Confusion as to what the role of the tablet was
- Confusion as to how the tablet synced with the phone
As a result, we decided to not include the tablet in the MVP, given the time restrictions of the two-week sprint.
…TO LOW-FIDELITY…
During this stage we run another design studio in order to step back and refocus our efforts. We reduced the features of the mobile app and simplified the navigation. We decided to take out the booking feature and focus on ordering and payment.
After exhaustive feedback on our clickable prototype (created on InVision), the key takeaways were as follows:
- one of the features (I’m in a hurry!) [1] didn’t make sense
- the language used (transferred from the Byron website) was causing clarity issues [2]
- users felt trapped on certain pages and needed more visual feedback [3]
- process felt too linear
“The wording is quite cold — I see Byron as a friendly inviting restaurant” — Jane, 27, business manager
…TO HIGH-FIDELITY
For our high-fidelity wireframes we took into account Byron’s strong visual language (colours, typefaces and heavy use of illustrations) and focused on making the tone of voice personable.
We refined the user experience by adding a scroll-up menu which would always be available as soon as you added something to your order, as well as the option to split an item with someone at the last stage in the process.
We also replaced unclear wording of order customisation with icons which created a visual consistency as well as more clarity.
Finally, we addressed issues previously raised regarding the difficulty of ensuring that everyone on the table would be receiving their food at the same time despite ordering from separate devices by creating a progress visual (see screen above, on the right) which is updated as everyone places their orders.
Prototype here: https://projects.invisionapp.com/share/T6AHZM7P7#/screens
NEXT STEPS
There were many things in our feature list which would be fantastic additions: live bookings, opt-in location-based offer notifications, and, of course, the tablet on every table, which although not a priority with the current personas, proved extremely popular with older customers and families.
IT’S TIME TO WRAP UP!
Tasked with a challenging and fascinating brief, our team managed to create an app that could potentially give Byron customers the flexibility of ordering and paying for their food from their mobile device without compromising the Byron brand or values. The fantastic feedback we received highlighted the variety of features which addressed problems like splitting the bill, as well as the consistency in visual language between the app and the physical restaurants themselves.
Please do feel free to contact me with any questions or leave a comment below. I’d love to hear from you. My twitter handle is @marianthux.
Please note: Jean Jullien’s illustrations have been used throughout this concept app without written permission, as the app was only designed for demonstration purposes. I will gladly remove them if their use is illegal or if the artist feels it is demeaning to his image. Thank you.
