Map Design for Hotel Bookings
How might we improve the way hotels, localities and landmarks are shown on maps
Overview
This is a feature I redesigned for, Makemytrip.com (MMT), India’s premier online travel aggregator(OTA). Over a period of time we have been improving the way location related information is shown on our hotels product funnel.
That’s because location is one of the main things users consider while choosing, comparing & finally booking a travel accommodation. Research by the Boston Consulting Group on the indian travel market suggests maps are the 3rd most visited touchpoint after OTAs and Google Search for Indian travellers. And travel websites with maps show lower visits to google maps.
On our platform too, location is the second most used filter after price. Our data insights also revealed that users travelling internationally rely heavily on maps.
Problem Statement
Improving the MMT map experience was an exceptional challenge for 2 reasons:
- The gold standard for mobile map interaction is google maps. But user expectations and goals on a travel website are different from those on Gmaps. So far, no other major OTA in India or outside had really cracked the map experience.
- In the domestic travel market, MMT sets the standard for OTA design and the majority of our user base is Indian. But with Indians taking international trips increasingly, our product is compared to global giants like Airbnb and Booking.com. To compete with them we must have feature parity with them. And a map view is a basic tool international travellers expect to have on the OTA of their choice.
Our aim was to improve visibility of maps on the hotel listing page and resolve usability issues in the current design of our android & iOS map view.
Users & Audience
Though we already had a map feature, users hardly interacted with it. As a product team we started to believe that perhaps our customer base is not tech savvy enough to use this feature. However, that was a false belief because a vast percentage of the same user segment interacted with map centric products like Uber and Google Maps on a daily basis.
For the sake of explaining the task flows of this project, let us consider the below 2 personas:
Scope & Constraints
Search limitations
Our current tech stack does not support multi-city search in the hotel funnel, i.e. users cannot search for “hotels in Kerala” or “hotels in Thailand” because the results would be ranging across different cities. So far this gap in our search functionality has been considered an edge case because most users search for hotels in particular cities.
But this constraint also applies to the map view, where we cannot populate hotels that are outside the city or district that the user has searched for.
Impact of Covid19
This project was released in the beginning of 2020 and its growth and usage has been hampered greatly due to the impact of Covid19 on the travel industry.
Process
Step 1: Guerilla testing the existing feature
We started by conducting a round of guerilla testing with 12 users to observe how they interact with maps and identified the key usability issues in the existing feature. Here are the issues we discovered:
#1. No information about landmarks or localities: Maps have moved from physical to digital medium but their function remains the same — to give a lay of the land. Even when maps were physical, landmarks were an integral part of them because they act as identifiers that users can navigate with. People use maps to get contextual information like:
“how far is this hotel from the city centre?” or “are there any 5 star hotels on this beach?”
Especially when users are new to a destination, the major guiding points become the sights they will see and the landmarks they want to visit. Our map was a birds eye view of a city with hotels populated on it. It did not show any landmarks or locality related information — as a result users found it hard to navigate.
#2. Poor Discoverability: In the map view, functions like search, area guide were hiding behind ambiguously worded touch points. It’s important to get progressive disclosure right. By showing too much information at one stage we risk overwhelming the user. But by showing too little, we might hinder discoverability of information because users don’t get motivated to explore further.
In this map we’ve made the second mistake. Rather than surface relevant functions and content upfront we hid away everything behind a tap — which a user may or may not even make! Just 3 out of 12 users discovered the search on the map. And none of the users interacted with the “area guide” CTA
#3. Carousel added clutter: The order in which the hotel cards were shown was the same as the listing page — sorted by popularity. That meant hotels which are next to each other in the carousel can be kilometers apart on the map. We observed, most users in our guerilla tests interacted with the carousel by swiping it but lost interest soon after. To view a particular hotel they tapped on its icon on the map, zoomed in and then tapped on other hotels near it.
While browsing on map, users expect to view properties that have a geographic proximity. So while the carousel put more information in front of the user — it was not relevant.
#4. Information provided on the Hotel cards: Though our hotel cards are constantly present on the screen, the information they provide is broken and not enough motivation for users to tap on them and move ahead in the funnel.
Step 2: Competitive Analysis
We also conducted a competitive analysis of apps with map centric task flows like google maps, Uber, booking.com, agoda.com etc. This helped us understand what the basic expectation of users could be in a map feature.
And lastly, we took learnings from our map view on desktop and included things that worked well on desktop experience, on mobile as well.
Step 3: Design Explorations
Based on the insights from guerilla testing and competitive analysis I started making some design explorations(shown below). And through a series of iterations based on feedback shared by other stakeholders in this project we finalised a design solution that met our project goals.
In these explorations we experimented with different patterns, for example, the way users toggle between map and list view, entry point of the area guide & how hotel information is shown.
Though some of our initial explorations were ambitious and edging towards feature frenzy, the final solution focused on reducing cognitive load. Map can be a cognitively loaded experience and usually more tech savvy users interact with them. We decided to do fewer things — but do them well.
The final design
Here are the key focuses of the redesign:
#1. Reducing cognitive load: Many of the changes that make a marked difference to the UX of a map cannot be communicated by a mock. For example, the way hotels are clustered together in the previous map made it impossible to tap on any one particular marker. By trial and error we improved the default zoom level of the map, the density of hotels shown at a given level of zoom and the z-index of the hotel markers so that they don’t clustered together they way they did in the previous map.
We also changed the way hotel information was shown. Rather than a persistent carousel, users only saw hotels when they tapped on a particular hotel marker.
#2. Filters:
Filters are important because our data suggests users that apply them have a higher chance of converting. When we redesigned our desktop filters to be upfront, we saw a marked upside in the number of users applying filters. We carried the same forward to our desktop maps and found- once again — users that applied filters while browsing converted more than those who didn’t.
And so, we applied this learning to our mobile maps as well and integrated filters. Though we explored upfront filters on mobile as well, we finalised on an option that would promote filter usage while ensuring visual and cognitive load are kept minimal.
#3. Landmarks:
This project was not just a UX/UI revamp; we also worked on the way our backend data was structured. It wasn’t just a matter of showing the information the map; in fact if we started to populate every landmark in our database — users wouldn’t be able to see the map below!
So we divided our laundry list of landmarks, transit hubs and other relevant points of interest (POI) into a 3 level prioritised list. Highest priority POIs were major tourist sights (eg. Taj mahal in Agra) and intra city transit hubs (eg. Indira Gandhi International Airport, New Delhi). These landmarks are shown on the map by default.
Next came the medium priority POIs such as markets, office complexes, major intercity transit hubs. And lastly the low priority POIs which could be bus stops, smaller subway stations and other smaller landmarks. These two categories were only shown based on the zoom level of the user. If someone zooms in to locality level — they can view medium priority POIs, and if they zoom in further at a street level they can also view low priority POIs.
#4. Area guide:
Many user interviews have revealed that users switch between our platform and google search to figure out which locality is most suitable for them to stay. Makemytrip also has rich information in the form of area guides about localities of popular tourist destinations like Goa, Thailand, Dubai etc.
But it was shown as a compulsory popup that appeared when the user lands on the listing page to view results for their search. As a result only 30% users actually interacted with the popup, while the majority simply closed it. They miss out on relevant information which could possibly help them decide their travel accommodation without leaving our platform.
To solve this we integrated the area guide information into our map’s primary navigation as an “explore” bottom sheet. By default the bottom sheet stays partially visible and users can easily switch between map view and area guide by swiping. We chose this pattern because we’re able to give the user a sneak peak while ultimately letting the reins of exploration lay in their hands.
Outcome
Designing maps is different from other challenges because it isn’t solved just by making the right mocks — rather designers and developers collaborate to get it right by trial and error.
The redesigned map was initially released in January 2020 in A/B with the old design. It went 100% live in March 2020. But after the Covid19 outbreak, the travel industry has pretty much come to a halt. Now in the third quarter of this year we are seeing some green shoots as countries are opening up travel again. However, there’s still some time before users start travelling with the same fearless enthusiasm as they did before 2020.
Our product team has shared some initial insights that are encouraging:
- In the third quarter of 2020 we find map usage has gone up slightly compared to the previous version despite having significantly reduced traffic compared to pre-Covid19 quarter. So we know that the visibility of our map entry point has improved.
- In comparison to users who shortlist hotels from the listing page, those who used Maps were 35% more likely to book one of the visited hotels. The exact percentage is not the most important part here — we’ve verified that getting a visual idea of where a hotel is located helps users shortlist faster! This helps us prioritise the next set of improvements to make to the map.
We’re still working on our map and location experience and there are still miles to go before we sleep! If you’re planning a trip any time soon, do try our new map on android and share your feedback with me in the comments section :)
