Have you ever gone to a restaurant only to be disappointed that it was full? Or have you tried making a reservation but just couldn’t reach the restaurant? It certainly happened to me at least a hundred times.
Nowadays people enjoy going out not only to celebrate special occasions but to spend quality time with their loved ones or just treat themselves after a busy day. Or sometimes you just feel like staying in on your couch while enjoying your favorite food.
I believe that eating out or ordering food should be easy and stress-free. That is why I decided to design an application that will allow you to make table reservations and order takeout as easily and quickly as possible.
Butcher’s is a restaurant application that allows you to order food and make and edit your reservations.
I am using a Design Thinking framework that involves 4 phases: empathize, define, ideate, prototype, and test.
I think it gives a very clear understanding of a design process and helps me to set goals for every phase of a design.
The main goal of this phase is to understand the users and the problems they might be facing when it comes to making table reservations and food delivery.
As a UX designer, what do I want to learn from the users? To make the most of my time during this stage, I must determine the clear questions that I need to answer:
- What challenges do users face when trying to make a restaurant reservation or order food?
- What can make their experience easier?
Online survey
To learn more about the users I conducted an online survey with 60 individuals. Here is what I found out about the users:
Interview insights
After identifying who are the potential users I wanted to conduct interviews to learn more about their problems and pain points.
I interviewed 10 people who meet the requirements and asked them questions about their experience with making table reservations and ordering takeout. I asked them questions about:
- How they prefer to make their dinner plans?
- How they feel about using apps for making reservations and food delivery?
- What makes their dining experience better?
- What makes their food delivery experience better?
After analyzing the results I put together the main challenges that most users experience:
Empathy map
I think an empathy map is a useful tool UX designers use to better understand the user and their struggles. It is based on what the user says, does, thinks, and feels.
Now it is time to define the potential users and the problem that I’m trying to solve for them
User personas
I have created user personas to humanize a user group. I think personas build empathy and put a face to the user. They give a clearer idea of who my users really are and what makes the user experience more meaningful.
From the interview results, I created 3 personas that each represent a group of users their needs, and their problems.
Problem statement and hypothesis
In order to identify a problem statement I try asking myself these questions:
- Who is experiencing the problem?
- What are the pain points I’m trying to solve?
- Where is the user when they’re using the product?
- When does the problem occur?
- Why is the problem important?
- How are users reaching their goals by using the product?
And after carefully going over all the information I have gathered, I identified the problem statement:
During this phase, I tried coming up with solutions to the problem. The main thing I have learned during this stage was not to get stuck with the first idea but to try to come up with different solutions.
How might we
I used a How might we (HMW) question method to generate some creative ideas for solving users’ problems.
I tried to stick to these simple rules:
- Start with the problems you’ve uncovered:
2. Avoid suggesting a solution
3. Keep your questions broad
4. Focus on the desired outcome
User stories
I have created these users’ stories to illustrate how the problem might be solved
User flow
Informational Arckitekture
First sketches
I tried to come up with different ideas for the home page and created 5 options
Low-fidelity wireframe
The inspiration behind the design
Creating the app concept and coming up with brand colors were one of my favorite parts of the project.
I decided to go with a butcher restaurant’s aesthetics and I drew inspiration from dark natural colors of wood, meat, steel, and spices.
Design system and color palette
In order to make my design more consistent, I created a sticker sheet that I would use throughout the whole design process.
I chose the shade of orange as an accent color because it is associated with energy and happiness as well as harvest time and abundance. I think it goes well with the app concept.
I decided to pair the bright orange color with neutral tones of grey, black and white. I was inspired by the color palettes you can see in the steak houses: black of cast iron pans, grey steel of chef’s knives, and the white color of salt.
High fidelity
Using the brand colors and typography I created this high-fidelity prototype for each user flow
During this stage, I used Figma’s prototyping tool to create a working prototype of the app. I took extra time to animate buttons, dropdown menu, and checkboxes to make it feel like a real app
Reservation flow
To make your reservation, choose your date and time, make sure you choose the number of people and leave a comment if you have any special requests. After completing the reservation you can save it to your calendar or share it with friends
Delivery flow
Tap on the delivery icon and choose the dish that you want from the menu. You can choose the doneness of the meat and your sides. Confirm your address and payment method and your delivery is on the way!
Profile
You can tap on the profile icon if you want to edit your booking, personal information, or payment and address details. You can also your past order and app setting there
I have conducted unmoderated usability studies remotely and in person.
I’ve focused on two main user flows reservation and delivery.
Here are some scenarios I prompted:
- Let’s say you want to reserve a table for tomorrow for 4 people.
How do you do it? - Let’s say you want to get a dish delivered to your house
How do you do it? - Let’s say you want to change the address of your delivery.
How would you do it?
After analyzing the results from the usability study I gathers the insights:
- People need confirmation of their actions in the app
People want to see visual confirmation of their actions on the app to be sure that the action they wanted to do is completed
2. People need more visual cues
Since people might not always be aware of the app’s functions and features, I need to provide better visual cues on which elements are clickable or scrollable
3. People need to see active orders
People want to see and track their active orders after returning to the home page
As our research has shown, a lot of people enjoy eating out and spending their time with loved ones, and going out for dinner is a perfect way to do so. This project showed that having the reservation and delivery app makes this experience easy and stress-free, and more enjoyable. You can make your reservation just in a few clicks and you can change it later if your plans change. And whenever you feel like staying at home, there is a delivery option.
Future roadmap
I am planning on making future iterations based on the data from usability studies. I have a few new features in mind:
Invaluable lessons
This was my first project ever and this case study taught me more than I could ever learn just by reading or watching videos about UX design.
I have learned:
- the importance of user research and all the data that help you make the design better for your users;
- having a design system can save me a lot of time and headaches;
- I don’t need to reinvent the wheel and instead, I can use patterns familiar to most users ;
- I have to make sure my product is accessible to different groups of users.
Read the full article here
