Project Vision

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    |    Project: Individual   |  Responsibilities: Research, Interface Design  |  Tools: Card Sort, Loop 11, and User Testing


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 search feature, is hidden and has limited functionality.


 A study released by Expedia Media Solutions found that desktop/laptop devices were the most used device to research and make a booking. This an opportunity to improve the website as an additional channel to gain new users and broaden company's exposure in the digital space.


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

01. Research

I wanted to learn if there were issues with the existing website and understand what users were looking for.  The methods that I used to gather my research findings were:

  • Data Analytics - view current statistics of engagement level

  • Competitive Analysis - explore how other competitors were offering their service

  • Card Sort - find out what the important values  travelers look for when using a travel booking site

  • Benchmark Test - evaluate success rate of navigating through the site

  • Usability Test - understand travelers paint point and challenges

Data Analytics

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.

Competitive Analysis

I evaluated 5 competitors:  kiwi.com, Google Flight, Viator, HotelTonight, and Airbnb to understand what they were doing to serve their target audience . This allowed me to find common values 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


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 the benchmark test, I wanted to know why users were having a hard time completing the 2 tasks from the benchmark test and learn about any pain points or challenges. 3 participants took the usability test where they had to complete 2 tasks and verbally walk through their process and experiences.

02. Ideation

Empathy Map


Next, I synthesized my research findings to formulate my design focus. By using the empathy map, I was able to see what I know about the users as a whole and form common themes to focus on.

Design Focus


  • Minimize the number of clicks

  • Bring search/booking features to deskptop

  • Easily find information on core services on homepage


  • Build trust by using value propositions

  • Present important features and information in visible areas


  • Provide relevant content that users wlll find valuable  to determine if they should the company's services.

03. Develop


I used the existing mobile app interface and features to create high-fidelity wireframe of the search user flow for desktop version.

04. Redesign

New Content Order

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.



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.


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.

Metrics to Measure Success

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



  1. Websites are still relevant
    Even though there has been an increase of users using mobile and tablet device, desktop (website) still dominants in the field. It is still consider a necessity to make presence in the digital world.


  2. Good design is having both 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.