As a Product Designer at Flipkart, I have been instrumental in enhancing the product visualisation experience across both mobile and desktop platforms.
For the mobile category, I designed a feature that enables 360° viewing and provides comparison tools to help users better understand the size and appearance of devices.
Simultaneously, I led the development of a similar enhancement for the furniture category, allowing users to view large items in 3D and Augmented Reality, thereby bridging the gap between the online and in-store Browse experience.
Apart from these projects, I have also contributed to Flipkart's photogrammetry pipeline and the 'Try & Buy' feature, which are not detailed here.
Old Designs
New Designs (Phase 1)
Phase 1 Designs
The current designs aim to close the visualisation gap, helping users better understand the design, appearance, and size of the product.
These design inputs played a central role during the initial beta testing phase.
Below are the results that we got from our A/B testing
A/B Results
+3.6bps
Units/Visit (U/V):
Products with 360 view
enabled conversion at a visual level.
+6.5bps
Units/Unique Visitors (U/UV):
Products with 360 view enabled conversion uplifts at a Visitor level.
We realised we are heading in the right direction to address the visualization challenges but identified the need for a simpler UI layout to further enhance the user experience — particularly in areas like user onboarding and key experience trigger points.
Key Pain Points
"It's so hard to judge a phone's real size from photos or videos. The screen curve, camera size, button placement – you just can't see those little things properly."
Visualisation Difficulty:
Users struggle to visualise mobile devices' design, size, and appearance online, leading to uncertainty in decision.
User Journey & Settings Retention: Users find navigation difficult, and the lack of settings retention hampers a personalised and smooth shopping experience.
Primitive Comparison Tools:
Current tools lack simple, comprehensive comparisons, making it hard for users to evaluate key differences in features and pricing.
Final Outcome
Enhanced Comparison methods
360 viewer trigger on product page
Bottom sheet for quick compare
Mobile 3D Highlights
This feature aims to enhance the visualisation of mobile devices by enabling 360° viewing and comparison tools to help users understand the size and appearance of the product better.
My Role
UX Design, Research, Interaction Design, Prototyping, Usability Testing, Visual Design
Year : 2022 | Duration: 3 Months | Tools : Figma
Context
Users face challenges in selecting mobile devices online due to difficulties in visualising design, ineffective comparison tools, and a lack of personalised shopping experiences. These issues create uncertainty, complicate decision-making, and hinder user satisfaction
Problem Definition
User Problem: Users struggle to visualise mobile devices' design and size, lack effective tools for comparing features, and encounter difficulties with a fragmented shopping journey that doesn't retain their preferences.
Business Problem: These user challenges lead to reduced engagement, lower conversion rates, and decreased customer retention, ultimately impacting sales and customer loyalty for mobile device retailers.
Results and Impact
Mobile 3D highlights were introduced during the Big Billion Day 2022.
Big Billion Day event - Hosted annually by Indian e-commerce giant Flipkart, the event is similar to Black Friday or Cyber Monday in the U.S., offering substantial discounts across major categories, including electronics, fashion, home goods, and more.
Impact in Numbers
>50 million
User adoption primarily in the mobile and fashion (shoes) categories
20%-30%
Increased Product page session length
Discovery
As Product Designer for the 360 Viewer (featuring 360° product views and a debit card size comparison), I defined key user experience elements prior to its beta launch:
-
Visuals & Layout: Determined the optimal on-screen display size of a phone relative to the 360 Viewer.
-
Performance Standards: Established loading time limits to guide development and ensure a responsive experience.
-
Interaction Design: Fine-tuned time intervals for nudges to encourage user engagement with the viewer.
Phase 2 Designs
In Phase 2 of our design sprint, we aim to:
Enhance the capability to visualise mobile devices in a 360° experience
-
Allow users to easily compare size and device differences relative to their current device.
Enable seamless switching between comparison modes
-
Let users toggle between different comparison modes effortlessly, without interrupting their flow.
Improve the overall user journey by saving preferences
-
Remember and apply the user’s last-used settings to create a more personalised and consistent experience.
Phase 2 Designs Ideations
With my PM and peer designers, a number of different interaction and design layouts were discussed.
Horizontal options
for comparison
Drop down option
One button
for comparison
Vertical options inside 360 viewer
After a discussion with the internal design team, we concluded that we cannot proceed with horizontal scroll and dropdown options, as these designs have discoverability issues and rely primarily on tap-based interactions.
Additionally, we learned about constraints requiring the bottom bar to be reserved for the 'BUY NOW' CTA and price information.
Phase 2 Designs
Experience trigger at
Product Page
Feature onboarding for first time users
View in 360
Default Mode
The main challenge was capturing user attention on the product page, where users often scroll quickly. To address this, we added a trigger point and introduced feature onboarding to highlight new experiences.
A 360-degree viewer is enabled by default, allowing users to view the phone in 3D by dragging. A "Compare Size" CTA lets users compare the phone’s size to a universal debit card or their preferred device for better understanding.
Compare size mode
Mode Selection
Horizontal width comparison
Vertical height comparison
Two comparison modes are available:
a debit card, which is universally available everywhere in the same size, and a phone.
Mobile Comparison mode
Users can choose their own phone, from the most trending iOS and Android models. Users can also search for phones based on their preferences.
Mobile Search
Phone Search
Successful Search
No Result
Edge cases, such as successful searches and failures, were also included to ensure a complete end-to-end user experience.
Key Design Changes
Iteration Design
Final Design
1
3D Viewer
2
Compare Modes
Launches AR experience
3
Product Name with variant color
4
5
Product Final Price
6
"BUY NOW" CTA
This component forms the foundational element of our mobile 3D highlights. Below, I will detail the changes from the initial design iteration to the final design, and explain the rationale behind these decisions.
1. 3D Viewer
Iteration Design
Final Design
I enhanced the 3D viewer experience by slightly increasing its dimensions and optimizing the default phone occupancy within the viewer. Additionally, I implemented an idle time trigger for the drag-and-rotate animation, encouraging user interaction with the 3D phone
2. Compare Modes
Iteration Design
Final Design
Integration of a new product phone size comparison tool necessitates reconsideration of the current design. A more prominent Call to Action (CTA) is crucial for this iteration, as its importance was understated in the initial design.
3. Launches AR experience
Iteration Design
Final Design
I have iterated on the button placement, opting to deprioritize it due to observed low user interaction. This decision was further informed by the technical requirements of the AR experience, which necessitates high-end devices with ARCore – a significant consideration given the prevalence of lower-end devices among our Indian user base.
4. Product Name with variant color | 5. Product Final Price | 6. BUY NOW CTA
Iteration Design
Final Design
For points 4 and 5, I collaborated with the design team. Our research indicated the value of incorporating the product and variant name, user ratings, and replacing the discount percentage with a 'View Offer' option for bank and sale promotions. Concurrently, the 'BUY NOW' Call to Action (CTA) was resized to half its width, maintaining its original position and height.
Desktop
360° Viewer
This feature enhances the product viewing experience, specifically for the furniture category, by enabling users to view large furniture items in 3D and Augmented Reality.
My Role
Design Contribution: UX Design, Research, Interaction Design, Prototyping, Usability Testing, Visual Design
Year : 2022 | Duration: 1 Months | Tools : Figma
Context
The project focuses on enhancing the 360° product viewing experience on desktop platforms. It addresses the limitations of the current image-based 360° product viewer and aims to leverage existing 3D models to provide an enriched, interactive experience for desktop users.
Problem Definition
Current Experience
Limitations of Current 360° Viewer:
-
Requires 24 images to be shot of the product from multiple angles to then be uploaded and consumed on the product page
-
Small window to interact and visualise the product from all angles
-
With the Image based 360° view the user can only visualise the product horizontally
-
User can’t zoom in to take a look at the product details
-
User can’t visualise the product in their space to see how it looks and fits
User Needs
-
Despite the rise of mobile shopping, desktop platforms generate comparable or higher revenue for high Average Selling Price (ASP) items like furniture and electronics.
-
Desktop users expect detailed and immersive visualisation for informed purchasing decisions.
Discovery
Business Unit
Platform
Revenue
Purchase Price Variance (PPV)
Units
Average Selling Point
Large
mSite
App
Desktop
6.99%
86.81%
7.19%
17.03%
78.95%
4.01%
7.31%
86.87%
8.82%
19,039 ₹
19,898 ₹
21,181 ₹
Mobiles
mSite
App
Desktop
16.84%
76.42
6.73%
16.57%
81.31%
2.11%
18.06%
74.49%
7.45%
12,364 ₹
13,599 ₹
11,982 ₹
Furniture
mSite
App
Desktop
4.28%
88.49%
7.23%
7.94%%
88.29%
3.77%
4.16%
88.34%
7.50%
9,899 ₹
9,640 ₹
9,277 ₹
Data Insights
Desktop drives significant revenue for high ASP items like Large and Furniture, often outperforming mobile sites.
Because many users trust and prefer large screen to view & purchase furniture and large electronics.
3D model coverage is significantly higher than 360° view coverage,
Large Furniture:
No. of 3D model - 1660
No. of 360 view - 160
Competitor Analysis
Features
Flipkart
Amazon
Wakefit
Papperfry
360 View
Zoom Functionality
AR space Visualisation
Yes, 3D vis
Yes
Yes,Mobile app
Yes,image based
No
No
Yes,image based
No
No
Yes 3D vis
Yes
No
Integrated Dimensions
Dedicated Window
Mouse Based Interaction
Product Coverage
Yes
Yes
Yes
High
No
Yes
No
Low
No
Yes
No
Low
Yes
Yes
Yes
Limited
Ideations
With my PM and peer designers, a number of different interaction and design layouts were discussed.
Old Interaction canvas for 360 Viewer
New Interaction canvas for 360 Viewer
Design Goals
Enable users to discover, comprehend, and launch the 360° view for a product.
Enable users to utilise the area available on their screen to visualise the details of the product up close.
Enable users to visualise the product from all angles.
Enable users to understand all key visualisation aspects of the product within the same 360° view.
Enable users to easily place the product in their space directly from the 360° view.
Enable users to provide with all the visual information required to make an informed purchase.
Designs
Trigger point for the Experience
360 Viewer Interaction canvas launch
Nudge animation for FTU
AR experience in live mode
Nudge animation for idle state
Dimension feature for scale reference
Design Directions
After a discussion with the internal design team, New Design layout was finalised. I enabled the 3D View on desktops to leverage existing 3D models for products like furniture and electronics, bringing the proven value of this feature from mobile apps and mSites to desktop users for an enhanced experience.
To ensure a seamless experience, I focused on the following features:
-
Expanded the 360° View with a larger interaction window for unrestricted exploration.
-
Adapted mobile gestures into mouse-based interactions for intuitive desktop use.
-
Enabled full 360° visualisation with zoom for detailed product inspection.
-
Integrated AR to let users visualise products in their physical spaces via mobile.
-
Added real-time dimensions to help users understand product scale and fit.
These decisions were made to enhance the desktop shopping experience for users who prefer larger screens and trust when purchasing expensive items, enabling informed decisions through a richer, immersive experience.
Results and Impact
The feature design secured full approval from key stakeholders, including product managers and the internal design team, and was handed off to the engineering team for development.
However this feature did not appeared in Big billion days 2022 as it got postponed.