Flipkart

UI Design

BRIEF

BRIEF

In mid 2014, e-commerce giant Flipkart decided to change their logo and identity design. They worked with a brand studio called Umbrella Design to craft a new identity.
But a new identity doesn’t just mean a new logo - it means a consistent shift in visual language across mediums like print, outdoor, film, and in Flipkart’s case - the website and apps that are at the core of their business.
Flipkart asked us to help them ensure the new branding worked seamlessly with their existing website and app structures.

We did this project in collaboration with Umbrella Design who brought us on board for the digital aspects of the exercise.

Objective

How do you provide a consistent experience to millions?

How do you provide a consistent experience to millions?

YOU START WITH THE PALETTE

YOU START WITH THE PALLETTE

The new colour palette was simple, approachable and inclusive. We accented
the blue and yellow with shades of grey and added secondary colours to enable some variation in design across the web interface.

The new colour palette was simple, approachable and inclusive. We accented the blue and yellow with shades of grey and added secondary colours to enable some variation in design across the web interface.

flipkart_colours

SIMPLIFY THE ICONOGRAPHY

SIMPLIFY THE ICONOGRAPHY

We designed the entire icon suite to be simple and elegant. It had to look and function well across all of Flipkart’s applications.

We designed an entire icon suite that had to look and function well across all Flipkart uses.

flipkart_section5

1. Thinner lines   2. No fills   3. No drop shadows  4. Consistency across icons

flipkart_section6

Identified common icon sizes and increased the breakpoints to ensure pixel perfection. 

flipkart_section7left
flipkart_section7right

CLEAN UP THE TYPOGRAPHY

CLEAN UP THE TYPOGRAPHY

We used Riona Sans to reinforce Flipkart’s brand identity and guarantee easy legibility across all media. We modified it to make it easier to read in body copy while still preserving its personality.

flipkart_typography

APPLY THE NEW DESIGN LANGUAGE TO THE INTERFACE

We worked on the layout and user interface design for both the mobile app and the website. 

section10.1

NAVIGATION

NAVIGATION

Whatever the platform, Flipkart Blue is consistent and on the header, while we used the attention grabbing yellow for notifications and hover effects. With Flipkart, greys became the new blacks. Never a 100% black, we used the greys to create shades and shadows.

The Flipkart blue is consistent and on the top header, whatever the platform, while yellow calls out attention for notifications and hovers. But, it’s used subtly wherever needed. With Flipkart, greys are the new blacks, never a 100% black. The greys are used for shades and shadows.

flipkart_nav
flipkart_section11-2
flipkart_mobilenav

We used the extended colour palette to make searches easy and for different call to action buttons.

flipkart_section15.1_v2
flipkart_section15.2_v2

PRODUCT PAGE

PRODUCT PAGE

flipkart_productpage

CHECKOUT

CHECKOUT

flipkart_checkout

BANNERS

BANNERS

We designed a new banner style that showcased the products and allowed plenty of room to communicate.

section14.1

CLIENTS SPEAK

I have had the good fortune of working with TOD team on a big project like Flipkart and here are three reasons why you should consider TOD as a partner for your next project:
1. If you are looking for the most thoughtful and cutting edge UI/UX projects. They are one of the best in Mumbai. 
2. If you’re seeking to work with world class professionals and not vendors who leave you in a lurch.
3. If you wish to be inspired every day with the amount of passion they put in their work.

I have had the good fortune of working with TOD team on a big project like Flipkart and here are three reasons why you should consider TOD as a partner for your next project:
1. If you are looking for the most thoughtful and cutting edge UI/UX projects. They are one of the best in Mumbai. 
2. If you’re seeking to work with world class professionals and not vendors who leave you in a lurch.
3. If you wish to be inspired every day with the amount of passion they put in their work.

Binit Vasa
Founder, Zariya Consultancy

PACKAGING

PACKAGING

We were really excited when some of the components we designed for the UI made their way to print and packaging designs the brand team was working on.

section9.1
section9.2

THE OUTCOME

THE OUTCOME

Our experience with Flipkart gave us insights into how large product teams work together and how we as external consultants and designers often need to understand the internal limitations of the product and brand. We were also excited to discover that creative magic happens in that thin sliver of space where product teams, marketing teams, founders and brand teams intersect. This project allowed us to grow and push the boundaries of our UI design capabilities and we came out of it with an acute awareness of the difference even a single pixel can make!

The app was made for both Android and iOS platforms.

Our experience with Flipkart gave us insights into how large products teams work together and how we as external consultants and designers often need to understand the internal limitations of the product and brand. We were also excited to discover that creative magic happens in that thin sliver of space where product teams, marketing teams, founders and brand teams intersect. This project allowed us to grow and push the boundaries of our UI design capabilities and we came out of it with an acute awareness of the difference even a single pixel can make!

The app was made for both Android and iOS platforms.

flipkart_section3
flipkart_section4

We were lucky to have Ameya and Binit on the project who taught us immensely and were great to work with.