Flipkart
1. Navigation Design
Role: Product Designer & Design Manager
Team: Self(hands-on) + 1 Visual Designer.
Stakeholders: VP of Products, VP of new business, Engineering, CTO
Time: 8 weeks.
Process: Business Needs, App Architecture, Primary & Secondary User research, Design Interactions, A/B Testing
Flipkart Landscape
* Stats are for just UX storytelling purpose
160Mn
Registered Users
40Mn
Monthly Active Users
64%
Non-Metro Users
74%
Age b/w 15 yrs - 34 yr
Problem Statement
With the increase in the number of businesses in Flipkart, the existing bottom bar design was falling short to accommodate new verticles.
The question was how to address entry points for these new businesses like - Grocery, Credit, Insurance, Smart Store, etc. Define UX architecture of the whole app. This impacts the bottom bar, app hamburger menu, and header icons (cart, user profile, notifications).
Hypothesis
The best approach to provide entry points for new business is through the bottom bar and not through the hamburger slide-out menu.
We cannot use the homepage as navigation cards as it may impact storefront eCommerce
Bottom bar design should follow Gestural Interactions like google to expose more options.
Assumptions
-
New businesses are those that have independent and non-overlapping consumer intents.
-
A consumer can fully complete its task in this content area without the need for other sections.
-
These verticles have a chance to become separate apps on their own in the future.
-
Example of such business are - Video, Games, Fintech, Pharma, Jewellery, Grocery delivery, etc
Success Matrix
-
Bounce Rate
-
Conversion
-
Traffic to Nodes
Competition Study
Super Apps - ecosystem
One of the hypotheses was that Flipkart will eventually become India's Super App. So it was necessary to understand the app UI architecture of Asian super apps like WeChat, Alipay, Meituan, Pinduoduo, Taobao, etc
Super Apps - Bottom bar interactions
We also studied super apps like Gojek and Grab to understand how they have exposed their verticle business in Asian countries. Also Paytm in India
User Research
Most of the new users for the Flipkart app will be the next 200mn users category. They come from tier 2-3 cities and not very tech savvy. Lot of time they are helped by their friends. So we need to take conservative & simplistic approach to design
Ideations and Concepts
Taking inspirations from Google gesture interactions for bottom bar and fail-safe tap-based interactions, number of iterations were made to convey the hidden second level icons.
Tap Interactions
Pull-up Interactions
Gesture Concepts
Tap interactions Concepts
Design for Scale
It was important to design for future scale. Flipkart was adding new business and we need a mechanism that the bottom bar will expand to 2nd or 3rd level as the icons increase.
New user onboarding
User Account and Humberger menu
Category closed
Category Expanded inline
Category on next page
Multi-user design
Design Experiments - A/B Testing
Experiment A: Bottom Bar
-
Homepage(shop), plus some apps are L0 nodes.
-
Shop tab is active on launch.
-
Available L0 slots are 4.
-
The bottom bar persists for 5 L0 nodes.
-
Other L0 apps are one level inside “All Apps”
-
The hamburger menu is visible on 4 tabs.
-
Hamburger is directory with all L0 nodes
Experiment B: App Drawer
-
Home page(Shop) is L0 & rest of the apps are L1.
-
There is no Shop icon and no icon is active.
-
Available slots are 5.
-
Bottom bar is visible only for Shop/ homepage
-
All other apps are one level deep.
-
Hamburger visible only on homepage(Shop)
-
Hamburger is only for Shop.
-
User icon introduced to have all my accounts It is accessible from all pages. Easy to return home
Experiment outcome and user feedback
After looking at experiment results and qualitative user feedback, it was seen that the app drawer concept was failing to provide easy interactions for switching between different verticles. Many users had false gestures that led to commerce shop page scroll, rather than opening the bottom sheet. The tap-based interactions provided fast and easy way to switch between verticles.
Impact
-
Access to new businesses was set up as a good pattern. Started attracting new users
-
The survey showed users had good memory recall after initial onboarding and couple of interactions
-
Future scope to expand this pattern to gestures or new home.