A couple of weeks ago, we wrote about how Flipkart undertook a massive product redesign to improve user experience for its large, diverse customer base. Part of this exercise was also a complete visual overhaul. We spoke to Gaurav Mathur, Vice President – Design at Flipkart to understand how they went about it.
If you have a legacy website or app that needs visual streamlining but aren’t sure where to start, this Q&A will be useful.
What was your primary goal with the redesign?
For the past few years, Flipkart has been continuously building and shipping new features on the app. These launches happened individually based on the needs of the business and it had been a while since the app design was looked at end-to-end. The Flipkart team felt that the time was ripe to look at the visual design holistically and make changes. The question we asked ourselves was, is there a simpler way in which our app can be presented to customers?
Revamping an app at this scale in terms of categories and use cases must have been challenging. How did you go about it?
We started by doing an audit of visuals across many hundreds of app screens. In some places, a fundamental change in look and feel was necessary. In others, a cleanup and standardisation of design elements was enough.
We approached the revamp from 4 pillars: typography, iconography, colour systems, and grids & layouts. We defined the problems and challenges with each pillar and determined how to address them.
Walk us through each of these?
Typography
During their shopping journey, customers have to read and process a lot of information. This happens at different levels: browsing categories, going through product information, reading customer reviews, etc. Easy readability, particularly at small font sizes, is crucial for a good shopping experience.
The font we were using, Roboto, was not solving for this (THC note: Roboto, among the most popular Google fonts, has itself undergone a major upgrade since then.) So we switched to Inter, which is a font designed for easy readability of lower case and sentence case on screens.
Roboto -> Inter
Inter has:
- A taller x-height that makes the font more readable at small sizes
- Tabular figures with uniform spacing for better vertical alignment
Iconography
Flipkart had a pretty old icon style (created around 2014) which badly needed an update. Over time, multiple icon libraries had also been created and were being used by different design teams within Flipkart. This meant that there was no visual consistency across screens.
We have now created a single family of icons in a cleaner, line drawing style covering an extensive number of use cases. Going forward, this library is the single source from which icons will be selected. We have also defined the icon style so that as new use cases arise, this library can be officially expanded.
Colours
The Flipkart blue and yellow are pretty iconic and very recognisable today. But different values of these colours were being used on different screens on the app. There was also a bit of reinventing the wheel happening with designers creating colour palettes in isolation for various campaigns or pages.
As part of the cleanup, we have defined a single colour system and made the primary and secondary palette codes accessible to all design teams so that visual consistency is maintained. We will go beyond this system only in exceptional cases.
What advice would you give to teams doing an overhaul of visual design?
Before initiating a visual redesign, clearly articulate the reasons why it is necessary. For Flipkart, the primary reason was to reduce visual clutter and drive user attention to critical information and actions through a clear visual hierarchy. We also wanted to build credibility and trust through a consistent experience. (Read more about this in Part 1 of this conversation)
Lay down principles that will guide you through the elaborate process and help in making decisions at every stage. Combine the visual design revamp with a Design System or Design Language System (DLS) development—this will help you make the changes easy to implement on a large scale. Use the atomic design approach (developed by interface designer Brad Frost) to create reusable components that increase efficiency while also providing a common vocabulary for the design, engineering, and product teams.
A number of teams will be impacted while redesigning a large product; so extensively socialise the redesign among all involved stakeholders. This is important for them to get onboard.
Lastly, have fun building a new version of your product and bring delight to your customers!
