Meet the World Better

Expanding the capabilities of the Hostelworld app

Duration
3 Weeks
Role
UX/UI Designer & Researcher
Team
Solo
Figure 1.1

What is Hostelworld?

Are you a looking to meet other world travelers while roaming the globe? Hostelworld is an accommodation booking platform both available in a desktop website and a smartphone app. They focus on smaller and budget properties like hostels and bed and breakfasts. This platform appeals to younger travels mainly in their twenties or early thirties.

What I Discovered

After a heuristics evaluation on the desktop website I discovered that there are a bevy of features in the bottom navigation such as Tours and Experiences, Airport Transfers, Car Rentals, Blogs and Articles. Most of these features cannot be found in the main menu or global navigation. (See Figure 1.1) My gut reaction was “Why would they leave those features out of their main nav?”

However, none of these features exist at all on the smartphone app. Which means they are using different apps to book transportation from the airport to the hostel or booking a tour. So the dilemma in terms of the design decisions was what platform should I focus on?

What I Did About It

The key to solving this dilemma was a survey. There were two very important things that I wanted to discover from the survey: “What platform do people use and prefer using while traveling and what features from Hostelworld’s bottom navigation would they expect to have on a smartphone app as well as which they find most important. The survey also helped me trim down the grand scope of the project as well as defining a persona and scenario.

Key Survey Insights

Figure 2.1


According to the survey nearly everyone who travels brings a smartphone with them. Only one person said that they didn’t bring their phone, but only because they brought their tablet instead.

Figure 2.2


And of those three devices, the overwhelming majority of users prefer using a smartphone. So, with the first issues being resolved, I know that the smartphone app is the platform that I should focus on.

Figure 2.3


Nearly everyone expects to have some way of using their smartphone to book tours and experiences on their phone and the overwhelming majority of users also want a way to get from the airport to their respective accommodation.

Figure 2.4


In addition, the surveyees found that the most important features were Tours and Experiences at 37% with Airport Shuttles and Taxis at 20%.  

How the Survey Shaped the Scope

Because of these results, I now know the I need to focus on moving these features to the smartphone app as most people will be using this as their primary platform. In addition I also know which of the features from the footer are the most important to move over in this sprint.

The other questions proved useful as well where I asked about their overall experience in hostels, certain preferences while they travel, age group, likes and dislikes. All of those secondary and tertiary questions helped with my affinity mapping as well as persona and scenario.

How Research Confirmed My Design Decisions

I did analysis on Hostelworld's indirect competitor AirBnb and direct competitor Booking.com. I mainly used these platforms to confirm it was worth it moving these features over to their phone. AirBnB has the experiences features where locals can promote tours, events, and other experiences for travelers to indulge in while Booking.com offers Airport Taxis. So it turns out that if users are using their phones for features like this then why shouldn't Hostelworld.

After reading the reviews on Hostelworld on the App Store, it helped me consolidate my design plans. I knew I could keep these changes simple because the app is generally popular and well liked. It has 4.9 out of 5 stars with over 40 thousand reviews. After diving into some of those reviews I learned that they like how simple the interface is. The challenge now is to add these new features without drastically changing the overall experience such that it does not disrupt the simplicity of the app.

Starting off with Sketches

My design plan goal was to make subtle but important changes to the app. After my user flows, I experimented in doing a sketch for each frame of my flow then I would implement that sketch in a medium fidelity wireframe. After I would one frame I would return to sketching and repeat the process over again.

Finishing with Wireframes

The Wireframes in the photos below consist of two tasks. Thanks to all my surveys and research I decided that my tasks would consist of using the Airport Transfer feature as well as the Tours and Experiences feature. At this point in the project. These are medium fidelity wireframes, consisting of grayscale.

Airport Transfers
Tours and Experiences

The Usability Tests & Iterations

Figure 5.1

After conducting three usability tests, I took away a few things from those tests:

  • 3 of 3 users spent more than 30 seconds per user on the home page getting to the menu section
  • Once the subjects got to the home page 2 of 3 subjects completed the tasks without intervention

Because of these insights I made a few changes. As seen in Figure 5.1, you can see the iterations that I made after the first round of usability tests:

  • I switched from #2 to #3 as the menu could only be selected by pressing 'more', which they were not following.
  • I then added a hamburger menu as seen in #1 as well as the logo and slogan as the current app does not have anything up top.

Next Steps

  • Bring those features to the main navigation of the desktop website
  • Think of creating different ways to offer those features
  • Implement more features to the app such as car rentals, blogs, or travel communities as Hostelworlds is popular for a lot of solo travelers

Key Insights

Medium Fidelity Prototype

In the current scope, I was able to present a mid-fi prototype. Soon I will up the fidelity to a high-fidelity mock-up to show the world what this new app is really made of. So check back in soon. In the mean time test out my current prototype of the project.