Image for post
Image for post

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

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

— Design

  • Entry Pages
  • Property Cards
  • Site Flow — Entry to Search
  • Mobile Mockups
Image for post
Image for post

Interviews and Market Research

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

Key Learnings:

  • 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
Image for post
Image for post

User types:

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”

Image for post
Image for post

UI Analysis

Total number of issues: 54:

  • Critical : 3
  • Mayor: 6
  • Minor: 26
  • Cosmetic: 19

User Testing

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:

  • 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.
Image for post
Image for post

Competitor Analysis

Actions

  • 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

Entry Pages SEO

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.

Image for post
Image for post
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.

Image for post
Image for post
Entry Page iteration #1 and #2

Property Cards

Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
Desktop property card redesign
Image for post
Image for post
Property cards UI research
Image for post
Image for post
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.

Image for post
Image for post
Property Card paper prototype

Site flow–Entry to Search

Image for post
Image for post
Site flow analyzed
Image for post
Image for post
Proposed site flow
Image for post
Image for post
Redesigned Entry to Search Flow

Results:

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:

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.
Image for post
Image for post
Search page mockup

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

PWA Foundations

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.

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store