Reimagined Flipkart’s web experience across all core touch-points like navigation, home, search, and checkout.
The Old Experience
Problem #1: Information architecture
- One constant feedback we got from customers in interviews was that it’s hard for them to intuitively reach products they had in mind.
- Information architecture problems aggravated as we moved toward smaller cities where people heavily depended on imagery to guide them.
- Flipkart has a sizeable user-base of native language speakers, hence building experiences based on their expectations and mental models needed us to rethink how we surface information on our product.
Problem #2: Parity with our Apps
- Flipkart has been a mobile-first product company for many years now; due to this our website experience constantly lags on features with our apps.
- Our website needed a separate design effort each time we built new features. Hence we had to spend a huge amount of bandwidth to simply adapt our experiences for the web.
- Our apps had moved to a refreshed design language — We needed to scale that language to our website to be consistent for our users.
#Problem 3: Modularity and Consistency
Our website was plagued with a plethora of UX problems that could easily be overcome by focussing on modular components. It severely restricted us from running experiments & ranking information on our product page.
Our product page needed to adapt with different categories and provide tailored experiences based on their context.
The new design
The new “Homepage and Navigation”
- Visual browsing — Photo based visual navigation in order to simplify discovery. We also introduced visual widgets in the home feed to capture deeper intent.
- Mobile extensibility — We created a 360px column in order to bring widgets/features designed for mobile directly onto the web. Thus bringing down our design parity time to almost zero for the homepage.
- Navigation hierarchy— The new design also showcases a consistent way of building a navigation experience without compromising on the breadth of our stores.
The new “Search & Browse” experience
We needed our search/browse experience to adapt based on the intent of every query.
- Broad Queries
“Shoes”, “T-shirt”, “phone cases” etc are examples of queries in this bucket. We needed a way to quickly show the breadth of such products from our catalogue such that the user quickly reaches their desired product or gets inspired enough to filter the products. Hence, we chose to show such queries in a Grid view with a higher focus on imagery.
- Narrow Queries
“iPhone 6s plus”, “RedMi note 4”, “Samsung TVs” etc are examples of queries in this bucket. We needed to show a deeper level of information here since the user has almost already decided to a great extent what they need. Hence, we chose to go with a List view in order to surface specs of such products.
Here is an example of how the experiences differed.
The new “Product page”
Apart from the obvious UX fixes, we brought our product page under a consistent design system with a huge focus on modularity. This has almost eliminated our need to redesign the whole page in order to build business specific experiences.
We paid special attention to the information we surfaced above-the-fold. Hence creating a details page that was useful as soon as it loads. This brought in a great amount of conversion benefits deeper in the funnel.
- Phase 1: Launched the new experience on our Search, Browse and Product details pages via an A/B. This had a huge impact on checkout & cart adds with a net increase in orders per customer for Flipkart.
- Phase 2: Launched our Checkout, Payments and Order management experience via an A/B. Drove significantly higher conversions + boosted high value item sales.
- Phase 3 (Planned): Currently we’re enhancing our core navigation and homepage.