The Challenges
Despite the growing popularity of plant-based diets, there still aren't enough places offering menu variety for those preferences.
Users want to explore new tastes and cultures, not just when they're traveling.
Planning outings, especially for groups, is challenging, and making reservations often takes too much time and effort.
The Solutions
Creation of a menu designed to guide users through available vegan and vegetarian options.
Clear information architecture that enhances user flow.
A simple table reservation system that allows users to book a table for their planned visit time.
The growing popularity of online reservations
The digital wave continues to gain momentum, with nearly half of bookings (48%) processed online. This reflects the convenience and ease technology offers to modern-day diners.
The problem
Considering the growing popularity of online reservations and the rapidly evolving coffee market, more and more people expect menu diversity and options that cater to different dietary preferences (e.g., vegan, vegetarian).
How to approach menu visualizations and reservations in the food industry?
I analyzed three apps and websites, examining both the table reservation systems and menu visualizations. The companies I researched were Café Rouge, OpenTable, and The French Café.
The good
Most websites clearly distinguish between vegan and vegetarian options on their menus. For example, Café Rouge has added filters for various dietary preferences to its menu.
The bad
Reservation processes seem overcomplicated, multiple data points are required, which can scare off potential customers, and the flow isn’t as intuitive as it could be.
In some cases, such as Café Rouge, users can’t see a summary of the entire booking during the reservation process, which could confuse them and lead them to abandon the process.
What do people say?
I conducted a quick survey on Instagram among frequent café and restaurant customers to gain insights into the factors that motivate them to choose specific establishments. The surveyed group paid the most attention to whether the menu aligned with their dietary preferences. This indicates that customers need to be quickly informed about whether they can find options that suit their tastes. The results suggest that if users do not find menu items that meet their dietary needs, they may choose not to visit the restaurant or café.
39 Participants
Who is Café et pâtisserie’s most common client?
Based on my previous research findings, I created a persona for a Café and pâtisserie customer: the Vegan Enthusiast. These individuals have strict dietary preferences but also enjoy exploring new cafés and restaurants. However, they often worry about whether they will find suitable options on the menus of new places they visit. This concern is usually their main deciding factor when choosing a venue. As busy adults living in a fast-paced city, they don't have much time to check everything and need quick and easy access to essential information.They also enjoy going out with friends or colleagues and planning larger gatherings. To save time, they prefer making online reservations for a suitable date.
Where do we want users to go, and how can we help them?
To outline all the necessary functionality, I created a flow diagram of the main tasks that the user can perform. One of the flows is shown below. Failure states were also created but are not displayed due to space constraints.
The main conversion goal of the Café et Pâtisserie website is table reservation. With that in mind, I made it accessible from every page.
Main user flow
First draft and ideas
Once the flow diagram was established, I started creating low-fidelity wireframes of the main flows for mobile and desktop resolutions. I focused mainly on clear navigation, an easy-to-scan menu, and a simple reservation process.
Let's put it all together.
I connected my high-fidelity designs into a clickable prototype. This will allow me to test the website with the first group of users to see if my solution is usable and user-friendly.
Check out the prototype yourself!
Does it all work? Prototype validation
I validated my prototype with three users. Each was given a subset of the prototype dedicated to familiarizing themselves with the Café et Pâtisserie menu. They were also tasked with making a table reservation via the website. I wanted to ensure that the website navigation was clear and that the menu was easy to navigate. It was important for users to easily locate vegan and vegetarian options. Additionally, I wanted to test the table reservation process. I included two methods for selecting the date of the reservation to see which one users preferred more.
Study Goals
Evaluation of whether the established information architecture is understandable and easy to follow.
Testing the menu design: determining if users can find what they are looking for and if they understand how it’s structured and what it contains.
Testing the checkout and table reservation process flow.
Study results
Sixty-six percent of tested users were not able to identify all vegan menu items on the list. There were also issues with the names of some French dishes that were not understandable. This means that the proposed design did not provide enough direction and information for users to understand which items are vegan, nor did it guide them through French dishes and unfamiliar items on the menu.
Prototype Update concept
Due to time constraints, I wasn't able to run a second usability study on the updated prototype. However, I updated it by adding more details to the menu subpage. I created a consistent designation for vegan and vegetarian items and converted each menu item into a chevron list with more details. This way, if users don't know a dish by name, they can become familiar with a short description of it.
Project Overview
During the project, I managed to evaluate the market, conduct a quick user survey, and perform a mini usability study. Based on the generated user flow, I created a set of low-fidelity wireframes and developed them into high-fidelity, visually appealing UI designs supported by a design system.
Metrics
As this project was created for portfolio purposes, I won't be able to measure the success of my design. However, if it were developed as an actual product, I would measure the following:
Conversion Rate: The percentage of users who booked a table at Café et Pâtisserie. It's important to note that some website visitors might not reserve a table online but still come as guests to the Café et Pâtisserie.
Engagement Rate and Exit Rate: This is especially relevant for the menu subpage, as it contains the largest amount of information. Analyzing this data could help determine whether users engage with elements on this page and how many exit after visiting it. This information would be valuable for improving the overall user experience.
My learnings
My main takeaway is that understanding potential users, competition, and the market is key to creating a product that fits the needs of today's world. An important lesson was that every project can always be a work in progress. There is always room to make designs more usable and better for users, which also aligns with business goals. This experience has highlighted the importance of testing designs and continuously seeking ways to improve the overall experience with a brand and its products.
