eztravel

UX Design

This was a capstone project as an Associate UXUI designer trainee with NTUC LearningHub. The objective for this project was to design a travel booking service for business travellers. Users should be able to book their flights, hotels and cabs in one website.

My Role

UX Researcher, UXUI Designer

Responsibilities

Conducting interviews, paper & digital wireframing, low & hifi mocks, conducting usability studies, iterating on designs.

Duration

May to June 2022

Tools

Adobe XD

Project overview

A one-stop travel booking website

eztravel is a (fictional) travel booking service for business travellers to book their flights, hotels and cabs in one place. My target audience is frequent business travellers and travel agents who book tickets for their clients regularly.

Project goals

My goal was to create a responsive one-stop travel booking website. The users should be able to search for, filter, and book their flights/hotels/cabs, and complete the checkout process in an efficient and simple way.

User research

Understanding the user

I conducted interviews with 5 participants between the ages of 21 and 65. Their domain knowledge, and frequency of usage of other similar applications ranged from Medium (individuals) to High (travel agents). They walked me through their usual process of booking a travel service and I gained the following insights.

Insights from interview

By default, items should be sorted by Lowest Price

4 out of 5 participants place high importance on pricing of flights and hotels. They will usually sort these by Lowest Price.

Sort and Filter are key functions

All 5 participants heavily rely on the filter or sort function when making a travel booking eg. pricing from low to high, return or one way flight, hotel room type, hotel amenities etc.

Hotel pages should come with reviews

In booking of hotel, most users will read reviews before making their decision. This is due to a number of reasons including cleanliness and safety.

Cabs have to be efficient

For booking of transport locally, most users place importance on efficiency. They need to know transportation pick up time and estimated time of arrival.

User persona

I worked on a user proto-persona so I could better understand the motivations of the main group of users and how they would interact with the website.

Melissa

“Making travel plans should never be a hassle!”

Age: 36
Education: Postgraduate degree
Occupation: Sales Manager
Tech Expertise: Medium to High

Beliefs and emotions

Big on efficiency - likes one-stop solutions
Always punctual
Down to earth and believes in transparency – will not indulge in expensive flights or hotels even if it is paid for by the company
Frustrated when things are complicated – likes simple and straightforward solutions

Expectations

To sort available flight options by price
To read reviews of hotels before booking as she has concerns about safety
To get to client meetings on time
To be able to book flight, hotel and cab in one transaction

Problem statement

Melissa is a busy business traveller who needs an easy way to book the cheapest flight, a safe hotel, and a punctual cab because she wants to reduce the time spent planning her trips.

User flow

Based on Melissa’s profile, I built a scenario that I can use to create my user task flow:

Melissa is currently on her way to a conference and will arrive within an hour. During this hour, she needs to book a business trip to Kuala Lumpur from 27-30 Jun 2022 (Mon-Thurs), and quickly share the travel details with her client in KL. She plans to fly budget or economy since it is a short flight. She usually chooses her hotel based on the hotel’s guest rating and reviews. She will book a cab directly from KL airport to the client’s office in Sungai Besi, thus she needs to confirm her arrival time with her client soon. She will pay with the company’s corporate credit card.

I outlined a user task flow based on the above scenario. This includes the tasks the user may have to perform (represented by circle), decisions that users may have to make (diamond), and pages that have to be created (rectangle). This would help me get an understanding of the pages I needed to create.

Starting the design

Lo-fi Wireframes

On the Homepage, I created a tab menu for users to switch easily between booking a flight, hotel and cab.
In my user flow, the user starts by filling in their flight details under Flight section then clicks on the Search button.

The user is then directed to the Flight Booking page.
Based on feedback received during the user interviews, the flights on these pages are, by default, sorted by Price: Lowest
As my persona Melissa values efficiency, I put a little tag above the cheapest and shortest flights to highlight these flights.

On the Hotel Listing page, I designed a booking summary at the top of the page so that the user can go back to change their flight if needed.
The check-in and out dates automatically match flight dates so that the user does not need to fill in this information again
Location is matched to flight destination with an option to Search by hotel name and to apply various filters.

When user selects a hotel, it opens up the Hotel Booking page. Check-in details are indicated at the top.
Next, I included anchor links for users to scroll to different sections of this page – ie. Overview of hotel, Room types, Facilities, Reviews, and Hotel Policies.

On the Cab Booking page, pick up location is automatically set to the arrival airport, and drop off automatically set to the selected hotel.
In my scenario, Melissa wants to go directly to her client’s office from the airport. I created a component to demonstrate the search function of the drop off location.

After the user selects a cab, they are directed to a Booking Summary page where they can review their flight, hotel and cab bookings.
A price summary is fixed to the top right of the screen so that users can see quickly the price break down, even when they are scrolling through the page.

When user selects ”continue to payment” they arrive at the Checkout page. Here, they can fill in the passenger details, contact information and payment details.
After user completes booking, they will get a confirmation page which informs them to check their email.
In my scenario, Melissa needs to share her travel details with her client, so I included a feature to share her travel itinerary either by downloading a pdf or having it emailed over.

Responsive design

I created a mobile version as well, since many of my users are business travellers who are likely to access the website on the go.

User testing

Usability study

I conducted an unmoderated usability study on 3 participants using the low-fidelity prototype. I set the following tasks:

Book the cheapest flight from the homepage
Book the highest rated hotel based on Guest Rating
Book the cheapest cab from the airport to the client’s office at Sungai Besi
Make payment and complete the booking

Most participants found the website intuitive and similar to other travel booking websites, making it easy to use. They also liked the straightforward layout and classy fonts. Generally, they feel that anyone who has used a travel booking website will not have a problem with my website.

Refining the Design

Even though the participants completed the usability study tasks easily, I did gain a few insights which helped me make some improvements to my design as follows.

1 Adding a CTA to top navigation

I received feedback that new users would likely be seeing different screens and functions from an existing user. Thus I added a login and sign up CTA. For the purpose of this project, I continued working on this project as a pre-login design.

Before usability study

After usability study

2 Reducing information overload in filter section

Some participants commented that the filter section took up too much space. When they clicked into the hotel listing page, they were expecting to see a list of hotels, not the filter options. To fix this, I hid the filter options under a filter drop-down instead. In addition, one participant highlighted that there was no price information in the booking summary at the top of the page.

Before usability study

After usability study

3 Simplifying the design to reduce confusion

The “Book Now” CTA at the top of the page is confusing as it only brings users further down the page to select a room. Thus I removed this CTA as it served no purpose and was confusing to users. One participant was also confused by my tab menu at the top of the page, as they did not look like tabs. I made this more obvious in my hifi design.

Before usability study

After usability study

Mockups

Finally, I added visual elements like colour, typography and images to all my wireframes to create high fidelity mockups. I decided to go with a gold theme to give my brand a premium look and feel.

Reflection

With the easing of the pandemic travel restrictions, it was exciting to create a travel booking website design from scratch. While this is a fictional product, I went through the UX process as if it were a real website. Conducting interviews with people who traveled for work opened up my perspective to how other people make their travel bookings. While keeping the business traveller in mind, I also had fun working with limited space on a mobile design for the lofi design.