About the project
Objective:
Design a food menu app for a modern restaurant.
My Role:
UX Designer designing an app for a restaurant from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Duration:
From May 2021 to August 2021.
The Client:
Veintisiete is a modern restaurant located in Lyon, France. They strive to be an accessible restaurant for people with different dietary needs. They offer high-end food at an accessible price.
Veintisiete targets costumers between ages 18 and 65 that enjoy going out to eat and trying different flavours.
The Problem:
People’s different dietary needs are not always thought on in a restaurant’s menu.
The Goal:
Design an app for Veintisiete that allows users to easily customize their dishes by providing diverse options for the ingredients used.
User Research
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults that enjoy eating out in restaurants and trying new food. During research, it was revealed that this user group also has different dietary needs that are not always met in restaurants’ menus, which ends up being very frustrating as they cannot always eat the dishes they would like.
Personas and User Journeys were created to fully understand the users, and through these it was clear that having a special app for Ventisiete’s menu would be very beneficial and helpful.
Pain Points:
- Menus do not always show the contents/ingredients of a dish, which makes it difficult for people with different dietary needs to find what they can actually eat.
- Most restaurants do not offer dishes adapted to different diets, and sometimes they do not even pay attention to specific requests. Most of the time, it is also not possible for costumers to customize a dish to fit their needs.
Starting the Design
Paper Wireframes:
Starting the design process by creating paper wireframes ensured that a lot of different possibilities were thought about, and only the ones that solved users’ pain points in the best way made it into the digital wireframes.
Digital Wireframes:
Digital wireframes were created based on paper wireframes, findings from the user research, and feedback from other designers.
A key user need to address was the easy customization of dishes so all the food could be adapted to different dietary needs. This way, the user can choose between different ingredients in a dish and easily add the selection to their order.
After all the digital wireframes were created, I connected them to make a low-fidelity prototype that would allow users to go through the different menus, select their dishes, customize them and place an order. This prototype was later used in a usability study.
Usability Studies
Two different rounds of Usability Studies were done. The first one was done based on the low-fidelity prototype and helped to identify what aspects of the app worked and which ones could be improved. After this, the mockups and high-fidelity prototype were created, which allowed me to do the second usability study and further develop and ameliorate the app.
The first usability study revealed that the users did not understand what the “Next Menu” button did. This is why, for the mockups, the text was changed to be more self-explanatory.
The second usability study revealed that the navigation bar was also necessary in the home screen, specially after the flow was complete (the order was placed) and people wanted to add something else to their command.
Finally, clearer user flows and customization options for the dishes were done for the final high-fidelity prototype.
Key Mockups
Accesibility Considerations
Diets
The app is mindful of people with different diets and allows them to adapt their favourite meals in a restaurant to fit their needs or desires by customizing the dishes.
languages
The settings in the app can be changed to different languages in order to provide access to people that do not speak English or French.
Screen reader
The idea of the app is that it can be used with a screen reader so that people with visual disabilities can access it.
images
Images from all the dishes are shown to help users understand what they are ordering.
Takeaways
Impact:
The app makes users feel heard and understood by giving them the possibility to customize the dishes they want to eat and make them appropriate for their needs.
Quote from another designer with special dietary needs: “The app looks incredible. Both me and my husband loved it.”
What I learned:
While designing Veintisiete’s app, I started learning about the whole UX design process, from user research up to the high-fidelity prototype and the usability studies that make the whole thing worth creating. I learned how to use Figma, and that accessibility is one of the most important things in UX design. I also learned that the user must always be front and centre of your designs to make sure whatever you are creating actually makes sense.
