Case study design system india

Amit Somani, now Managing Partner at Prime Venture Partners, joined MakeMyTrip (MMT) from Google in 2010. He remembers being taken aback by the busy interface and pushing for change – that was before he talked to users.

 “Talking to customers showed that users actually appreciated the ‘liveliness’ of the MMT interface and said it reminded them of a bazaar. Once a brand is built in a user’s mind and appreciated by them, you have to bring them along for any radical changes.”

Amit Somani, currently Managing Partner, Prime Venture Partners, worked at MMT in 2010

Not just users, internal teams must also buy-in to any design changes. How do you navigate a complex product and organisational landscape, while ensuring that product and design keeps evolving to meet user needs? We asked the MMT team to share their learning.

Building the Cosmos

After the merger of MMT, GoIbibo and RedBus in 2018, the teams identified three business blockers:

1. Deep discounts could no longer be the primary driver for user retention

2.There were widespread inconsistencies in the interface and experience: ‘the org chart was being shipped,’ where every team and section had its own design rules

3. As business expanded and features were added, the navigation had become un-scalable

Travel app design case study
After the merger, the product and design teams identified these three business blockers

Instead of taking a page-by-page approach, Jay Dutta, Senior Vice President, Design, Go-MMT group, says they decided to start building a design system called Cosmos, which is now in its third version.

Cosmos, MMT’s design system is founded on 4Cs: Clarity, Context, Continuity and Confidence. 

Unlike other e-commerce transactions, travel typically involves multiple user visits before the actual booking takes place. The first step is for the team to ensure that all the information is presented with clarity. For the user to really feel confident, however, both context and continuity must be an integral part of their experience.

How to create a design system
 MMT’s Design System is called Cosmos and built on 4 founding principles

Today, Cosmos has grown to embrace different properties including Native Apps, Progressive WebApps, Desktop and Enterprise portals. These are used by diverse users – from large hotel chains to owners of boutique Bed & Breakfasts, external travel agents to internal holiday experts and company employees buying for business travel. 

Cosmos is the common language of frameworks, behaviour patterns, components, animation, iconography and illustrations that unites them all. Originally built in Sketch, and integrated with Brand.ai, the system is now a Figma native. 

Versions of a design system
Cosmos continues to evolve, as the business does

The Ship of Theseus Approach to Design

Dutta who has previously worked in Flipkart and Adobe, knows that for a design system to succeed, it must embrace the way a company works.

The MMT team likens their approach to the Ship of Theseus – the identity experiment proposed by Plato in 400 BC, where a ship is changed plank by plank until the old ship ceases to exist.

Instead of sweeping changes, the team started with non-threatening modifications to common properties. To start with, they only changed the home page, onboarding and header and footer of the app and site. They went on to suggest small design changes to a business division, which they then used to make their case to others. Anirudh Maitra, who formerly worked with MMT as a Product Manager and closely collaborated with the design team says, “This approach allowed lines of business to get comfortable with risk and proceed step by step, or plank by plank.” 

​​Once data validating a design intervention came in, everybody wanted to be part of the process. For example, moving login to a single screen from multiple sliders, resulted in 72% of users going forward and accessing the app home-screen, as opposed to 64% in the previous design. 

Single Screen Login
Cosmos started gaining support across the organisation as the business impact became evident

Maitra points to another example: “Creating modules for the best prices on flights and hotels based on past searches, led to a conversion uplift of 5% and 8% respectively. Once the business impact became evident, other lines of business like Holidays, Ground Transport and Post-Sales started to support Cosmos across product flows.”

“You need to go to business teams with business logic,” says Dutta. “Only when they hear that poor navigation or inconsistencies are impacting business, will they be motivated to change.”

Learnings from Failures

There have been many experiments that have not worked, including one that showed searches in a bar chart format, instead of a table.

Improving UI for Travel app
An experiment to show search history in a bar chart did not work well with users

“We’ve found that our users are used to cognitive overload,” says Abhinav Mittal, a Senior Design Manager who has worked on the Cosmos Design System from its conception. “They would rather have the information presented upfront, and not feel like they are missing some fine print.” This kind of learning is baked into Cosmos. 

Sea-Worthy

MMT recently launched its Arabic site for the Middle East. Despite the fundamental differences between scripts, the Cosmos principles and components worked just fine. 

Mutiple languages travel app
Cosmos made the launch of an Arabic site seamless, despite the differences in scripts

It is always a challenge to take a step back and re-evaluate your design approach, because the benefits aren’t necessarily immediate or obvious. However, as the MMT team has found, once you have the basic building blocks in place, your velocity of new feature development accelerates significantly.

“A design system by definition is never complete,” says Dutta, “but it’s good to know that the ‘ship’ we’ve built is definitely sea-worthy.”

3 COMMENTS

  1. This is the first story I have seen on MMt design. Usually they are the design villains while Cleartrip are the heroes. Good to read this

  2. Interesting contrast to the Unacademy story where they decided to build a new app in parallel. Surgical strike vs SOT. What cd be reason? Company culture?

Leave a comment

All comments are moderated according to our comment policy. Your email address will NOT be published. All fields are required.

Please enter your comment
Please enter your name

The Hard Copy is a resource for building and growing digital–first brands. Sign up to get case studies and advice in your inbox every week.