Reimagining the mobile booking and payment experience
Byron Burger is a gourmet burger chain in London serving delicious burgers, craft beers, and extra-thick shakes since 2007. With the growing popularity of mobile payment and ordering systems, they see an opportunity to leverage existing customer habits by introducing a mobile app that provides more flexibility and control in light of social distancing.
Since there’s a lot of potential functionality, Byron Burger wanted us to prioritize features based on research findings.
In light of Covid-19, users find it difficult to easily check seating availability and make reservations at Byron Burger based on their preferences. Additionally, users find the bill-splitting process tedious and complicated, especially when eating out with multiple people.
High-fidelity prototypes of a tailored mobile app to handle booking and payment, thereby providing customers with flexibility and control in light of social distancing.
We leveraged the Double Diamond Design Process to take a deep dive into users’ pain points and develop the optimal solution for the problem. In addition, we utilized a handful of UX, Interaction, and Visual design methodologies.
.png)
We started off by conducting generative research to develop a deeper understanding of consumers' experiences, behaviors, and sentiments with regards to dining in restaurants.
First, I led the creation of a screener survey to gain an understanding of diners’ restaurant dining experiences and evaluate potential research participants. I specifically included questions targeting diners’ reservation preferences and preferred payment methods, ensuring we’d grasp a holistic understanding of areas the client hypothesized would be important.
We received 63 responses to the screener and selected 15 participants to conduct in-depth interviews (IDIs) with. Leveraging feedback from both the screener and the IDIs, we we gained deeper insights into the motivations and behaviors of typical diners.
.png)
Mindful of these insights, we mapped out the average user’s experience to visualize and identify key pain points - which were crucial to setting the stage during Define.
With these insights in tow, we set out to understand how others stacked up. First, we analyzed a variety of direct competitors and entertainment analogues to understand the different digital experiences that competitors and leading entertainment organizations were delivering.
Then, I took the lead in conducting a feature analysis to map out what competitors and analogues were offering. While they have many things in common, the ability to book a table and split the bill are not functions that many offer.
While many competitors excelled at delivering excellent browsing experiences through native menus and offered convenient out-of-store options like click and collect, they lacked two key features that diners desired: the ability to book a table in advance and help with splitting the bill.
The combination of insights from our user research and my competitive feature analysis led to me the following hypothesis:
The ability to book a table in advance and help with splitting the bill are potential gaps in the market that Byron Burger can leverage to differentiate their app offering.
Taking our research findings, we began creating a persona, a UX tool rooted in research that helps represent the target user, ensuring we’re designing for them and keeping their needs top of mind throughout the design process. Personas are a great way to help build empathy and humanize users by putting ourselves in their shoes!
Without further ado, meet Sam!
Taking it one step further, I wanted to bring Sam to life by creating an empathy map to demonstrate her emotional experience in regards to dining out at restaurants.
Based on our research insights and Byron Burger’s wishlist from the brief, there were 2 key problems that needed to be addressed:
.png)
To best demonstrate our design process, I’ll be focusing on the payment flow moving forward as we found this part of the process more challenging.
If you’re curious to see how the booking flow unfolds, please check out the full case study here!
To frame our ideation process and launch a purposeful brainstorming session, we created 3 How Might We (HMW) statements.
Considering Sam’s key pain point, we selected the following HMW to proceed with in the ideation phase:
We put on our creative thinking hats and conducted a series of Design Studios to creatively explore our HMW statement by sketching out potential solutions.
Using the dot voting method, we narrowed down alternatives and converged to the following set of key concepts / ideas to prioritize in the next phase.
To put ourselves in Sam’s shoes, we mapped out a robust user flow of what her experience would be like using our app. In alignment with solving Sam’s pain points and helping Byron Burger differentiate themselves, we’ll focus on the Payment Flow.
.png)
To realize our ideas, we started by sketching out paper prototypes.
Using Marvel, we created clickable prototypes with which we conducted usability tests. Here comes one of my favorite parts of the design process — feedback and iterations.
We conducted usability tests with 8 users, and here’s how our paper prototypes faired…
Using the ideas and insights we gathered, we went onto creating our digital prototypes, starting with low-fidelity, and iterating through to mid- and high-fidelity prototypes. For each level of fidelity, we conducted 8 usability tests to facilitate an iterative feedback loop and meet users’ needs.
Upon testing, we quickly realized that…
After proposing an alternative option to my team, it was time to get to work! We divvied up the work ahead of us and I focused on recreating the payment flow with the help of another teammate.
After discussing it with my team, we agreed to remove the drag-to-allocate function and instead, opt for a multi-selection allocation page where users could click to select the items they had, all on one screen.
I felt this would significantly improve the interactive experience of users, which thankfully, was validated during our next round of testing. With our next prototype, feedback took a 180° turn and it was clear that usability had improved significantly.
To further streamline the payment flow, we removed the individual item allocation page and the slider feature for percentage splits.As one user mentioned:
“If I split an order of fries with a friend, I’m not going to be so particular about having 36% of the fries…”
The real reason you read this far...
To facilitate a seamless transfer of information and enable Byron Burger to build this out further, we created the comprehensive style guide below. It serves as the single point of truth for all the design elements we used in developing our high-fidelity prototype.
Sit back, relax, and enjoy a burger — the extra milkshake is on me! Just kidding. As much as I’d love to indulge, there’s always room for improvement and more to be done.
These two weeks have shown me that there’s a massive opportunity in the restaurant industry to optimize the end-to-end dining experience.
Working in a team, sometimes it’s easy to get lost in the discussion over feature prioritization or button sizing, especially because everyone has a different background / level of experience. However, having a sense of trust fosters innovation and efficiency, both of which will lead to optimal solutions. Therefore, it’s important to trust in your team to divvy up the work, and then regroup to provide feedback, bounce ideas, and iterate!
As designers, sometimes it’s hard not to have tunnel vision, especially after putting in the work and creating what we feel is right for users. Although that may be the case, this project really validated that trusting the process and listening to users is the way to go. When we realize that one of our key features wasn’t clicking with users, I learned that it’s better to take a step back and go a different route, because ultimately, the outcome will be all the better for it.
