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.
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.
1. Thinner lines 2. No fills 3. No drop shadows 4. Consistency across icons
Identified common icon sizes and increased the breakpoints to ensure pixel perfection.
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.
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.
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.
We used the extended colour palette to make searches easy and for different call to action buttons.
PRODUCT PAGE
PRODUCT PAGE
CHECKOUT
CHECKOUT
BANNERS
BANNERS
We designed a new banner style that showcased the products and allowed plenty of room to communicate.
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.
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.
We were lucky to have Ameya and Binit on the project who taught us immensely and were great to work with.