papiee's meatro
UX Case Study
A restaurant reservations booking and meal ordering app
Brand Strategy / Visual Design / UX
Background
Papiee’s Meatro exists as a renowned restaurant and bar chain 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." This case study delves into the user experience design process of creating an app where users can book reservations and order meals.
Sector
Hospitality
UX Designer/Researcher
Client
Papiee's Meatro
Discipline
Restaurant & Bar
Location
Nigeria
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
Challenges
Prior to the implementation of the app, Papiees Meatro faced several challenges in managing reservations and meal orders. These challenges included:
- Manual reservation process: Customers had to call, chat via social media or visit the restaurant to make a reservation, leading to inefficiencies and potential errors.
-
Communication gaps: Miscommunication between the front-of-house staff and the kitchen team often resulted in delayed orders or incorrect meal preparations.
-
Limited customer engagement: The absence of a digital platform prevented the restaurant from engaging with customers effectively and building a loyal customer base.
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 address these challenges, the app was designed with a user-friendly interface and with the following key features in mind:
Seamless Reservation System:
-
The app allows customers to effortlessly make reservations anytime, anywhere, eliminating the need for phone calls or physical visits.
- Customers can view real-time availability and select preferred dates, times, and table sizes.
- Instant confirmation notifications are sent to customers, ensuring they have a hassle-free booking experience.
Effortless Meal Ordering:
- The app enables customers to browse the menu, view detailed descriptions, and place orders at their convenience.
- Special dietary requirements or customization requests can be easily communicated through the app, reducing errors in meal preparation.
In summary, 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 hang out. 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.Add your product description that will be useful for your customers. Add the exclusive properties of your product that will make customers want to buy it. Write your own text and style it in Store properties on Style tab.
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.
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
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.
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 reservations! I would definitely use this app as a go-to for fast, and reliable reservation booking.”
What I learned: While designing the Papiee’s Meatro app, I observed that the first ideas for the app were 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: [email protected]
Instagram: https://www.instagram.com/obodcreative
Let's Meet Outside
© 2023
Address:
63, Agbado Station Road,
Ijaiye Ojokoro,
Lagos,
Nigeria.
Sign up for our exclusive offers.