ORANGE
UX/UI Designer
Created a restaurant booking platform to let users pre-organize their meetings and parties through the application, so that during covid, the business meeting could be organized easier while the offices were closed
Project Summary
Due to my research and chat with people, I figured out that during Covid, the need for a working office becomes less. So most of the meetings would be held in restaurants or booked meeting rooms. On occasions such as business meetings, pre-organized meetings, same as office meetings, are becoming popular among employers. Also, on other occasions, such as bigger parties in restaurants managing all orders in advance could decrease the chaotic ordering issues there. Hence, this product is based on a reservation platform for restaurants with an option to order and organize the timing of all items in advance.
Team
Solo Project, UI/UX Designer
Duration
20 days
Tools
Google XD
Google Sheets
Indesign
My Role & Responsibilities
User research and competitive research
Hand sketch and digital wireframes ideating
Usability studies
Lo-Fi & Hi-Fi prototypes + Iteration
Interaction design
Accessibility design
Responsive design for web and mobile
Don't want to follow the Design Thinking Process?
Project Goal
Design a restaurant booking platform to let the user pre-order the meal and organize the party in advance
Identifying the Problem
During Covid, offices were mostly closed; instead, people started working remotely from home. On the other hand, due to some business meetings, the clients had to keep their office open to use the area for meetings or parties which was not prepared to be online. This idea was not affordable. Also, they needed a private and secure area to hold their meetings. So they decided to choose a restaurant, but it was not satisfied them for some reasons mentioned in the following.
Pain Points
#1
Distraction
Having meetings outside the office needs safety and no distraction, which restaurant can’t always be prepared for these occasions
Exclusivity
Not all restaurants provide a pre-organized service for the customer
#2
Time Wasting
Going to a popular restaurant needs waiting in line to find seats and to get the meal ready
#3
As the solution,
The Orange Website gives the option to the user to plan for a party in the restaurants through the specific feature in the app in advance;
And allows the target user to hold a business meeting or a party in a restaurant instead of the office meeting room
Homepage
Category Selection
Restaurant Page
Restaurant Page - Date Selection
Menu Selection with Timing
Check Out
Indicators of success
Considering the pain points and the problems identified above, the user needs a private space with everything pre-organized to host a meeting, while their own office meeting room is not affordable anymore. The Orange Website gives the option to the user to plan for a party in the restaurant instead of the office meeting room. This would increase the satisfaction of similar users by planning more affordable parties in an easier way and having a better experience in outdoor meetings to keep their business alive.
Defining a Persona
Based on the interview and chats with some of the business owners, one of their struggles during covid was keeping their offices open for some business gatherings. Since it was hard to afford rental expenses, most of them decided to close their office and find another way for their meetings. Akbar is one of the target users in that situation.
Problem statements
Akbar is a dealer who needs a pre-organized meeting in the restaurant which is managed by an app because He needs to maintain his class for his clients to prepare a great meeting to gain more benefits.
Goals
- I like to choose my meeting table in advance with a quiet surrounding and being sure that no one can hear our chat
- I like to organize and pay for everything needed for my meeting like booking
- Having no time limitation to use the table
Frustrations
- It interrpts my meeting when the waiters ask for any stuffs while we are talking, due to the prior unorganized meal plan.
- Its annoying that I found my reserved table is not what I preferred for my meeting when I got to the restaurant before the meeting.
User Journey Map
Since this was a new app with a new target persona, I had to document the steps that the target persona went through to achieve their goal. So, I needed a User journey map to help me understand the experience of the user through the process and identify the greatest pain point of it.
I conducted the user journey map based on the conversation that I had with some of the target users similar to my persona Hence, my application could be the solution to their pain point.
.jpg)
Design Process
Information Architecture
My goal is to create different ways for the user to let them decide how to complete the task. So through different flows such as search bar, top-rated, and categories to find their best choice.
The main website structure is based on a hierarchical system, but a separate sequence structure is designed for booking steps after selecting the restaurant.
.jpg)
Wireframes for web and mobile screens
As a responsive website, I applied the graceful degradation approach in concept and creating the wireframes. In this stage, first, I ideated some concepts for the homepage and chose the preferences that give the user the best navigation flow.
The mobile screen was also designed based on the homepage layout of the desktop screen.
Paper Wireframes
search bar in the homepage as one of the main flows
header with navigation bar and profile, easy way to access other parts
Providing various restaurant categories is another way of navigation flow
having the idea of search bar in other pages
A part as a top 5 or best recent based on location is a quick way to have an idea of the area
A hero image with a related content
The footer part with a simple design and the logo
Digital Wireframes
After sketching the wireframe, the low-fidelity prototype was prepared to navigate the Happy Path through one of the options provided for the user to reserve a table and pre-order in a restaurant.
Usability Study
Usability Testing on Lo-Fi Prototype
After making the idea tangible idea of the website layout, unmoderated interviews were conducted among five users in order to get feedback in the early stage.
Participants
IT Developer
36 years old
Female
Vancouver, BC
Mechanical Engineer
40 years old
Male
Vancouver, BC
Freelancer
35 years old
Female
Toronto, ON
Retired
61 years old
Male
Tehran, IR
Mechanical Engineer
39 years old
Male
San Diego, CA
Takeaways
After the interviews, I categorized the feedback in an affinity map and implemented them by their priority for the first mockup in the prototype to make a better user experience.
1#
Date Selection
Users need to get the date selected confirmation and then select the table with options provided
UX Writing
Users prefer to navigate easily by simple and common words for call to action buttons
2#
Checkout Policy
Users need a separate part to understand what is the need for asking about card number and how they are charged
3#
Time Managing
Users need have a management on what time each meal and part of the party is serving so no need to be asked there
4#
HMW make the scheduling process easier?
HMW provide safer options for payment?
HMW replace better wording to navigate better?
HMW Keep the potential users?
HMW add all the options needed for the users?
Refining the Design
......
After Usability study, I figured out that asking the date and time at the beginning as the popular way in booking process so I don't have to make it complicated by prioritizing the spot and table
Asking for card information needs a terms & Policy part to let the user know how they might be charged in any kind of issues. So it will appear as a pop up in the page
...........
Mockup
Digital Wireframes
After implementing the feedback from the interview based on the priorities in the first launch, the high-fidelity prototype was created with the defined design system following the main flow to reserve a seat in a restaurant.
Brain
#87BCBF
Soul
#D97D54
Body
#324755
Hi-Fi Prototype
In the next step, the main flow of the Happy Path was deigned in the high fidelity prototype, through one of the restaurant types and continuing the sequential structure to finalize the booking.
Implementation
Focusing on the user’s need is the most important thing in every design. In my case, I learned how to engage user in the design to get the feedback in order to make the experience better for the user
Impact
The target users mentioned that they will use the platform for their parties in the restaurant to make it smoother instead of complicated order list and waiting lines
Accessibility Considerations
#1
The colors have enough contrasts to be suitable for people with low visions or blind color
#2
The font size are big enough with following hierarchy structure
#3
All information have alt text to be be used for screen readers
Lessons Learned
1#
Constraints to Innovation
making limitations and constraints to a chance to innovate was a great lesson during Covid
Research as no. One
Every design decision needs a logical reasoning, that can be a secondary research to 1 on 1 interview
2#
I Could've Done Better
1#
More Usability Study
The more I could conduct user insight in every step of the design thinking, the more I could discover the pain points and the solution to them
Strong Competitive Audit
Having more data of other related platforms could make the based research stronger
2#
Target User Validation
I could continue interviewing with potential users after the UI design to get more feedback on the final mockup