MakeMyTrip Designers On Setting Up And Scaling An Immersive Design System

When a travel company survives epidemics, a pandemic, recessions, market crashes and a grave crisis like 9/11, there is always a strong foundation backing it up. For MakeMyTrip, it was the ‘Cosmos’ philosophy and the urge to build progress based on the values imparted by it. MMT has been in the game for 21 years, and it has now merged with Goibibo and redBus to become the GoMMT Group. 

At Inc42’s The Makers Summit 2021, Jay Dutta, the senior vice-president of UX design, and Abhinav Mittal, the principal interaction designer from MakeMyTrip, had shared their wisdom on escalating better design strategies. If you had missed the masterclass and are curious to know what ‘Cosmos’ is really about, you are at the right place. We have collated the key insights from the session so that you may learn and leverage them during your journey.  

Find the ‘Why’ Behind Redesigning

Over the years, the MMT team realised the glitches in the handling of its own mobile application. According to Dutta, the homepage celebrated the vibrant coupon fest and was filled with overwhelming offers and discounts. Every hotel had its own voice, and different headers and footers existed in contrast to each other. Cohesiveness was missing, and inconsistent designs had marred the home page. The design team had built an app that was not appropriately leveraging the power of the mobile phone. Mittal called it the ‘breaking point’ of MakeMyTrip’s mobile app’s home page. 

All that was not adding to a user’s journey was redesigned to customise the experience. To begin with, they added the ‘My’ to MakeMyTrip to give it an individualised sense. The notion behind putting it back was to personalise the experience and provide the right triggers instead of just hyping up the user. 

They started building it around people and contextualised it depending on their last usage. For instance, Dutta talked about how a person, after using the app and putting down all the details regarding dates, location/s, number of people and a lot more, checks the pricing and closes the app. The next day, the user discusses the plan with friends and family but comes back to the app to find that all previous browsing details have disappeared. Now, he/she will have to feed the app with all the details again. This not only wastes a user’s time but also a lot of effort. Hence, the design team came up with the idea to contextualise the search and display individual journeys taken by each user so that the user can build over the already existing information even further. The team even started notifying the rise or fall in flight prices due to their highly volatile nature. At a fundamental level, they drove the search further, based on past browsing instead of fetching in something new every time.  

STREAM THE SESSION HERE

Learn Even After Launching; Don’t Stop

Onboarding is crucial. If a user does not register on the app, then there is a high probability that something is wrong with the initial screens and graphics or even the content. Mittal said that the first redesigning process began with onboarding that involved three screens before the login screen came up with copies like ‘Travel Smart’, ‘Stay Easy’ and ‘Save More’. They analysed the data and saw that only 50% of users moved ahead compared to 64% earlier. The plunging data pushed them to find why the new design was not bringing in more users. They started testing, played around with the screens, twisted the messaging and enabled more actionable features. But nothing worked until all three screens were removed and only the login screen remained to ‘welcome them back’. 

“You don’t have to talk here and there but focus on the needs of the user. A user’s attention span has been slumping, making it even more crucial to build something keeping in mind the journey.”

They even separated their permissions on the app and saw a rise in the number of users who actually read them instead of just dropping off. Mittal said that MakeMyTrip has loads of contact and location permissions, but people continue to read and understand them. 

Interestingly, they saw several home page drop-offs when they tried to spoon-feed users on using the app. So, the team decided to remove it and added a pop-up bar that directed users to the help tool in case they needed it. After that, users were left for some solo exploration. 

But there was more. When they added bar graphs to show flight fares and flow-tested them, they received favourable feedback. But few interactions took place when this feature went live. So, they changed the heading from ‘Flight Fares’ to ‘Last Searched Flight’, added airline logos and contextualised the search, giving it more meaning that raised the engagement. 

In the beginning, Mittal quoted that all learnings became the foundation for ‘Cosmos’, a fundamental philosophy at MakeMyTrip that continues to insire all product creation. Simply put, it means every feature or characteristic addition must have ‘continuity’ of past browsing, lead to ‘clarity’ in decision-making, fill the incomplete information for the user with recommendations and suggestions via ‘context’ through machine learning, data science and geolocation, and finally, build ‘confidence’ within the user for future purchases. The 4Cs for slicing the unwanted and sewing together all user requirements have worked like gems, said Mittal. 

The Process Of Redesigning 

When the MMT team started redesigning its app, it began with the headers and footers and collaborated with developers to understand how they communicated. The design team understood how the development team named their components across all systems, regrouped all elements and defined a naming structure. They then created a common library to be used by all for font, animations, visuals and copies. Everything had a context by then and became relatable. 

But the app never remains the same. Every year, subtle changes are made, said Dutta. The team has already moved from Cosmos 1.0 to 4.0, and ideas continue to be tweaked. 

Answering queries from the audience, Dutta said that a design system is not a UI template. A design system needs to be definitive and must have its own values and principles, Mittal added. He shared his experience and said that he would always provide one ‘do’ and one ‘don’t’ with every design element. The MMT design team has regular meetings to decide upon new elements, whether those must be added or not and a lot more. All these make the product more flexible without blocking ideas, said Mittal. 

STREAM THE SESSION HERE

Adopt The Values 

Dutta talked about co-creating change with one’s production. According to him, it is always better when the ownership is distributed among all teams instead of the design team handling it alone. For him, it is imperative to understand what element is transactional or immersive. For instance, booking a flight will be more transactional while booking hotels and trips will be more immersive, he said.

He also recalled the way his team presented the idea of changing the app’s user interface via films. These were shown to the senior management, who agreed to the change and supported the team. Dutta later added how essential their buy-ins were. Moreover, the response that they got would have been unlikely had they just popped up with the request of changing the UI.

 Mittal further introduced the audience to changes made by them based on ‘Cosmos’. In fact, they changed their approach from being image-led to information-led which helped them bring about better changes to the design. Creating a hierarchy via costs or hotel type or basic information helped users navigate the app. As the information became clearer and more contextualised, it gave users enough confidence to go ahead with purchasing decisions. The designers also learnt that, unlike the popular notion, Indians liked it when more information was served to them, especially when splurging on trips. 

Needed: A Fine Balance Between Transaction And Inspiration

MakeMyTrip has added more lines of business, from train ticket reservations, flight, hotel and cab bookings, to visa and gift card services. The team has also revamped its desktop site as data shows that users make larger purchases on desktops/laptops than on mobile phones, said Dutta. MMT has made the experience even more immersive and personalised for users. For instance, it has recently introduced articles and experience blogs by travel experts on the website. This allows potential travellers to dive deep and understand the culture, know more about trip ideas and experiences of those who have already been there and thus become confident about their choice of destination. This is how MMT has ‘humanised’ holiday search for users and scaled this aspect. 

Talking about transaction and inspiration, Dutta said that it would be difficult for travel companies to differentiate between the two. However, the company has launched a new segment called Trip Ideas that inspires, is more visually concentrated and is structured around the sole idea of giving information to users. It talks about everything, right from things to do, the best time to go, hotels closest to the airport and other essential details. On the other hand, a flight search is more transactional. Thus, it is a cautious fusion of the two that needs to be handled with care.