Hotwire – Dynamic Maps

UI Design, UX Design, Interaction Design


Challenge

While working at Hotwire, one of the challenges I was tasked with was helping users discover more hotel inventory. We wanted to make it easier for users to expand their search for hotels in case an area was sold out, low on availability, or the prices were outside of their budget.

Two of the core use cases we wanted to address were users on a road-trip needing a last-minute hotel and users visiting a new city that don't need to stay in city-center. We evaluated a number of different features through a combination of six-up exercises and competitive analyses and whittled it down to a common interaction pattern.

If you're interested in taking a look at my solutions and designs, please download the Hotwire® iPhone® and iPad® applications.







Approach to the challenge

In order to give users more choice, I decided to implement a dynamic map search feature that would enable iPhone users to perform searches in areas outside of their original search zone. It would enable them to expand their search radius and compare hotels in areas that might have more availability and stay within their budgets. I evaluated a number of apps prior to designing this feature. Some of them included Google Maps, Booking.com, and Yelp.

Given that this was an interaction pattern that was well-established, we opted to do a combination of user testing and quantitative A/B testing in the live app. I took it upon myself to collaborate with our research team, draft up a study plan, and test with users. We determined that while an automatic dynamic search required one less step or tap for the users, the user-intitiated one was more well-received because it allowed the user to be in control and set the boundaries.

I determined that some type of user-initiated button would be the best way to test into a dynamic feature, vs. jumping straight into a constantly-updating map. Too many apps that we tested against that dynamically updated the map on its own, caused too much confusion and friction for the testers.

Below you can see some of the wireframing process before I designed the final feature.

Prototype and final design for dynamic maps

This was the final design we ended up shipping. I wanted to ensure that users were able to see it, so we had engineering animate the button in when the user pans outside of the initial search zone.

If a user pans the map away from the initial bounding box, a dynamic search button labeled "Search here" animates in. This prompts the user that there are other results they can view.

Additionally, the contextual header information changes based on where the user has panned to. In this example, a user has performed a search in Miami, and pans up to West Palm Beach. When the button animates in, it informs the user that they can perform a new search within the map and reveal the results in that area.

The feature performed really well. We saw a 17% lift in users interacting with the map and a ~3% purchase rate lift.