Designing a better search experience for an Online Travel Agency

Applying UX processes and building the foundations of a Progressive Web App

Raúl M. Vicente
Nov 13 · 9 min read

This is an ongoing project to redesign the UX and revamp the look and feel of an Online Travel Agency. It will be implemented in small increments; differentiate Entry and Search pages, redesign the property cards and improve the mobile experience. Finally, the redesign will be part of a progressive web app (PWA) which will be easier to iterate, improve and scale.

Test prototype

Contents

— Research

  • Interviews and Market Research
  • UI analysis
  • User testing
  • Competitor Analysis

— Design

  • Entry Pages
  • Property Cards
  • Site Flow — Entry to Search
  • PWA Foundations

Interviews and Market Research

Over the last years, we conducted user interviews and market research to get a better understanding of the market and budget travelers. Some research was conducted by third-party companies. We gather some learnings from user testing sessions while visiting hostels and talking directly to hostel customers.

Before this research, I was very curious about the user’s mindset and decision-making process while making a booking.

Key Learnings:

  • Hostel bookers care about cheap, social and fun, but they are also very concern about privacy, security, and cleanliness.
  • Hostels are seen as cheap, fun, social, but negative perceptions remain a significant category drag.
  • Sharing, in particular, creates barriers that must be addressed.

What put hostel bookers off hostels?

  • 78% 🔑 Lack of Privacy
  • 68% 🔓 Security Concerns
  • 64% ✨ Lack of Cleanliness

User types:

Based on our research we divided our user types into different groups.

30% Budget backpackers “We want to pack as much in as possible”

24% Independent explorers “I want to learn something new and truly experience the world”

21% Retreaters “We like to get away from the crowds and truly experience the world”

17% Sunseekers “I’m all about relaxing, I save up all year around for my trip”

16% Easy going mates “I’ll go where the party is. … No need to think”

14% Look at me “More than anything else we like to feel extravagant”


UI Analysis

We conducted an evaluation to examine the interface and judge its compliance with recognized usability principles based on Nielson’s 10 Usability Heuristics and the Severity Grading System.

  • Total number of issues: 54
  • Critical : 3
  • Mayor: 6
  • Minor: 26
  • Cosmetic: 19

User Testing

We tested the current design to discover the way people navigate the website to find a hostel and what triggers the users to chose a hostel. I conducted guerilla user testing with people in hostels and other potential customers (similar user groups to our personas).

The script we use is simple; search for a hostel on the web and then make a booking for two or three people to go on holiday on a chosen location. We tested mobile and web experiences.

Key Learnings:

  • The most common journey starts from a Google search i.e. “Hostels in London”. Entry pages are the first impression and the starting point for navigation.
  • When landing in the web potential bookers go straight to change dates, the number of guests,… making a search.
  • Potential customers care about the search results, and they expect a list of results relevant to them.
  • Users move quickly through landing pages, usually, they go straight to the search form to get results for their dates.
  • When performing search users expect to see a list of hostels, with prices, reviews, ratings,…
  • Good images are very important.
  • Filters, they need to improve.

Competitor Analysis

We often analyze how other OTAs managed the search and discoverability experiences. This helps us to understand usability patterns. We use this research as guidance as we like to maintain a differentiation attitude i.e. Booking.com is for people looking for hotels and family holidays versus Hostelworld which is all about the social experience of budget traveling.

Actions

Until that moment, the Entry and Search pages were using the same template and had a similar look but as we discovered they have a very different purpose in the user expectation. For instance, Entry pages are meant to give hostel bookers information about a city, before they can make decisions. These pages are good for SEO and they are expected to be different from the Search pages which are a list of properties.

We decided to improve discoverability by:

  • Dividing Entry and Search pages to give them different look and feel and match their expected usability purposes.
  • Improve images on both pages.
  • Improve the search and filters to help potential hostel bookers to find their beds faster.

Design

I started the design process by drawing ideas to improve the entry pages and make them look different from search pages.

Entry Pages SEO

I combined sketches with low wireframes during the earlier design process. This helps the team to understand what elements are going to be included on the page. The two main purposes of my sketches are first to understand the components and second to brainstorm designs solutions quickly.

