Details Page Redesign

A project focused on information architecture & UX/UI refresh

At Hotwire, our Hot Rate hotels are pretty unique within the travel space. Hot Rates hotels are offered to users at a deeply discounted price. The catch? We hide the name of the hotel until the user confirms booking. Offering an opaque model like this can be risky for users, so our product needs to promote confidence, transparency, and trust. This project was focused on redesigning the details page for Hot Rate hotels to improve the page's information architecture, increase perceived value of Hot Rates, focus on mobile usability, and increase purchase confidence. This project was a collaborative effort between myself and another designer.

Collaborators

Product Manager, Product Designers, Design Leads, UX Research, and Developers

Design

Website design, mobile web design, information architecture, product thinking, research, and copy writing

Location Module (mobile)

Through user testing and historic UX research, location consistently held the top position as one of the top 3 most valuable content to users when making purchase decisions. Since our "Hot Rate" products are opaque, meaning users do not know the name of the hotel they are booking, it is highly important that our location & map feature provide users with enough transparency. With the redesign, I wanted to design a solution that would allow users easy access to information important to them to increase map engagement and location confidence.

BEFORE

The module was taken over by an interactive map, hiding many important factors that help build confidence, while making it harder for users to find or access content.

AFTER

Users can quickly find content to help build their confidence, such as; location rating, distance from their search location, and places of interest nearby with the proximity to the hotel.

Full Page Map

Users also have access to a full page map through the location module. Previously, our location module only allowed users to interact with a map in a confined space. With a full page map, users can easily identify places of interests by their distance and proximity to the hotel, increasing their engagement and growing their confidence in the hotel's location.

Iteration 1

Iteration 2

Iteration 3

Final Full Page Map Design

Due to restrictions and backend issues for airport and restaurant data, the final design could only include landmarks. Therefore in the final map design, we had to remove the tab pattern, but made sure the component could be easily modified later.

Interaction Design

The goal of this project was to create a UI that is mobile first. In the past few years, we had seen significant increase of visits to the website on mobile. So in the design process I explored different mobile interactions inspired by current patterns that would help increase mobile usability.

Desktop

Interactions on desktop mimicked mobile behaviors, such as sticky price block, and scroll transitions.

Before & After

Given a pretty limited timeline to work on the project due to business needs, we had to keep as close to parity to the original content. This means we were restrained from finding solutions through product strategy, and therefore focused this project more around UX & UI to solve the problem.