Hopper-banner-v2.jpg

Hopper

Hopper is a travel booking company that using algorithms to determine the best flight and hotel deals. Even though they mainly focused on their mobile app for their business goals, not all users find the concept model helpful.

Role: UX Designer    |     Tools: Card Sort, Loop 11, and User Testing

Problem

The current experience of the website focused heavily on directing users to download their mobile app without establishing trust or aligning with users needs. The most important feature of the website, search feature, is hidden and has a lack of functionality.

Challenge

How might I redesign the website to keep users engage with Hopper's services to find competitive price for flights and hotels?

Solution

The redesign focuses on making the site functional by improving navigation and structuring the content  to align with users' expectations and needs

01. Research

Before I started diving into the research phase, I wanted to find out and to understand in order to solve the issues with the existing website. I wanted to know:

  • What do users look for when they use a third-party travel booking service?

  • Are they able to navigate the website?

  • Does the website provide enough content to make them want to trust or use the company’s service?

  • What are their pain points or challenges in using the website?

Analytics

First, I looked at the data analytics for Hopper's website. As of February 2020, Hopper's website traffic was considered the lowest out of all of its competitors and with a high bounce rate. Users spent less than a minute on the website. This insight provided a possibility that the content did not interest or meet the needs of the users. 

Competitive Analysis

To gain a better understanding of the travel industry, I wanted to know what other competitors were doing to serve their target audience. I evaluated 5 competitors:  kiwi.com, Google Flight, Viator, HotelTonight, and Airbnb. This allowed me to find common features to consider to help strengthen Hopper's position in the marketplace.

What I Learned

  • Clear value proposition and call to actions that allowed users to find out more about recommended/population destinations, features, and services

  • Easy navigation throughout the site (less than 3 clicks)

  • All website had the ability to search and book for the services

Card Sort

I conducted a closed card sort to find out what users services and features is important to them when they are selecting a travel service to use. 10 participants were given the task to rank 20 cards based on the level of importance: very important, somewhat important, and not important.

 

100% of the participants rated secure payment as very important. Based on this study, users look for values or features that are important to them when selecting third-part travel booking service.

Benchmark Test

Next, I wanted to know if users were able to navigate and search for specific content on the website. This allowed me to find out the success rate of using the website.

 

30 participants were given 2 tasks to see if they were able to complete them. Both tasks took users a minimum of 1 minute. The majority of the participants did not complete the 2 tasks successfully.

Usability Test

Based on the low success rate result from benchmark test, I wanted to know why users were having a hard time and learn about any pain points or challenges.

 

3 participants took the usability test where they had to complete 2 tasks and verbally talk through their process and experiences.

What I Learn:

Task 1: Since secure payment was ranked very important in the card sort, I asked participants to find the information on the website. Everyone went to the feature section and clicked on the “Pay Securely” box, thinking that they could  find more information. They did not know the box was not linked to a direct page. This created confusion and caused participants to give up the search because it took too long to figure out.

Task 2: Participants had a negative experience searching for flight prices. They thought that they needed to download the app.

All participants stated they would like the website to have the same features as the mobile app. One participant stated she tries to avoid services that only offer in one platform.

"I really dislike & try to avoid services that can only be accessed via app (even if I prefer the app, I dislike not having option to use a website). I would make the website work similarly to how the app work; the various features would be linked to open relevant content."

Additional Findings:

  • The career section did not provide any value to the participants. One participant commented the information came out of nowhere and seem out of place.

  • Interface design received positive feedback from all the participants.

Content Strategy

I restructured the content on the homepage to align with users' expectations and mental model by first putting the most important feature at the top, follow by services offered by the company, and then introducing the users to the mobile app.

Before:

  • The marketing message was to download the app without first establishing trust with the users.  In the usability test, participants were not comfortable to use the service, let alone downloading the app.

  • There was a lack of storytelling to convince users, especially when not all contents were relevant to the purpose of the website. 
     

After:

  • When users visit a travel booking website, they are mainly looking for 2 components: search destinations and find out about features and services. These 2 components were placed on the top of the home for visibility.

  • The "Career" sections was removed from the section of the homepage because participants did not find it valuable to them. It also did not fit with the content theme.

03. Develop

One of the key features that I added was the ability to search and book flights.  In the usability test, many participants said they prefer to have the website to offer the same features as the mobile app. This allows the website to be used as a tool instead of an informational resource.

Search

The product's main feature is to allow users to search. It is part of the user's goal and motivation when using the website. A search feature needs to be added to the top of the website where it is visible.

Booking

From the card sort, the ability to book on the website was the top feature that was consider very important to participants when deciding to use a third-part travel booking service. A booking feature needs to be included to fulfill users' need.

Value Propositions

Users look for valuable propositions to win their trust based on core features. Instead of showing all 6 features, narrowing it down to 3 features and focusing on the details allows opportunity to summarize key features to provide insight to users. In the usability test, users clicked on the visual, hoping to find more information. To align with their mental model, each individual boxes should be linked to the source. 

Destination Recommendations

Participants had a difficult time looking for the search feature in this section and was out of placed. Instead, redesign the section to direct users to assist them plan potential trips by providing travel advice and list of recommended flight and hotel prices to improve engagement levels.

Career Content

In the usability test, all users said the career section felt misplaced and not relevant to the website. Since "career" is listed as a hyperlink on the bottom of the footer, it should be removed from the body content of the website because it interrupts the flow of the story and is not valuable to help users' reach their goal.  If users are interested in viewing the career section, they can still go down the bottom of the footer to access the content.

04. Deliver: Website Redesign

Redesign Advantages

  •  Increase Traffic

    • The main feature of the website (search & book) is visible and aligns with users' needs

  • Increase Conversion Rate

    • Value propositions are positioned at the top of the homepage and linked to direct pages for users to find out more information. By shortening the search time and presenting key values, it will make  makes users engaged and potentially use the services.

  • Lower Bounce Rate
    • Homepage has a clear purpose with the new content structure to keep users on the site.

Conclusion

TAKEAWAY

  1. Websites are still relevant
    Offering only a mobile app may make the company unique from the rest. However, it does not necessarily align with users' expectations when they think about third party travel booking website. Many of the competitors still allow users to search and book through their site, which proves it is still a valuable.
     

  2. Good design is functionality and beauty
    Even though Hopper's design was aesthetic pleasing, the functionality was no where near the same level. Both functionality and beauty both create a emotional response in user experience.
     

UPDATE

As of late 2020, Hopper has implemented a search feature on their website.

* My project was done independently in the early-mid 2020, separate and no affiliation with the company.

  • Instagram
  • LinkedIn
  • email-blk

© 2021 INGRID HORNG