Redesigning the Search Experience of an Online Travel Agency

UX research and design process explained

This is an ongoing project to improve the UX and UI of Hostelworld web. The redesign will be implemented in small increments;

  • Improving discovery by differentiating Entry and Search pages; I explain this in more detail below.
  • Redesigning the property cards.
  • Improving filters, and map views.
  • Improving overall search experience mobile and desktop.
  • Build the foundation of a progressive web app (PWA), easier to iterate, 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
  • Mobile Mockups

Interviews and Market Research

We interviewed users and gather market research to get a better understanding of the budget travelers' market space.

Before this research, I was very curious about the mindset and decision-making process of people going to hostels.

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 choose a hostel and make a booking. I conducted guerrilla 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 to make a booking for two or three people to go on holiday in a random 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 is useful to understand usability patterns, but we like to maintain a differentiation attitude; Hostelworld is all about the social experience of budget traveling.

Actions

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 the Search pages.

Entry Pages SEO

I combined sketches with low wireframes during the earlier design process 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.

We wanted the Entry pages to have elements that would help to make a decision about visiting a place: reviews, ratings, city descriptions, popular places to stay, good imagery, and the website's unique selling points.

Entry page wireframe for web and mobile views

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 the weakest points on the designs.

The takings from this survey and user tests were applied to the following iterations, and once the team understood the page was ready we roll out an AB test.

Test results:

From the results, we found that there was not much uplift from users moving from Entry to Search pages. We reconsidered the designs and proposed a different solution.

Next Steps:

The next iteration showed more properties reducing ‘facts about the city’ information. I decided to change the layout to satisfy what a user expects to see after performing a Google search.

The second iteration (below) had a 3% uplift on mobile and desktop.

Entry Page iteration #1 and #2

Property Cards

The property cards needed to improve because we wanted to revamp the look and feel of the site. They also had to match the new proposed designs for the Entry pages.

Old Property Cards Desktop and Mobile

We improved the cards making them cleaner by removing excessive use of colors and unnecessary content; making the prices larger; and improving imagery.

I reviewed the property cards and draw wireframes focusing on the relevant content to make it easy to scan. Drawing a basic wireframe helps me to keep the elements in groups that are easier to scan and read.

Desktop property card redesign
Property cards UI research
Property cards on mobile view

I drew some solutions for future iterations. That way I could explore the future possibilities of the product, and how it could scale.

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.

Property Card paper prototype

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. The graphics below show the main differences between the previous and next concept.

Site flow analyzed
Proposed site flow
Redesigned Entry to Search Flow

Results:

On these redesigns, we simplified the flow, functionality and look and feel.

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

Next Steps:

Our next step is to redesign the mobile experience and build the foundations of a Progressive Web App 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.
Search page mockup

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.

Marvel Prototype

Overall 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.
  • Transparency is key when working with different teams and stakeholders; keeping everyone regular communications to updates always pays off.
  • Quick feedback loops work better; test and validate solutions as often as possible.
  • Remove complexity and think about scalability in the long term.
  • Keep aware of design debt as well as technical debt.

As mentioned above, this is an ongoing project, which hasn’t been released yet. I hope we could see great results and customer satisfaction once it is finally released.

This has been a great experience, and I enjoyed all the concept development, research, and design process.

Thanks for reading.

Product Designer agile and data driven | http://raulmv.com