Introducing a new step in Primer checkout experience


Introduction

Primer is an end to end automation platform for payments. It allows merchants to build sophisticated payment flows with no engineering effort, through a world-class checkout integration that developers love. I was interviewing for a role at Primer and this was the design task they assigned to me as a take-home assignment. I didn't get the role but it was a good experience as I got proper feedback on my shortcomings.


Design Brief

Interact with the prototype here

In short

I had to add a new step in the Primer checkout experience and improve the current UX along the way.


Constraints

There were a few constraints I had to keep in mind before going forward:


Research

Desk research

I went online to get more context on how PSPs work and their current implementation on digital platforms.

💡 Learnings

User experiences with checkout

Buying stuff online has seen a huge rise during this pandemic. To get more insights into the current scenario, I talked to a few people about their experiences while buying products and paying online.

❓Questions

💡 Learnings

Competitor Analysis

To get deeper into the current checkout trends and practices, I analysed how Flipkart, Amazon, Dunzo, Swiggy, and Zomato are handling their mobile checkout experiences.

💡 Learnings


Testing

Since I had limited time, I was unable to test the prototype with real users and had to go ahead with people I knew.

Assumption: The mental models for the target user base is similar to 19-26 years olds residing in India. (User testing participants)

Task

This was the task I provided to participants to complete:

"You are buying a trouser from an e-commerce website. You've already chosen the trouser size & colour. Go through the checkout experience and get the trousers delivered to you."

Outcomes

Flow 1 - First-time user

The users didn't have any major issues performing this task.

Flow 2 - Returning user

  1. The users were confused whether clicking on the saved card would select the card or go ahead with the payment.
  1. Upon selecting the card there was visually too much going on around the "Pay" button.


Heuristic evaluation

When I went through the returning user journey, I found that a few more things and interactions could be improved:


Improving the current UX

Based on the insights, I did the following changes in the experience:

First-time user payment flow

Returning user payment flow

Changing saved payment method flow

Interact with the prototype here


Adding the shipping address step

Including the shipping address step in the checkout flow is the merchant's choice. The checkout flow will only include the payment or include the shipping address with the payment.

The shipping address will be input before the payment details and here's what the flow looks like:

First-time user flow with shipping address

Returning user flow with shipping address

Changing saved address flow

Interact with the prototype here


What comes next?

For validating the improved checkout flow without shipping address, usability testing can be performed for comparing the new vs old experience with the following parameters.

Setting

Two identical groups of 6-8 users, provided a task to complete without any aid from the moderator.

Task

You are buying a pair of shoes from an e-commerce website. Go through the checkout experience and get the shoes delivered to your current home address.

KPI for measurements


Closing thoughts

It's true that the devil is in the details. I've never done an assignment on such a precise scale where the details themselves define the whole experience. I wish I could have tested the new designs to see how better they performed. A huge thanks to the designers at Primer who provided such a good task and also gave a proper feedback on my shortcomings.

Thanks for reading ✌️