Create a modern Hotels experience on Android that serves as a foundation for the rest of our Android and iOS experiences
I was the design lead on this project. My role being end-to-end which included Research, the user experience, visual design, motion design, testing & design handoff.
I collaborated with one PM, our Android Engineering team, a Product Analytics manager and had frequent design critiques with our team
Because the Hotel experience on mobile has become dated, users aren’t able to quickly and easily find and book hotels that fit their needs and the app’s layout isn’t able to handle new business requirements.
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 filling the needs of our customers
From the business perspective, we needed a design that accommodated new types of messaging within the search results and hotel detail screens such as urgency messaging, VIP status, guest recommendations and member discounts. Hotels also needed to be a flexible design that would be the foundation for the rest of the Android and iOS apps.
At the time, Android was transitioning to Material Design and as an Editor’s Choice app, so we felt the time was right to redesign the experience.
My PM and I spent time defining the project.
- Business goals: Things like keeping editor’s choice & keeping good standing with Google, increasing hotel conversion, reducing drop-offs within the funnel, and creating a framework for rapid A/B testing
- Defining scope: Figuring out what all we wanted to accomplish with MVP
- Timelines: Met with Engineering lead about our scope to get thoughts on resourcing and timelines
- Spec: A spec document was created containing the goals we outlined
We performed usability studies to see get a baseline of the existing hotels experience. This gave us insight into the pain points of the flow.
I also worked with our Analytics Manager 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 get a sense of how our users were feeling and the frustrations they were having.
Some of the issues identified during research:
- The search experience in hotels was frustrating as it made users 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 experienced drop off before selecting rooms
Brainstorm & concepting
Next step was brainstorming and concepting.
My PM and I identified key moments in user’s journey that are significant while booking hotel. Things like figuring out unfamiliar cities, considering nightly cost + fees, viewing images of hotel or amenities, and anxiety around purchasing and entering information.
Based on those we brainstormed product functionality and features that would help users through those key moments.
From there we whiteboarded high level navigation get a picture of the structure of the flow
Sketching & Wireframing
I then focused on creating rough sketches with the structure we outlined with the goal of getting lots of ideas out on paper while thinking about high level navigation and layout. I had regular sessions with PM and engineering to get feedback on concepts and technical feasibility.
My PM and I had lots of discussions about the business requirements and how the layout would be able to handle things like urgency messaging and hotel fee structure.
Wireframes were then made helping refine the flow and layout. With many iterations I was able to refine the user path.
Concepts and wireframes were shared during design critiques on a regular basis to gather feedback from our team. I also worked closely with my engineering team during this stage to get feedback on technical feasibility and potential restrictions with the designs.
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
I created high fidelity mockups to use in prototypes for 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.
I also worked with the engineering team to create prototype builds to test interactive features such as the map. 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.
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 helped improve efficiency. We also saw reduced drop-offs because of this change.
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 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.
I created rules for search result cards that were documented as part of my mobile styleguide. This was helpful for product when considering new messaging or tests.
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. 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.
Sort & Filter
Sorting and filtering were brought together into a single 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.
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 call to action is always present regardless of your scroll position to allow users to seamlessly continue booking.
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.
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, new features and redesigns were rolled out 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.
We saw an increase in hotel bookings by several percent and saw reduced drop-offs in search, hotel details and checkout screens.
We received great reviews from our customers and Google continued their Editor’s Choice
We now had a framework that allowed us to add new features and run better A/B tests.
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.