Re-design of Flipkart
App Home Page
As we are living in the digital era where we can solve our most of the problems digitally & that to effectively & delightfully. In this era India has an internet user base of about 658 million in January 2022. In this age of the internet, the E-commerce market has emerged and is growing rapidly.
Flipkart has been one of the most important one stop marketplaces in india. Flipkart has nearly 30% market share of the Indian E-commerce market.*
I've been using the Flipkart app for a very long time to purchase electronics and some other required stuff. However over the time I’m unknowingly feeling something went wrong with User Experience of this app. After doing some short brainstorming with my flipkart circle friends I observed that other people also facing issue with the app.
Team
Responsibilies
Tools
Solo UI/UX Designer
Duration
2 Weeks
UX Research
Requirement Gathering
User Reviews Analysis
Competitive Analysis
User Interviews
UX Design
Figma
Adobe Photoshop
Adobe Illustrator
Pen
Paper
Goals & Target
Spot Barrier
Identifying
User Experience issues related to UI of
Flipkart app
Customer First
Converting insights as opportunities based on Customer’s point of view
Bias for Action
Highlight insights for strong sense of
urgency to complete user’s task stratigically & delightfully.
References
-
Indian E-Commerce War: Amazon vs Flipkart https://blog.measurable.ai/2022/04/20/indian-e-commerce-war-amazon-vs-flipkart/
-
https://play.google.com/store/apps/details?id=com.flipkart.android&hl=en_IN&gl=US
-
https://www.similarweb.com/website/flipkart.com/vs/amazon.in/#geography
-
https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
***To see the differences please scroll on mobile screen***
If you are not able to see prototype please Click Here to view Figma Prototype
Roles & Responsibilities
As a design researcher, my role is to understand and study the Company’s Objectives and understand the problems user is facing. My responsibilities was to Empathize user, Identifying barriers for User Experience & insights to convert it as opportunities and coming up with ideas for improvements. Also, creating visual designs to make smooth & better User Experience.
Hi I am Rahul. I am a UI/UX Designer and I have been using Flipkart app for very long time. Initially, I started understanding user pain points by reading user review on app store.
Understanding Pain Points
Synthesising information after reading reviews particularly to experince of using User Interface of Flipkart app.
Oh No!! So many bad reviews are an opportinity to improve. As UX Researcher & Designer I can empathize user perception, expressed in reviews and rating.
Defining Target User Groups
It is necessary to define and divide the target user groups so we can focus and prioritize them while oing user research.
We can divide user base into two target groups. One who browse regularly on app and is purchasing stuff from app on regular basis, thus company is getting revenue from them on regular basis. Another user base is coming mostly on Big Billion Sale period where this user group pays more amount in particular BBS period to get benefits of huge discount offers.
Target User Group 1
Regular Users
-
Browse regularly and explore various new stuff
-
Purchase things on regular basis from app
-
Plays games, watches Flipkart live and all other resources on app
-
Have FOMO of about any missing of any offer/deal
Target User Group 2
Sale Days Users
-
Browse regularly and explore various new stuff
-
Purchase things on regular basis from app
-
Plays games, watches Flipkart live and all other resources on app
-
Have FOMO of about any missing of any offer/deal
Discovering User Insights
I conducted one-to-one Guerrilla Interview of user to dive deeper into problem of User Interface & Experience. Here is the conversation with one of the user from target user group 2 that will drive the next phase of planning the solution.
So let’s talk to real person one-to-one.
Hi, Nayan, you use Flipkart for shopping various stuff. What was you thoughts and experience while using Flipkart app and placing orders through that?
I’m a Flipkart Plus Member for almost a year. I mostly use Flipkart during the Big Billion Sale. I alwasy wait for the BBS for shopping. In between also I do shopping from Flipkart but that is rare thing. But during BBS I’m too much disappointed from Flipkart because I was not able to find Product categories initially. Also, for me it’s very difficult to navigate to Wishlist screen and it’s similar for tracking my orders also. I am amazed that as primary things are not visible on this app. Where as other similar kind of platform providing better experience that this.
Oh so there is issue regarding placement of things and visibility of most useful things primarily. Don’y worry, I’ll make sure to design a better UI and experience for this.
Defining The Problem
I decided to tackle problem related to ease of access most useful things, design consistancy in home page and how can we make a seamless interface and interaction while user navigating on app.
Don’t have easy access to most frequent used functions
Design of home page little bit cluttered and having inconsistency
Confusion due to placement of “More on Flipkart” is at first place
Confusion while navigation in app at various pages
Difficulties in finding “My Wishlist” & “My Orders” section
Customer Journey Mapping
When I have done user research and understand their pain points, its necessary to align
insights with the business goals.
The dips in User Journey Map are our opportunities to solve. Lets solve the confusion regarding our main feature and simplify the navigation for various frequent and most useable functions so user can perform action easily and gets best experience for this.
Opportunities
-
Creating better options & quick access elements for quick and better decision making by the user.
​
-
Tacking all concerns and provide certainty to the user that they will be able to navigate desired function easily.
​
-
Designing home page for better and concistant design pattern for providing delightfull experience
Competitive Analysis & Benchmarking
Refining Problem Statement
When I have done user research and understand their pain points, its necesary to align
insights with the business goals.
Among the E-commerce platforms, only Flipkart has “More of Flipkart” option and that too with much more importance. There is very less chances that user will come to app for “More of Flipkart” things primarily. And this thing showing primarily to user makes them confuse due to egnorance of counterintuitive to user’s main task on platform. It creates dissatisfaction mostly among the users who coming to our app during Big Billion Sale days.
We need a behavioral/ task oriented intervation here. We neet to show all most relevent things primarily along with most useful functions like wishlist, orders etc.
Solution Cart
Opportunities Order Receipt
As we have defined some opportunities earlier let’s view necessity of them visually.
Primary Opportunities
Secondary Opportunities
These are the main opportunies I have identified during research & I feel that this can help us out for creating better user experience.
Creating better options & quick access elements for quick and better decision making by the user.
Tacking all concernsand provide certainity to the user that they will be able to navigate desired function easily.
These opporutinities you might feel not necessory, but in my opinion consistancy in design is one of the most important thing. Below mentioned things may not be observed by user but they might feel something went wrong. Then also I’m considering it as a opportunity to improve user experince.
Designing home page for better and concistant design pattern for providing delightfull experience.
Solution Delivery Box
Primary Opportunities
Current
Redesigned
Secondary Opportunities
***To see the differences please scroll on mobile screen***
If you are not able to see prototype please Click Here to view Figma Prototype
Articulating Design Decisions
For Primary Opportunities Solution
This toggle button is giving a clear idea to user about Regular Category Flipkart Shop & Grocery Category Shop
Tab for Wishlist added to home screen for providing good usability to app.
A broad search bar with Image & Audio search command tabs giving a locus of control to users that they can search necessary things delightfully
Category ribbon, to help users for finding & navigating desired screen quickly.
In navigation bar “My Order” tab added for easy navigation to this most useable feature for delightful experience
For Secondary Opportunities Solution
This is separetor I’m suggesting in new design, which we can use at start and end of any card or deals category section.
I choose this colour because it represents as brown tape which can mostly use for wraping/closing our delivery box to bonding everything properly.
Similar way this seperator can bond all different sections in Consistent Design manner.
Below I have shown some solution suggestions for making our app design in one step ahead on Consistant Design Pattern. I have suggested card/ category banners representation based on using dedicated colur backgronud for easy to identify for users and help them to compliting of their task.
For providing suggestions/ recommendations for user
For showing Sponsored thing
For showing “Limited Time Offer or Deals”
For showing “Deals of The Day”
This way we can do a revamp in staged manner and prioritizing user’s task.
Thank you for reading this giving you time. Please provide feedback having for me.
References
-
Indian E-Commerce War: Amazon vs Flipkart https://blog.measurable.ai/2022/04/20/indian-e-commerce-war-amazon-vs-flipkart/
-
https://play.google.com/store/apps/detailsid=com.flipkart.android&hl=en_IN&gl=US
-
https://www.similarweb.com/website/flipkart.com/vs/amazon.in/#geography
-
https://lawsofux.com/occams-razor/
-
https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
-
https://material.io/components/bottom-navigation#placement
-
https://www.flipkartcareers.com/#!/aboutus