Hostelworld Search
Raúl M. Vicente
Product Designer
Made with

Hostelworld
Search

Improving search
for hostel bookers

Redesigning Hostelworld web search to improve user experience and build the foundations of a Progressive Web App

On this project, I present how we worked on Hostelworld to redesign the UX and revamp the look and feel of Hostelworld web. On this case study, I show my UX process which involves research to define the problem and the different steps we took to resolve it with design. This is an ongoing project which is being implemented in small increments; dividing Entry and Search pages, cleaning up the design of the property cards, improve the mobile experience and finally prototyping the future of Hostelworld as a progressive web app PWA which will be easier to iterate, improve and scale.

My team is responsible for the Search at Hostelworld web and I am responsible for product design within the team.

Hostelworld is an e-commerce site to help travelers to find hostel beds and private rooms around the world.

Research

In order to start our design process, we used all our resources to gather as much information as necessary to make better design decisions.

Interviews and Market Research

Over the last years, we conducted user interviews and did market research to get a better understanding of the market and Hostelworld users. Some of the research was conducted by third-party companies. We also 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:

Users 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.

"I want to know I’ve got my private space to go back to at the end of the day"

Hostel booker quote.

What put users off hostels?

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

User types

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

  • Budget backpackers 30% "We want to pack as much in as possible"
  • Independent explorers 24% "I want to learn something new and truly experience the world"
  • Retreaters 21% "We like to get away from the crowds and truly experience the world"
  • Sunseekers: 17% "I'm all about relaxing, I save up all year around for my trip"
  • Easy going mates16% "I'll go where the party is. ... No need to think"
  • Look at me 14% "More than anything else we like to feel extravagant"

Hostelworld Search

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.

Key Learnings:

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

User Testing

I 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 users (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 holidays 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 Hostelworld users go straight to change dates, the number of guests,... making a search.
  • Users 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 a 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 search and discoverability. This helps us to understand usability patterns. We use this research as guidance as we like to maintain differentiation attitude i.e. Booking.com is for people looking for hotels and family holidays versus Hostelworld is all about the social experience when traveling.


Actions

We decided to improve the flow for hostel discovery. 

Until that moment, the Entry and Find A Bed (FAB) 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 users information about a city, before they can make decisions. These pages are good for SEO but they are expected to be different from the FAB pages which are a list of properties. 

We decided to improve discoverability by:

  • Dividing Entry and FAB pages to give them different look and feel and match their expected usability purposes.
  • Improve images in both pages.
  • Improve the search and filters to help users to find their beds faster.

Design

I started the design drawing ideas to improve the Entry pages and make them look different from FAB pages.

Entry Pages

I combined sketches with low wireframes during the earlier design process. This helps the team to understand what elements are going to be included in 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 I knew needed in the page elements that would help users to make a decision about visiting a place quickly such as; user reviews, ratings, city description, popular places to stay, good imagery and Hostelworld unique selling points.

Main differences:

  • Entry pages focus on giving information about a place. 
  • Find A Bed pages are a list of properties after the users make a search.
We run a survey and a user test with a few users 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.

Entry Page Wireframe for Web and Mobile views

Entry Page Wireframe for Web and Mobile views

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 FAB 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.


Entry Page Iteration #1 and #2

Entry Page Iteration #1 and #2

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.

Old Property Cards Desktop and Mobile

Old Property Cards Desktop and Mobile

I reviewed the property cards and draw wireframes focusing on the relevant content and the disposition of it to be easily scanned by users. 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 which are easier to scan and read by users.

Hostelworld Search
Desktop Property Card Redesign

Desktop Property Card Redesign

Mobile Property Cards Redesign

Mobile Property Cards Redesign

I also draw some solution 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 users to the Property Content page. Thus eliminating one step on the user flow to make a booking.

Property Card Paper Prototype

Property Card Paper Prototype

Siteflow 

After the redesign of the Entry page and the property cards, we had a good base to differentiate Entry and FAB 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. Even the names of the two pages were very similar; FAB static and FAB dynamic.

Previous Site Flow

Previous Site Flow

Hostelworld Search
Redesigned Entry to FAB Flow

Redesigned Entry to FAB Flow

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 FAB page and build a single page application that will be the base for a Progressive Web App. 

Some other experiments include (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 personalised view.
  • Removing the large hero image.

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

Hostelworld Search

PWA Foundations

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

Right below this text first UI mockups for Home (similar might apply for Entry pages), FAB and property content page.

Prototype - User Flow from Home to FAB (Search Results)

So far working for this project has been a challenge and a satisfactory experience.

Key Learnings:

  • The design process has a lot of moving parts, and sometimes, technical constraints and business decisions are made that have an impact over 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 for our users. 

Thanks for reading!