Hotwire – Car Maps

UI Design, UX Design, Interaction Design


Challenge

I was tasked with bringing a map results view to the Hotwire car results page. We previously had a toggle that enabled users to flip from a full list view over to a full map view. We wanted to try to build a singular view for both because we identified a customer painpoint.

Users had difficulty identifying where a car rental agency location was in relation to the trip's city center, points of interest, their hotel, or airport where they flew in to.

One of the core use cases we wanted to address were users that have flexibility on location and time on where they will pick-up and drop-off their rental. Most users pick-up at the airport, and we wanted to show users that there are more options outside of the airport or in city center.

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

To make it easier on our engineering team for the MVP, we made the decision early on to port our existing hotel split map/list view to the car product. However, it wasn't a 1-to-1 port and required more research and testing.

I set up some user testing and a study plan. I was looking to see if users could easily navigate the new hybrid view, if they understood how tapping on map pin correlated to an item in the list, if they knew that some rental agencies had multiple car options in one location, and if users would expand their search zone to find a better price. We concepted a number of ideas to combine the separate views and eventually landed on the option below.

This new map view eventually led to a concept we engineered, called "pin-clustering" where results that are in the same area or block get clustered together so you can view them all at once. It informed future product decisions.

Below you can see some of the userflows I outlined, wireframes I created, and final UI that was implemented.

Prototype and final design for car map results

This was the final design we ended up shipping. I worked closely with my user experience design partner, as well as our engineering team to build out these interactions and animations.

We wanted to bring some delightful transitions and animations to call attention to some of the temporary and important UI. We added the "top" and "see list" controls so that users could get back to the hybrid view with relative ease.

The feature performed really well for the company. We saw much higher engagement with the car product for city searches, as well as a ~2% purchase rate lift. However, the feature was mostly flat for airport searches. I worked with our analyst and a researcher and concluded that users did not need to utilize a map in airport searches. It wasn't as important of an attribute during search as something like daily rate or car type.