Redesigning location filters for hotels

MakeMyTrip’s Design team works constantly on design changes that make the overall booking experience on any device easier. One such change has been revamping the location filter in Hotels for almost half a million users on mobile (Android + iOS + Mobile Browsers).

What

Filters are a very functional way for users to surface the relevant content for their situation by hiding undesirable options from high volumes of content. It becomes important to make sure that they are simple and have a clear hierarchy to achieve the task. In this project, we worked on redesigning the location filters in the hotel’s funnel to enhance usability and simplify the information.

Why

From MMT’s usage data, we have found that the users who apply filters convert better. And location filter is one of the top 3 filters used to narrow down the options.

How

We started out by understanding the classification of locations in Indian and international context and how are they mapped in our database. We then ideated on various solutions.

Fig. 1 Approach 1 — Vertical Navigation

Fig. 2 Approach 2 and 3 — Sliders

Though some explorations were not very different visually, with each one we were reaching towards a better solution. Initial approaches were either not able to solve for all the use cases or had some other limitation. For example, in Approach 1, vertical menu had cities in some cases and location categories like Best for Indians in other. What the vertical menu stood for could confuse users. Similarly in Approach 2, sliders didn’t seem very intuitive for two parallel pages along with selection action.

At last, we chose the solution which had goodness of all the worlds —

Fig. 3 Final Approach

Some of the problems we solved —

1. From slide up to full page
   To start with, the most visible change is that we have moved from a 70% height, 90% width card to a full pager. Since the location filter is a content-heavy feature for a prime location, it helped the content to look more breathable.

Fig. 4 From slide up to full page — Earlier (left), Redesigned (right)

2. Information Hierarchy

A user can search for anything from a point on the map like Qutub Minar to a collection of such points — City/Area/District/Region.

To explain these terms briefly -

a. Regions and Districts mean same from a tech perspective — a collection of cities but have a different meaning from an administrative point of view. A district is defined as per official boundaries whereas a region is a colloquial term. For eg., Gurgaon city is part of the Gurgaon district as well as the Delhi NCR region.

Fig. 5 Region/District/City/Area (For representational purposes only)

b. Area — areas that make up a city. For eg., Sector 29 in Gurgaon

c. POI — Point of interests/landmarks. For eg., IGI Airport, Red Fort

Despite having these technical differences in the back-end, the idea was to provide the user with a seamless experience to move forward irrespective of what they searched for.

Earlier, regions and cities were at the same level. As shown in Fig. 5, one had to select the city from the top, scroll and then explore the top areas in the city. Also, it was not very intuitive to select a piece of related information like top areas of the same city from a different group.

Fig. 6 Region vs City — Earlier

While rethinking the information architecture for this problem, we decided to separate the visible information for searches made for region/district and cities.

Fig. 7 Region vs City — Redesigned

3. Inconsistencies in filter selection
If users see different ways that can take them to the same action, they may be unclear on what differences there might be between two. The same was happening when selecting a location — checkboxes and tags. We have tried to standardized the selection of a location using tags throughout.

Fig. 8 Multiple ways to take the same action — Earlier (left and middle), Redesigned (right)

4. Broken search experience
We started with changing the search bar’s placeholder text from ‘Enter area/POI name’ to ’search here’ as POI (Point of Interest) is not a commonly understood term by users.

We know from the data that on average, it takes 3–4 sessions for a user to complete a booking. They revisit to check and compare other options. So, it becomes very important to simplify the experience of a repeat user by helping them to recognize instead of recalling the elements from their previous sessions. To cater to this, we added ‘’Recent Searches’’ in the location search experience.

Fig. 9 Search experience disconnect — Earlier (top), Redesigned (bottom)

5. Choice Paralysis
We have come to the time where people prefer blogs over books and tweets over blogs. How do we show them the whole catalog of a prime location? And also save them from the choice paralysis of selecting a hotel from thousands of options? That’s when filters come to rescue. To reinforce this feeling of a reduced number of options, we have tried to show the number of hotels in the Call to Action button — ‘Show 66 Hotels’ on the location filter screen.

Fig. 10 Choice Paralysis — Earlier (left), Redesigned (right)

Testing

We validated our design solution with the help of guerrilla testing. We created two simple tasks for users to complete -

1. In Delhi NCR, how would you look for hotels in Noida?

2. How would you look for hotels near your workplace?

We tested with 6 users — 3 males and 3 females within the age group of 23 to 35. We prompted them with some introductory questions to understand their past travel behavior. We assured them that there are no right or wrong answers and we are just testing the product. 5 out of 6 users were able to achieve the set success metric. Though we did this testing with a very small group, the results gave us confidence in our approach.

Currently, we are performing the User Acceptance Testing on the implemented parts of the project.

Way Forward

As mentioned above, we are working on its implementation and planning to roll it out in phases in next 2–3 months. We are excited for it to go live and as we will learn more from the data we will be able to continue improving this feature.