Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Transact – redesigning the decision to purchase flow for Flipkart
Objective
How might we help visitors transact with minimum friction and reduce the number of drop offs during checkout?
Company
Flipkart
Year
2013
Role
UX/UI Designer
Skills
User Research, Usability Testing, Interaction Design, Visual Design, UX Copy
Team
Dyuti Barma (PM), Supriya Ajmera (Design Manager)
Flipkart is India's leading e-commerce marketplace with products across 80+ categories and over 100 million registered users. In 2018, Flipkart was acquired by Walmart at a valuation of $22 billion.
Background
The problem
Cart abandonment rate at Flipkart was about 55% i.e. 55% of visits with cart additions were not converting to orders. 30% visits with cart additions do not even begin Checkout. Additionally, in April 2013, Flipkart went from being a direct online seller to a marketplace which allowed multiple third party (3P) companies to list and sell products on its website. This change made the checkout process very complex, ultimately leading to a decline in conversions.
User Research
Understanding "why" users were dropping off
In order to reduce the number of drop offs, we had to first understand why visitors chose not to complete the purchase after selecting a product(s). I partnered with our product manager Dyuti, and conducted an external research study through 5 surveys (one for each stage of the checkout flow) and phone calls to Flipkart visitors. We reached out to people who had added items to cart and/or attempted, but not completed, checkout.
Reasons for Cart Abandonment
700 responses
Research findings from our survey study (2013)
Phase I
Bridging the gap between cart and checkout
From the consumer study, I learned that India is a very price sensitive market and that people are still apprehensive about shopping online. The factors highlighted in the chart above were taken into consideration while coming up with solutions to bridge the gap between adding to cart and moving to checkout.
Affinity diagram for cart to checkout
To further identify and solve for the problems that users were facing in the purchase funnel, I mapped out a high level customer journey based on what the user is thinking from add to cart to checkout. On a high level, there are three types of customers based on their purchase intent.
High intent
Visitors with specific product in mind who search and purchase
High intent
Visitors who browse, shortlist, finalize and then purchase
Low intent
Visitors who browse, stumble upon products they like and then purchase
A/B Testing
Finding the right solution
We conducted A/B tests between three different 'add to cart' flows - (i) the existing cart popup (ii) a lightweight dropdown (iii) a detailed full-page cart. I conceptualized and designed the lightweight cart to provide a non-obtrusive shopping experience for Lifestyle users who tend to use the Cart as a shortlist while browsing/exploring.
Dropdown cart
Benefits of using a dropdown cart vs the existing popup:
-
Instant feedback—encourages faster navigation & shortlisting of products
-
Less intrusive—user can continue doing what he's doing and the drop down will close automatically
-
Helps build cart familiarity and association for users who don't know how to access their cart later
Impact
Checkout/cart additions increased by 3.5% and order conversion increased by 0.1%
Lightweight cart dropdown for Lifestyle users who shortlist first
Detailed cart page
I designed the detailed cart page keeping the needs of two types of users in mind:
-
New users who don't have a relationship with the brand and lack trust
-
Deal seekers or price sensitive users who want transparency in pricing, shipping costs, etc.
Impact
Checkout/cart additions increased by 4.4%, checkout conversion (orders/checkout) by 2.6% and order conversion increased by 0.5%
1
2
3
4
5
6
7
Return policy and financing options for customer reassurance
Cost break up for price sensitive market
Offers applied, freebies and savings for deal seekers
Explicit shipping cost and faster delivery options
No hidden costs added during checkout
Pincode widget for better delivery estimates
CS number for assistance
1
2
3
4
5
6
7
Email reminders
I made improvements to the existing cart abandonment email and designed the checkout resumability email for users who have shown significant intent, i.e. they've moved all the way up to the Order Summary or Payment stages of checkout and then dropped off.
Impact
-
For roughly the same number of emails sent pre and post launch, the CTR (Visits to Flipkart / email deliveries) increased from an average of 1.14% to 6.10%
-
Revenue / email delivery went up from Rs 1.68 to Rs. 9.75 (an improvement of 480%) i.e incremental revenue of Rs. 8 per email
-
Additional ~450 orders / day from checkout resumability email
2
3
4
5
Catchy email subject line to increase open rates
Product images for better recall
Offers applied and savings for price sensitive market
Bigger call-to-action for better conversion
Trust building factors for reassurance
1
5
4
2
3
Overall impact
April-Sept, 2013 (6 months)
Because of the new features (emailers and cart experiments) and other optimizations in checkout, the Checkout Conversion Rate (Visits with orders/Visits with checkouts) for WSR*, 3P and Mix carts increased by 6.26%, 16.5% and 6.08% respectively.
*WSR stands for WS Retail which is a subsidiary of Flipkart.com. As per Indian government regulations, FDI isn’t allowed in direct online retail, hence WS Retail was set up as the company's consumer facing entity.
Phase II
Perfecting the checkout flow
The next step was designing a faster and hassle free purchase experience that solved for the problems we had uncovered through our research and accommodated the new marketplace requirements. I sketched out interaction models over whiteboarding sessions with my manager. Supriya defined the high-level accordion structure and I detailed out each and every component of the system.
Defining interaction models through whiteboarding sessions
Concept Development
4-Step vs. 1-Click
Flipkart had a 4-step checkout flow which was resulting in a lot of drop offs. In the new design, logged in users would bypass the first three steps and land directly on Payment. We auto selected the delivery location based on history or user preferences, making the new checkout experience much faster for repeat users.
High-level wireframe exploration by Supriya Ajmera
Key Features
Addressing pain points
Based on the wireframes and my discussions with my manager, I made high fidelity mockups and prototypes. I categorized the problems I had uncovered through research and tried to address them through the interface design.
Trust
From the user study we conducted earlier, we learned that 2.8% visitors do not trust online shopping and 1% are reluctant to share their personal details online. I added promise badges to the header to help address this issue.
Login step for logged out / new users
[ Mouseover image to see old checkout ]
Assistance
3.8% visitors said they needed guidance while placing the order. Keeping them in mind, I designed in-line tips and error messages for form fields. I also added the Customer Support number to the header.
Delivery address step for logged out users / guest checkout
[ Mouseover image to see old checkout ]
Hassle-free
I decided to show login incentives for the 2.3% visitors who felt filling out the shipping address was too tedious. Logging in would allow us to store addresses for new users and pre-fill addresses used by repeat customers. In addition, a reset password email would be automatically sent to repeat customers checking out as guests.
Login reminder / password reset email for users who have previously made a purchase
Transparent
2.7% visitors dropped off during checkout because the total cost of shipping was too high. I changed the delivery options menu from a dropdown to radio buttons so that users can see the shipping cost and delivery date upfront.
Order summary for logged out users / guest checkout
[ Mouseover image to see old checkout ]
Familiarity
I added product images to the order summary and bank logos for better recall and to create a more delightful experience for transacting customers.
Payment selection for logged out / guest users and 1default view for logged in users
[ Mouseover image to see old checkout ]
Flexible
Although, the checkout was still sequential the user could navigate back and forth easily. The user session could be saved at each step and in case they exited, an email was sent out in 30 minutes to resume the transaction.
Development
Taking a phased approach to design
I collaborated with the development team to understand engineering constraints and timelines. I redesigned and shipped page-level UI components first instead of rolling out the accordion flow in one go. This was beneficial for three reasons:
-
Changing the structural flow as well as UI components at the same time would have made it harder to track the impact of the design changes
-
Phasing out the design gave the engineering team enough time to work on the accordion structure and make backend changes, such as pulling images for products in the Order Summary step
-
I was able to incrementally improve the user experience and clean up the visual design without straying too far from the brand
.jpg)
Feedback
Customer response
Over 75% users, rated the new checkout experience as 'excellent' (based on 700+ responses through a WebEngage survey on Order Confirmation)
"I loved the simplistic easy on eyes UI. Also, the transactions very quick. Reminded me of Paypal in the West. Lovely effort team!"
"Super fast and clear and easy"
"LIKE CLEAR DESCRIPTION OF THE PRODUCT SUMMARY"
"Like the new interface. It looks neat and clean"
"Better interface, blazing fast"
"I did like the new format, it makes my shopping easier and faster. Hope you keep upgrading features. Thank you for this awesome platform!"
*Responses were captured through a WebEngage survey on the Order Confirmation page
Metrics
Impact
Checkout conversion (orders/checkout) increased by 2.5% + $833K in revenue (GMV)
