Map Design for Hotel Bookings
By: Srishti Gupta
Tags: Mobile App Development, Case Study, UX Design, Maps, Interaction Design

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.

The destination autosuggest on the Makemytrip.com home page

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.

The previous map on android which we tested

#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

Tap 1: location, Tap 2: search page, Tap 3: actually type in your search!

#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.

This hotel is a 100% match! For what though?

#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.