top of page
1 Web - Home.png
Monitor-Free-Download-PNG.png
Mobile - Home.png
bbf65fa521c4a105d81d1422a702e0f8.png

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

Final poduct

Homepage

1 Web - Home.png

Category Selection

2 Web - Restaurant Type Listing.png

Restaurant Page

3 Web - Restaurant selected – date selected.png

Restaurant Page - Date Selection 

4 Web - Restaurant selected – date selected-1.png

Menu Selection with Timing

6 Web - Meal Order – filled.png

Check Out

7 Web - checkout – Filled.png
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

linkedin-sales-solutions-pAtA8xe_iVM-unsplash.jpg

         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.

User Journey Map template - filled.pptx (1).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.

Untitled presentation (1).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

20220905_154722.jpg
20220905_154722.jpg
20220905_154739.jpg
20220905_154739.jpg

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

20220905_154752.jpg
20220905_165531.jpg

         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.

Screen Shot 2022-09-12 at 2.02.12 PM.png

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

noun-guest-4750441.png

IT Developer

36 years old

Female

Vancouver, BC

noun-guest-4750441.png

Mechanical Engineer

40 years old

Male

Vancouver, BC

noun-guest-4750441.png

Freelancer

35 years old

Female

Toronto, ON

noun-guest-4750441.png

Retired

61 years old

Male

Tehran, IR

noun-guest-4750441.png

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?

Booking app  1_edited.jpg

         Refining the Design

02- Desktop website - restaurant selection.png
3 Web - Restaurant selected – date selected.png

......

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

02- Desktop website - restaurant booking3.png
7 Web - checkout – Filled.png

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. 

01- Desktop website - homepage.png
iPhone 13, 12 Pro – 1.png
Brain
#87BCBF
Soul
#D97D54
Body
#324755
1 Web - Home.png
Mobile - Home.png
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.

Screen Shot 2022-09-12 at 2.13.30 PM.png

         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

3#

bottom of page