The Eatery

Role: UI/UX design, Development, Testing

Timeline: August-October 2022

Web app for browsing restaurant menus and making reservations, enhancing user experience in choosing and booking.

Problem Statement

The Eatery website's current interface presents usability challenges for users searching for menus, making reservations, or completing online orders. This lack of clarity and efficiency leads to frustration, cart abandonment, and potentially missed business opportunities for Eatery.

Some Features:

Table Reservation

Menu Available

Food Ordering

Chef Details

Offers & Discounts

Newsletter Subscription

Technology Stack

Frontend - HTML, CSS, Javascript

Middleware Connection - NodeJS, Express

Database - MongoDB

The Background

Eatery is a restaurant targeting busy professionals seeking a convenient way to browse menus, view promotions, and book reservations online. Their website allows users to explore menus, check discounts, and book tables while considering restaurant capacity. Confirmed reservations are emailed, and a chatbot assists with bookings, cancellations, and feedback.

Plan of Improvement

Take frequent user feedback after each iteration or when adding/updating features. (Google form link: https://forms.gle/kcCU8xnb3fkfrQZB9 )
Add an option to update previously reserved bookings in the restaurant.
Improve user flow of the website by providing straightforward navigation to various components.
Improve small talk in the chatbot and give a clear call to action in chatbot functionality.
Improve the UI & UX of the reservations page.

Research

The initial phase involved defining project goals and dividing tasks. We conducted user interviews to understand user needs and pain points related to reservations and website navigation. Additionally, we employed heatmap analytics to visualize user interaction patterns with the website's features (navigation, newsletter, chatbots, reservations). This helped identify areas of high engagement and sections with low user traffic.

To gain deeper insights into user experience, we incorporated user emotion and physiological data sensors during usability testing. By analyzing this data, we could understand user frustration levels and areas causing difficulty while navigating the reservation process.

We employed a combination of manual and automated data collection methods. For user interviews, data was collected manually through note-taking and recordings. Heatmap data analysis was automated, while user sensor data required some assisted analysis to interpret emotional and physiological responses. By comparing data from various sources, we were able to triangulate our findings and create a holistic picture of the user experience.

User Interviews

Questions Asked to Users:-

Form Link: https://forms.gle/jjTb9jLcHajUwMcE8

Insights

Metrics To Evaluate Usability:

Effectiveness: It refers to how easily a user can complete a specific task and the number of times, on average, a user fails or encounters an error in a task.

Seamless transfer of user navigation from the home page to the table reservation window
Users can book/cancel reservations in multiple ways through the reservation page or chatbot. Users can easily get discounts and subscribe to newsletters with minimal effort and errors.

Efficiency refers to the average time a user takes to complete a task and how the system supports the user in carrying out their tasks.

Time taken by users to log/sign up to the website
Time taken by users to subscribe to the newsletter or leave feedback
How quickly and easily can the participants book a table for the time & date of their choice?
How easily can the participants detect whether they can or cannot make a reservation at a particular date & time?
How easily does the system direct & assist the user in cases of errors (Error 404 pages, invalid entries, authentication)

Learnability refers to how easy a website is to learn to use.

Any hassle to use and navigate through the website
Interaction with and having a confirmation for the booking through checking of records of the chatbot

Satisfaction Level: It refers to the subjective thoughts of the user regarding their attitude level of comfort (any moments of confusion or frustration).

Participants’ satisfaction with the overall website functionalities
The number of errors encountered during any task (login/signup, newsletter subscription, filling user details for reservation, etc).

Consistency - The user experience must be consistent across the board for the product to be successful. To achieve this, the interaction design must be uniform across all icons regarding appearance and functionality. All features must be the same to allow the user to become accustomed to the interface as a whole.

The text, images, and links provided are to be formatted uniformly.

Concepts

Design

Visual Systems

Colors

Orange, White, and Grey-Black

Typography

Lobster and Source Sans

Testing

Sensors used:

EDA - Electrodermal Activity can accurately measure the electrical properties of the skin with changes. EDA responses are tiny changes in the sweat level of our skin that may be due to stress or other factors such as movement, noise, or temperature change.
Respiration - Respiration rate refers to the measurement of a person’s breathing over a period of time. It records the movement of the diaphragm, which moves rhythmically while breathing. It is subject to different physiological conditions like physical exertion, stress, and temperature.
Heart Rate - The number of times the heart beats within a certain time period, usually a minute. The heart rate can be felt at the wrist, side of the neck, back of the knees, top of the foot, groin, and other places in the body where an artery is close to the skin.

These recordings will allow us to perform physiological measurements such as anxiety, negative emotions, & indications of stress. It is used to evaluate the quality of the user experience and help us measure the impact of UX changes.

Data Collection:

There were two volunteers for the purpose of data collection. These volunteers were required to complete three tasks of varying difficulty:

Easy Task: Sign up/log in to the website

Medium Task: Use the chatbot feature to reserve a table or cancel an existing reservation in the restaurant

Hard Task: Book reservations on the website, mentioning the date & time of reservation, number of guests, and any special occasion.

These volunteers were made to test the application in different scenarios/circumstances. These scenarios were:

Moderately controlled environment (without interference):

Process: The user was asked to complete the above three tasks in the respective order. The examiner/director did not interfere with the process in this scenario.

Results: We see that in this environment, without interference, the user is able to navigate our interface & the various sections. However, the user did struggle to identify the call to action while interacting with the chatbot.

Highly controlled environment (with interference):

Process: The user was asked to complete the above three tasks in the respective order. However, in this scenario, the examiner/director did interfere with the process and asked a few questions before & after each task to get more insights from the user.

Questions Asked:

Which do you prefer to sign in to websites - Google, Facebook, or any other?
How often do you forget your passwords?
How did you find the conversation with the chatbot?
How has your experience of the website been so far?
Which do you prefer, the chatbot or the manual way of booking reservations?

Results:

We see that in this environment with interference, the user experienced slightly more stimulus due to the questions & input asked. The presence of the examiner seemed to cause some form of intimidation to the user. The questions were asked to grasp real-time feedback from the user upon the completion of various tasks and get to know how they feel about various sections & features of the website.

Limitations

To evaluate the user experience, we first have to host our website to get the user’s feedback. So for that, we hosted our website on Heroku, but unfortunately, they recently started the paid services for hosting the website. So, we searched for alternative free sources to host our website. However, to get the data from the Biopac sensors, we are limited to only two users, which is not enough to evaluate the user experience for any application.

Future Roadmap

Yes, the use of online services has amazing potential in the coming years, and including that in our systems now makes us future-proof. It also helps in consistent table booking and reservation. The chatbot conversation flow needs to be improved so that users can directly book/cancel reservations using the chatbot with minimal ambiguity.

Thank you

Find me

Instagram
Youtube