UX Case Study: Restaurant Reservations Booking and Food Ordering App- Papiee’s Meatro
Papiee’s Meatro exists as a Grill restaurant and bar with several physical locations in Lagos and Abuja, Nigeria. Although they have a good social media presence, their website is built on the Google business workspace platform. The brand prides itself as “The Chillest Bar & Grill in Lagos” and I can’t doubt that in any way yet. I have not come across their mobile app and for this reason, I decided to make one as my first UX case study.
UX Designer, Simeon Obodozie
Lagos, Nigeria
Project Overview
As part of the Google UX Design Certificate programme, I was given the task to create a mobile app design using any prompt from- Sharpen. I decided to design a restaurant app where users can book reservations and order meals referencing an already existing restaurant.
Papiee’s Meatro is a regional restaurant and bar located in the suburbs of a metropolitan area. Target customers are commuters and workers who lack the time or ability to prepare a family dinner or those who need to meet with people outside of their homes.
Role & Responsibility
As the only designer working on this mobile app, I doubled as the UX designer and Researcher. I designed this project from conception to delivery. My primary responsibilities were conducting interviews, developing paper and digital wireframes, low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Duration
October 2022 — March 2023
Problem
Busy workers and students want to be able to make reservations, place orders while in a restaurant location and away from it, and also send out a meal with a customized message, easily and quickly.
Goal
To create a restaurant/bar app to help users make reservations without having to log in, place orders while in a restaurant location or away from it, and also send out a meal with a customized message so that all activities can be done easily and quickly.
User Research
Summary
I conducted interviews and determined the pain points and needs of end users. A primary user group identified through research was working adults who do not have the time nor skill to make their meals and who also want to be productive at work.
The user group for Papiee’s Meatro was thought to be young students looking for a place to hangout. This research has revealed that time and productivity are huge factors but surprisingly some people want a restaurant that can provide them with a means of expressing their emotions to loved ones.
Pain Points
Time: Too busy to spend time planning or preparing meals.
Productivity: A place that aids productivity and inspiration.
Speed: Seamless platform to choose meals and place orders and reservations.
Care: Send out a meal with a custom message from the heart.
Research methods
The research method applied was the Primary research method where I conducted the research myself. Information was collected from direct interactions with users through interviews, surveys, and usability studies. I also applied the Qualitative research method by collecting information through observations and conversations with the users to understand their needs and aims and to answer questions like “why” or “how?”
Personas
Based on early research, two personas were created to represent groups of users with similar characteristics that I found through my research.
Based on the personas, user stories were created to inspire and inform design decisions.
User Journey Maps
User journeys were created off the personas and user journey. A user journey shows the series of actions which the user takes to achieve their goal and how they felt while doing them.
Problem statements were drafted by comparing the user pain points and user stories.
Competitive audit
To better understand the landscape regarding direct and indirect competitors, I conducted a competitive audit where I could compare strengths, weaknesses, and gaps from different existing products. Finding and comprehending where our competitors stand, I could outline a competitive report stating opportunities for our product to stand out.
User Flow
Designing an efficient product requires a complete understanding of users and their needs. By understanding the users’ needs, I could predict users’ most preferred actions. With this in mind, I envisioned a path in which the user can effectively move through the app, this is known as the user flow.
Storyboard
Storyboards were created to visually describe the user’s experience with the product. Both the Big picture storyboard and the Close-up storyboard were explored.
Starting the Design
Paper Wireframes
Taking the time to draft iterations of each app screen on paper I ensured that the elements that made it to the digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy reservation booking process to help users save time.
Transition to Digital Wireframes & Prototype
Learning to use Figma as the initial design phase continued, I ensured that every screen design was based on feedback and findings from user research considering the hierarchy of information on each screen and the Gestalt principles. Iterations were made on wireframes based on user feedback after conducting and re-conducting unmoderated usability studies on every lo-fi wireframe iteration and recording findings from each session.
A key improvement was made after the usability study. The initial design had no way of adding multiple orders except when the user reached the order summary/checkout page “D”. In the improved design, users could add multiple orders right from the menu page as shown below.
The affinity diagram is a method of synthesizing that organizes data into groups with common themes or relationships. Observations were collected based on specific quotes by research participants and then grouped according to tone, satisfaction, usefulness and ease of onboarding.
View the low-fidelity prototype here
Redefining the Design
High-Fidelity Mockup
A mockup becomes a high-fidelity prototype once interactions, transitions, or animations are added with consideration to colour, typography, iconography, copy, and the general look and feel of the product. With clickable menus and buttons, hi-fi prototypes provide a visceral sense of the user experience. This allows teams to tweak usability before final design approvals, testing, and hand-off to the developers.
While creating the hi-fi mockup for Papiee’s Meatro app prototype, I considered visual elements like hierarchy, emphasis and scale. The Gestalt Principles as always, played a huge role in my design.
A small design system was made using Figma to guide the use of design elements and promote uniformity and continuity across the app.
Usability Study 2
After creating the initial set of hi-fi mockups, the second usability study was conducted, and I was able to get another set of important insights to iterate on the design:
- Users wanted to see a full calendar for accurate date selection.
- Users wanted to add the same food item multiple times.
View the high-fidelity prototype here
Accessibility considerations
- Consistency was fundamental in keeping the app user-friendly and accessible. Having a layout that changes in element orientation and colour would make it hard for users to know how to navigate.
- Good contrast is in general a best practice for all users, especially on a mobile device where lighting may vary. A good contrast ensures that text remains legible for low-vision and fully-sighted users alike.
- Gestures were kept as simple as possible.
Going Forward
Takeaways
Impact: The app makes users feel like Papiee’s Meatro thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to book reservation! I would definitely use this app as a go-to for fast, and reliable reservations booking.”
What I learned: While designing the Papiee’s Meatro app, I observed that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
- Conduct more usability studies to validate whether the pain points users experienced have been effectively addressed.
- Conduct more user research to determine any new areas of need.
- Include more accessibility functions.
- Include the payment and delivery pages.
Thank you for your time in reviewing my work on the Papiee’s Meatro app.
If you’d like to see more or get in touch, my contact information is provided below:
Email: obodozie.simeon@gmail.com
Website: https://www.obodcreative.com
Instagram: https://www.instagram.com/obodcreative/
