BYRON
In-restaurant ordering app
CONCEPT PROJECT
As part of a three-person design team, I participated in the design of an iOS app that allows customers to place orders, split and pay their bill when visiting Byron restaurants. The challenge during this project was to create a product that would seamlessly integrate with Byron’s current branding and philosophy while providing customers with an improved in-restaurant experience.
The Premise
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 basic features we set out to include were:
-
Customers should be able to order food and drink.
-
Groups of users should be able to all order to the same table.
-
The app should handle splitting the bill and taking payment.
Discovery
We kicked off the discovery phase of the project by visiting a Byron restaurant and conducting an impromptu interview with a member of the front of house staff to gain insight into the culture of the company.
view other projects
"Byron is about the people.
There's a sense of community.
With a view to better understanding the habits of potential users, we prepared a survey which was disseminated through social media channels. A total of 192 people responded. From the survey respondents, we selected a total of 15 candidates to conduct interviews in order to gain a more in-depth understanding of their preferences and pain points when eating out.
"I would love it if they could cut the waiting times to order, to get the bill..."
​
"I'm pretty easygoing when it comes to splitting the bill, but when it becomes a problem with somebody in the group, it can ruin the night for everybody."
"Paying in advance? No way.
What if you're not satisfied with something? You never know."
"[At Byron] the staff are great. They're friendly and approachable."
We completed our research by doing a competitive analysis. We identified direct and indirect competitors who have an app that allows customers to place their orders and pay for their meals. We then focused on one restaurant chain in particular and conducted a couple of contextual enquiries to see how users interact with the app and identify areas which could be improved.
“Arrgh! I added the same item four times without realising, and I have to go to another screen to change the order.”
Defining Goals
Armed with the insights from our research, we proceeded to narrow down and define the features which needed to be include in the design. First we prepared an affinity map to synthesise the information gathered and spot trends in terms of user preferences. Then we completed a feature prioritisation exercise in order to zero in on the necessary features which would be built into the app.
We summarised our key takeaways from research into the following points, which informed the decisions we made during the design process and ensured focus was kept when preparing each iteration of the wireframes.
-
Byron has a strong brand identity which needs to be implemented in the design.
-
Byron has a laid-back atmosphere which needs to be reflected in the tone of voice.
-
Ordering and paying need to be quick and efficient.
-
Orders for a table need to be placed at the same time in order to ensure food is served at similar times and in separate courses if necessary.
-
The stress sometimes associated with splitting the bill needs to be addressed.
Designing the App
The design of the app was refined through various rounds of user testing. After each round, user feedback was implemented and we increased the fidelity of the wireframes until we settled on a high-fidelity prototype by the end of the two-week sprint.
​
While working on each iteration of the design, we always kept in mind the key takeaways from our initial research and used the feedback from testing to fine-tune our solution.
Brand Identity
Because Byron has such a strong brand identity, it was of vital importance to implement it in the designs in order to maintain continuity between the website and the app that we were creating, thus ensuring the app was instantly recognisable to Byron’s customers. We also replicated the navigation as much as possible with a view to creating a seamless experience when switching from browsing the menu on the website to the mobile app.
Tone of Voice
The tone of voice is also a major part of a brand’s perceived personality. We needed to make sure we reflected the playful tone of the website to keep in line with the laid-back atmosphere of Byron restaurants.
Table Orders
Traditionally, the front of house staff takes the orders for all the diners sitting at a table so that all the food for the table is later served at similar times. To ensure the orders placed are assigned to a table, we decided to have a QR code in each table so that the customers could check in by scanning it with the app as soon as they were seated.
We also implemented a progress indicator on the bottom right, which has two functions. It lets the user know what table they are checked into, and also gives visual feedback regarding the ordering progress for the whole table. Once all diners place their orders, the outside circle turns green and the order for the whole table is delivered to the kitchen.
Splitting the Bill
The research we did showed us that splitting the bill can be a major pain point for many users. It’s an added hassle at the end of a meal and can even cause friction in certain groups of friends. In order to address this, we decided to implement the concept of sharing a starter or a bottle of wine when ordering instead of sticking to the traditional “splitting the bill” at the end of the meal. This has a friendlier feel to it and avoids the negative connotations some users associate with splitting the bill. When users are placing an order, they can decide if they will share the item with somebody else who is dining with them. The app then calculates the cost per person and adds it to each person’s bill, so when the time comes to pay, the cost has already been split. This also allows each user to have an accurate running total of how much they are spending on the meal. The user can also change who they are sharing a starter or bottle of wine with at any point up until the moment they pay the bill.
