Expedia for Android: Hotels

Project Overview

As a Sr. Mobile Product Designer at Expedia, I led a top to bottom redesign of Expedia for Android. This case study looks at the hotel experience redesign.

Role

I was the design lead on this project. End-to-end design role. Research, user experience, interface design, motion design, testing & design handoff. I worked with one PM & our Android Engineers.

The Problem

As Expedia mobile was growing quickly and becoming an increasingly larger portion of Expedia’s revenue, it became clear that the user experience was becoming dated and wasn’t as delightful as it could be for our users. A redesign of the app needed to take place in order to improve the user experience while continuing the fast growth of our product. With hotels being Expedia’s largest line of business, we decided to start there.

We needed a more flexible design in hotels that could be the foundation for the rest of the Android and iOS apps. This included accommodating new types of messaging within the the search results and hotel detail screens such as urgency messaging, VIP status, guest recommendations and member discounts.

Research

We performed usability studies to see how customers used the existing hotels experience. This gave us insight into the pain points of the flow. We also looked at our analytics to view the funnel and drop off points to identify areas to improve. Customer support tickets and app ratings were also looked at during this process to help plan.

Some of the issues identified during research:

  • The search experience in hotels wasn’t linear as it had the user jump back and forth between search results, location field, calendar and traveler details. This resulted in having to load the search results multiple times while making a search.
  • The sorting and filtering options were too limited and the design didn’t allow much room for expanding the filter set.
  • Search result rows weren’t very engaging and the layout weren’t flexible enough to add additional messaging and information. The search results were becoming claustrophobic.
  • Using the map view made it difficult to compare hotels by not showing prices on the map or allowing you to compare easily. Users also had a hard time locating the map button.
  • Hotel detail screens required additional options like paying later at the hotel and displaying resort fees.

Brainstorm & concepting

Visualizing user path

During the brainstorming phase, My PM and I spent time whiteboarding to:

Identify key moments in a user’s journey and the considerations that matter to them. What are the moments that are significant while booking a hotel?

Brainstorm new functionality that could help users have a better experience booking a hotel.

Refine the scope. Start talks with engineering about resources Find a realistic goal for mvp. Based on our sessions, PM created a requirements document.

Lots of concepts of screen layouts were sketched out in order to get as many ideas out as I could so that I could find the ones that worked better than others. I got regular feedback from my PM on the concepts as I worked.

Through this process of creating an array of concepts I was able to narrow down the design patterns that made the most sense while refining the user path. Presenting my process in design critiques on a regular basis allowed other team members to chime in and provide valuable feedback. I also worked closely with my engineering team during this stage to get feedback on technical feasibility and potential restrictions with the designs.

Wireframing a transition interaction from search results to map view

Another part of my concepting process was to prototype out all the screen transitions. The purpose of my transition animations are to give visual cues that help guide the user down a path. By sharing elements across screens, a user can easily follow where they are rather than be presented with completely new screens.

Prototyping & Testing

High fidelity mockups were created by me to use in prototypes that were used to perform usability studies and to gather feedback from our users. We used a combination of usability websites and in-person studies where we gave them tasks to complete in order to find ux issues or validate design. We found users responded really well to the new map and filters functionality as it gave them more control over their search which had been severely lacking before. Based on the learnings and with quick iteration, I was able to land on a user experience that was easy to use and had a clear and linear flow.


The Designs

Search

A simple and intuitive search screen allowed for easy searching. By showing nearby locations and previous searches, users could spend less time typing. Automatically advancing to calendar picker also helped improve efficiency.

Search flow

Search results

The search result screen needed to be engaging, functional and flexible. A peeking map surfaced the important map browsing functionality. (More on that below) I used cards to display search results and used big bold imagery to draw in the user while also creating a system for results that housed a variety of types of information and messaging. (More on that below)

Search results + scrolled

Search Result Cards

Large images were used to draw the user in and to create breathing room. The structure of the cards was built in a way that utilized each corner of the card layout to house information when relevant. Depending on the user’s login, location or membership status, each card could adapt to the data required to be shown. For example: urgency messaging always lives in the top right corner, guest recommendation or rating lives in the bottom left, price and booking information lives in the bottom right. Color averaged gradients were used to create contrast beneath text while blending seamlessly into the imagery.

Different variations of card structure

Cardview Documentation

The rules I created for search result cards were documented as part of my mobile styleguide.

Hotel result cards in the styleguide

Map

Many of our users expressed the importance of location while browsing hotels. To surface the map functionality, I positioned it at the top of the search results to allow users to tap or pull down the results to jump straight into the map. Our users really enjoyed this behavior and made it more widely usable to everyone. After scrolling, a floating map button made it easy to jump to the map. Once on the map, a user can browse with price pins and tap on them to get a quick view at the bottom. This quick view area also acts as a carousel allowing users to swipe left or right to compare listings.

Map peeking and map screen

Sort & Filter

Once separated, sorting and filtering were brought together into one scrollable screen that allowed for much richer filtering. A dual price slider allowed for more granular control over nightly cost. A new star rating selector allowed users to select precise star ratings. Neighborhood selection and booking options were also added for advanced filtering. With all these new options and a layout that was expandable, users had more control over their search and our product team had more ability to experiment with new filtering features.

Hotel Filters

Hotel Details

With the hotel details screen, it was important to give the user the right amount of information to make a decision and simplify the flow. One way I did this was by bringing the room selection onto the details screen which removed an extra tap and allowed the user to compare rooms while still deciding about the hotel amenities. Strikethrough pricing, urgency messaging, hotel fees and more were built into the page with rules on placement. Similar to the result cards, this allowed the product to adapt and show relevant information in a predictable and flexible way. A button to select a room is always present regardless of your scroll position to allow users a clear call to action to book.

Hotel details (scrolled)

Checkout

Vital information such as hotel dates, address, cancellation and price is clearly displayed to alleviate user anxiety when booking. To make checkout smooth, the user can choose between entering their information or signing in to pre-fill guest details and credit card info. Guest and credit card forms are simple and paginated to reduce cognitive load on users. A fun slide-to-book helped reduce booking anxiety and helped to signify completion.

Checkout flow

Implementation

During implementation phase I worked closely with the engineers on implementation. I created redline specs, flow diagrams, provided assets, reviewed UI builds and helped with QA testing.

Rollout + A/B Testing

At Expedia, we rolled out new features and redesigns as A/B tests. This allowed us to monitor the conversion rates from a business perspective as well as well as help users have a better experience through the flow by identifying drop off points in the funnel. After hotels was fully rolled out, we used the new adaptable layout to perform A/B tests.

One of the A/B tests on checkout for displaying fees due at the hotel

Summary

With the completion of the new hotels experience, I was able to use it as a blueprint for the rest of our lines of business including flights, bundle deals, car rentals and activities. You can view more of those projects here.

After shipping hotels I worked with our iOS designers to use our new design language and learnings to create a cohesive user experience across Android, iOS and mobile web.