Transact using webViews
Designing and developing Flipkart's checkout and payments flow
September 2018 - April 2019
UI developer at Flipkart
HTML, CSS, JS, TypeScript, React, React Native, React Native for web, Android/iOS native
For an e-commerce product, the flow where the user inputs the address and confirms payment are the most crucial ones. Any discrepancy here leads to the user dropping out and therefore incurs a loss for the company. This flow should be seamless, bug-free and without any distractions. Therefore, to keep these pages independent of the app releases, our team at Flipkart decided to develop these pages on webviews with code written in JS (React), so that as and when required releases can be made by deploying the JS bundles.
I developed a number of features on this funnel mostly centered towards improving user flows in order to solve for cross-selling via recommendation and helping logistics by avoiding bad addresses. Some of my projects that helped me learn a lot about Indian users and the challenges posed by them are as follows :
The problem at hand :
Users adding wrong addresses (city, pin code, state, street combinations) that are not filtered before the order is placed.
Users adding incomplete and absurd (unacceptable) addresses which become a logistic pain point after the complete order has been managed and is out for delivery.
Users not understanding English type their addresses in other languages which is again considered a bad address by our system.
Address Intelligence System (AIS)
There was no way of identifying bad/fluke addresses before they were out for delivery by the logistics team which incurred unnecessary cost to the company.
Introducing a data backed up, leaned system that suggests in case it is an absurd or unacceptable address i.e. case of monkey typing.
Corrects user in case of the wrong combination of pin code, street, city or state.
While user adds a new address or edits an existing address, an option is given to "Use My location" in order to autofill the location and lower the chances of the wrong address.
Using current location as prominent features helps people not very comfortable in a particular vernacular.
Designing and developing an intelligent user flow that detects invalid addresses and suggests corrections while user tries to confirm the order. This helped in decreasing losses due to logistics and increased successful order placement and deliveries.
The results and learnings:
A very interesting learning, after the experiment ran for 3 months, was that initially, the percentage of conversions to successful payments dropped due to the blockages showed by the system to the user. But in the long run, this helped logistics a great deal as most of the addresses that reach the order management system were legitimate.
"Use my Location" as a feature worked very well. The order summary to payments conversion increased to ~10% (1.18 bps increase). Given someone selected a Use My Location construct, we were able to convert users 82% of the time. The corollary, 82% of UML users get a pre-filled address at the time of checkout, thereby increasing their chances of conversion.
Very important learning from the user experience perspective was that users expect uninterrupted experience, so showing the minimum number of pop-ups at the right time was the key to the success of this product.
Recommendation features for cross-sell
The opportunity in hand :
While on the final step of purchasing a product on the application, users are at the best place to make a choice of purchasing a subsidiary or complementary product instantly, for instance, phone cover or an extended warranty with a phone. This also included giving users the option to check any offers that are available on their payment modes or bulk purchase upfront and showing the available offers on similar products if purchased together.
The solution :
I built the user experience for :
1. Giving recommendations to the user while showing the items in the cart (attached just below the product) and also displaying any discounts available then and there.
2. Giving subtle callouts of bundled offers at the right places also increases the chances of users showing intent on buying bulk products.
The overall learning from building all these experiences and putting them under AB experiments resulted in an increase in the cross-sell purchases as well as bundled purchases. Just the key to all of these exercises is not distracting the user from the main intention i.e. buying the products added in the cart.
While the users are finalizing the items in their cart, they are at the best position to make decisions about buying subsidiary or associated items formulated by recommendation.
*the demos & scrrenshots shown here are already in production at