Redesigning Flipkart Retail

A lot of legacy systems that were enabling Flipkart to do high volume business with Vendors, had to be redesigned. To design is to make something intentional. I had the opportunity to redesign the entire retail suite of systems of Flipkart which enable multiple stakeholders on their job.

Duration

Mar - July, 2019.

Responsibilities

Information Architecture, Visual Design

Background

Right from when a Vendor is onboarded to do business with Flipkart, through raising purchase orders through to payments – all these activities are powered by internal systems within Flipkart.

Numerous people work on these applications in order to keep the heart beating for the business transactions between Retail Vendors and Flipkart. These systems have been built in 2012 without design.

Due to a pressing government policy, the need of the hour was to externalise large aspect of these systems to Retailers – Organisations with a lot of working capital, similar to Flipkart India Pvt. Ltd.

My Role

I was the lead designer on this project. I was accompanied by another designer from my team to understand these legacy consoles. We were to split the work in order to achieve this massive redesign.

img center Existing legacy UI

Existing UI

The existing systems have been put together by engineers way back in 2013. They haven’t been “designed” with any specific workflow in mind.

As a result, users had to adopt to these systems instead of the system serving the users’ workflow.

Users/Stakeholder Interviews

This was an interesting situation – there weren’t really any customers and users, yet! The legacy applications had to be redesigned and externalised.

Given the strict time constraint, I could only interview the stakeholders responsible for maintaining these applications, the Product managers. Also, from my previous experience I had interacted extensively with various users of these internal console within Flipkart. As a result, I knew what their job entails in the context of Retail.

The task was to get as much knowledge about the functional aspects of these consoles and redesign them so that they are easy to use.

Building shared understanding is a crucial aspect for any team

img center Mapping Flipkart’s Retail landscape

This is the first time someone has documented the entire retail process in the form of a journey map.

I took nearly 3 weeks to synthesise the notes from all the stakeholder interviews we had attended to arrive at this mind-map structure of the entire retail process.

My effort was hugely appreciated by all the stakeholders, including our VP of Product because this process was not documented, till date. I also did this so that anyone joining the team, whether a designer or a PM or an engineer can easily be onboarded into the system. It would’ve made my life much easier, when I initially joined the team.

img center A summary of the above mindmap from a process perspective.

A summary of the Retail process.

These are the various steps that are involved in the Retailer’s journey. Since, there were no retailers yet, we modeled this on the journey of how Flipkart does it’s business.

img center The various users involved in a retail business transaction.

People + Content + Context = I.A

We have multiple users who access various aspects of the system. Business Finance, Operations, Warehouse personnel, Business Development executives, finance & accounting people.

The content/entities accessed by each of them is captured in the picture on the side.

img center

Top-down Information Architecture

The lens of People, Content & Context gave me a strong foundation on how to approach the IA. I also did an open card-sort study with a few stakeholders to see if I was thinking in the right direction. This revealed that while the grouping was almost right, the nouns I had used to describe the high level items had to be re-looked at. I’ve made a few changes based on the feedback.

Bottom-up Information Architecture

I have combed through the various entities among the applications to figure out if there is any structure that exists among them. A structure at an entity level provides a solid foundation in arriving at the layout of the page. This is called bottom-up IA – where you look at the entities and attributes of the systems and find patterns.

img center img center img center

Making the Enterprise edible with a clean UI

img center Similar templates were created for all the main entities of Retail applications. Values have been obfuscated for the sake of privacy.

Typography, Space & Grid Systems.

Retail UIs are data-dense with lot of numeric data. A typeface that supports tabular numbers and that renders text legibly at smaller font-sizes is important.

I chose Inter as the typeface for Retail applications because of the above capabilities, looks professional and also is free to use for commercial purposes.

I’ve set the grid to be a 16 column grid to allow for flexibility in laying out the information on the page.

What did I learn through this project?

Sense-making and synthesis of information is very important for building shared understanding amongst the stakeholders. The mind-map I have created is now used by various stakeholders in the company as a starting point to understand the Retail landscape.

Information Architecture is a core skill in designing large systems and I got the opportunity to brush them up during the course of this project. Collaboration with another designer is beautiful because of the perspective they bring and also the opportunity you get to learn from each other.