Checkout Experience

One of the critical and crucial areas of e-commerce platform is its checkout experience. At Myntra, a user spends an average time of 3 min at checkout. It includes cart, address, payment and a confirmation page. It's extremely important for us to improve and optimise the checkout experience as much as possible. At the same time it's a sensitive area to fiddle around. I have taken the design ownership of Myntra's checkout from 2017, worked on multiple projects that have impact on the user experience and conversions.

Cart Page
Address Selection Page
Payments Page

#1 Myntra Credit

Myntra introduced its own payment wallet "Myntra Credit" in winter of '17. It's basically a closed loop wallet which functions as a wrapper on top of the gift cards. Myntra Credit enables instant checkout and faster refunds for customers.

The Product Design Problem

It's extremely important to get the user checkout faster once they have decided to go ahead with their shopping bag. We needed a mechanism with fewer failure rates and greater reliability to do this.

The Business Case

Myntra used to have cashback system for the return refunds and easy payments. During the time around 50% of the CoD users prefer to get their refunds in cashback as it was fast and easy. And it required no additional verification. But Myntra had to shut this construct because of the new payment regulations and rules. Another option for the user was to give the bank details and get their refund in the bank within a 7-9 days. This resulted in a lot of customer escalations and calls. There was a need for easy and better refund mechanism.

Designing The Identity

After multiple discussion and stakeholder meetings, the decision comes down to making a wallet inside Myntra. With the wallet money, user can checkout faster and get the refunds easily without any further user verifications. Also, the wallet will later help in creating a single click checkout flow. The same mechanism can be used for the gift card consolidations.

The Solution

We have brainstormed on the visual identity for this new payment mechanism. Its important to communicate that Myntra Credit is a closed wallet which can be used only on Myntra. With the help of the team we have finalised on the name “Myntra Credit” and how the logo should look. I have created multiple iterations for the same and finalised it with the help of bussiness team.

The Iteration Process

I believe it's important to make multiple iterations for any solution. No solution is a perfect solution so iterating is the way to realise the advantages and drawback of our own designs. And it help us in building great products for the future.

Card based design
desing with focus on identity
Design with value propositions
Core Wireframes

Paper wireframes were created based on the initial idea. I have refined it later considering the interaction, view port size, hierarchy, content, usability and promotions.

Myntra Credit Home
Top-Up Flow
Touch point On Checkout

Designing The Core Flow

Why Did I Choose This Design?

It's important to understand the thought process behind the designs for evaluating them. Here are some of the key reasons why I choose this design over others.

  • Indian payments and wallet eco-system is flooded with a lot of players (Paytm, Amazon Pay, PhonePe, GooglePay, etc.). It's important to communicate the value proposition to the users to differentiate between each other.
  • Unlike other players, Myntra's major objective is to build a closed loop wallet to use it only inside Myntra. These terms & conditions are also very important during top-ups & returns.
  • Total wallet balance and the major actions are kept at the centre of focus.
  • User can explore their recent transaction log easily from this page.

Interface Designs

A Bit About The Results

Adoption of Myntra Credit as a return refund mechanism was really good. We have seen ~30% of the COD refunds and ~10% of the Pre-paid refunds coming to Myntra Credit on an average basis.

#2 Checkout UI Cleanup

I have attempted to clean-up Myntra’s legacy checkout flow. With the help of user research sessions and customer feedback calls, we have found out a number of issues that exist in the current checkout flow. Some of them are must fix usability issues and others good to have visual clean-ups.

Identified Usability Issues
  • Once a user opens coupons or gift wrap pages and dismisses, it results in a complete abandonment of checkout.
  • Keyboard optimisation for Numeric entries
  • Different payment options should be in separate pages. The current design has 2 back options which are confusing.
  • We have a really old box design and text entries in checkout flow. All other parts of the app have moved to full-width cards.
UI and Visual Issues
  • Offer messages and additional notes clutter the cart page
  • There should be a better way of displaying information like New items in your cart, Price change, OOS, etc.
  • Information overload in the product card
  • T&B disabled state needs to look disabled
  • CoD not available should be displayed on the payments page (reason to be highlighted)
  • Gift wrap page to be redesigned to check improvement in adoption
  • Items not available at the selected address: Items are not highlighted
  • Saved cards: displays all saved cards (should display 2 of the recently used and have a "show more" option)
  • Checkout inconsistent with the overall design language
A Glance At The Cleaned Up Design

With the clean-up, I have focused mainly on getting the visual sanity and improve some of the usability issues. I have tried to incorporate the internal design language that Myntra is building. Couple of development improvements were also triggered with the cleanup.

Motion Makes It Delightful

I am a great believer of motion design and how it affects users emotions. We have added motion support, created some cool animations and transitions during the redesign exercise.

Checkout one of the examples where we have animated "Gift Wrapping" experience to create the delight of gifting.

Delight Of Animations