At this stage, and based on the previous research, we needed an Entry page with elements that would help to make a decision about visiting a place quickly such as; reviews, ratings, city descriptions, popular places to stay, good imagery and the website unique selling points.

Main differences:

  • Entry pages focus on giving information about a place.
  • Search pages are a list of properties after the users make a search.

We run a survey and user tests to validate our first iteration which helped us to iterate quickly and find elements the weakest points on the designs.

After reviewing with the team and stakeholders the wireframes we proceed to make a user test and survey to discover a bit more about the needed components for a good Entry page. The takings from this survey and user test were applied to following mockups and once the team understood the page was ready we roll out an AB test.

Test results:

The first AB test did not perform well as we did not find much difference compare to production. There was not much uplift either on mobile or web from users moving from Entry to Search pages. We were given the results by the Conversion Rates Optimisation team and iterated our design accordingly.

Next Steps:

The following design was much more focus on showing more properties instead of facts about the city and dividing the elements in the page in a way that the users will find them useful after making a Google search. The idea was to make Entry pages to perform very well in terms of usability and SEO.

The second iteration (bellow) performed much better in the AB test having a 3% uplift on mobile and desktop.


Property Cards

I sketched ideas for property cards taking into account the feedback we got from our research.

According to our UI analysis and research, the property cards needed to improve if we wanted to revamp the look and feel of the site and make it match the proposed designs for the Entry pages. We needed to improve the cards by making them cleaner removing excessive use of colors, unnecessary content, making the prices larger and improve imagery.

I reviewed the property cards and draw wireframes focusing on the relevant content to make it easy to scan. The elements to include in the cards are property image, description (name, address, property type), rates and prices. Drawing a basic wireframe helps me to keep the elements in groups that are easier to scan and read.

Property cards UI research
Property cards on mobile view

I also draw some solutions for future iterations. This helps me to think about the possibilities of the product and how it can scale in time. The drawing below shows a property card (with the filters on top) and with options to show the available rooms in the cards without the need to move the potential bookers to the Property Content page. Thus eliminating one step on the user flow to make a booking.

Site flow–Entry to Search

After the redesign of the Entry page and the property cards, we had a good base to differentiate Entry and Search pages. Previously the two pages or templates looked the same even though they had very different purposes. The graphics below show the main differences between the previous and next concept.

Results:

On these redesigns, we simplified the flow, functionality and look and feel. So far, it is too early to show results in terms of conversion rates.

We also used AB testing to back-up our decision with data and prove to the stakeholders our decisions will improve usability and be generous with SEO and future scalability.

AB tests were run to remove features such as filters and sort in the Entry pages and remove a compare functionality the property cards used to have. By removing this feature we had a small uplift in conversions.

Next Steps:

Our next step is to redesign the mobile experience on the Search page and build a single page application that will be the foundation of a PWA for the entire website.

Some other experiments include (view below image):

  • Testing a map view together with property cards.
  • Testing different colors for ratings to differentiate rating ranges.
  • Fixing navigation on the header.
  • More prominent filters to reduce the amounts of clicks to access a personalized view.
  • Removing the large hero image.

With all these proposed changes we plan to improve the experience, reduce complexity and improve site performance.


PWA Foundations

Please find below some of the first iterations of the ongoing PWA project with some basic ideas of user flows and interactions on mobile.

Right below this text first UI mockups for Home (similar might apply for Entry pages), Search and Property Content page.

Overal Key Learnings:

  • The design process has a lot of moving parts, and sometimes, technical constraints and business decisions are made that have an impact on the design that we can’t easily control.
  • Working with the rest of the team to improve transparency to show our processes and the direction we are taking to other teams and stakeholders always pays off.
  • Quick feedback loops always work better; test and validate solutions as often as possible.

I will be updating the design process and the results while this project evolves. Like any design process, it will have multiple iterations until my team and I feel the product is the best we can have for potential hostel bookers.

Thanks for reading!

Raúl M. Vicente

Written by

Product Designer at Hostelworld | http://raulmv.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade