Story Overview

Cash in flow is the life blood for any type of business. For any e-commerce sites who sell goods & services online, getting the payments processed in a quick, simple way leads to a profitable cash flow. Seasonal peaks expose the system of there weakness in payment gateways that are unable to cope with a sudden rise in demand which inevitably results in lost revenue. Customers who shop online and visit a e-commerce website expect a simple, fast experience from browsing to order completion even during the peak sales period. Thats when the traffic is up and the pressure to meet customer expectations is high.

Payment Gateway: A payment gateway is a channel or service provided by banks or payment service providers, that enable businesses to accept payments. This is facilitated by establishing a secure bridge between the merchant and the payment processor. A payment gateway can be compared to a credit card swipe machine at a restaurant or retail store.

The Problem

For a e-commerce Moghul like Amazon, the current payment gateway may be effective depending on there sales metrics. Amazon breaks the checkout process into 6 different screens which may or may not be linked at several occasions like the cart screen and checkout process flow looks & feels completely different. Checkout process flow on the other hand is quite a handful is what I feel coz every single process step in the flow differs as you can see every single screen in the process has a different layout and is not consistent. All the screens are linked / connected by a header bar which shows the step by step process. Apart from that and the Amazon brand colour scheme, everything else feels like individual / independent UI elements brought together.

1st Payment Step - Shopping Cart

Dezinr-Amazon-3

2nd Payment Step - Login

Dezinr-Amazon-2

3rd Payment Step - Delivery Address

Dezinr-Amazon-1

4th Payment Step - Delivery Option

Dezinr-Amazon-4

5th Payment Step - Payment Method

Dezinr-Amazon-5

6th Payment Step - Cart Screen

Dezinr-Amazon-7

7th Payment Step - Order Review

Dezinr-Amazon-8

8th Payment Step - Order Complete

Dezinr-Amazon-Mydesign9

The Goal

Payment gateway can be designed and executed in certain ways which improvise the speed of checkout process by removing few steps. And as checkout is the place where the actual sale transaction happens, making it simple and easy is the key. Making the checkout as simple and painless makes customers complete the purchase and more likely to return. Increasing customer retention by 5% also can increase the profit ratio by upto 95%.

There is always a better way to make the payment process more reliable that can optimise for more global sales opportunities during the challenging peak period.

I do understand that people buying from smaller sites are happy to pay by personal wallets as they have an account already and there is a trust factor to it.

My Process

I thought of it as a good opportunity to test out my user-centered design process. I’v been reading and researching on Lean UX and explored the same on the payment gateway.

Few steps which I explored before jumping into prototypes:
⁃ Started with Discovery where I defined few objectives which I wanted to explore
⁃ Defined a target audience (User personas to work with)
⁃ Hoes does my prototype solve the problem?

As I do not have data on this, I had to use my experience in shopping on Amazon to come up with a flow which identified several UX frictions I had faced in the process.

I made snippets of notes and my thoughts and started ideating on low fidelity paper sketches to cover more ground on features which is fast and focused on concept rather than detail.

Dezinr-Amazon-Sketch

When I was convinced with initial low-fidelity prototypes, I started Working on the visual prototype. As it was a concept I was working on, I skipped the process of high fidelity wires. I wanted to design the interface according to the content and layout I had sketched out.

The Outcome

After spending several hours on the design and iterations, I came up with a 3 column structure which could house the 3 sections ( Address, Payment, Order Review ). The goal and the objective from the start was to keep the layout clean, structured, simple and fast in one single view which you can see in the design below.

Checkout Login

Well, I started first with the cart screen, but soon realised that the current cart screen works better for them as it pushes the users to add more products to the cart which results in more conversion.

Dezinr-Amazon-Mydesign1

Choose Shipping Address

Dezinr-Amazon-Mydesign2

Edit Address

Dezinr-Amazon-Mydesign3

Enter New Address

Dezinr-Amazon-Mydesign4

Select Payment Method

Dezinr-Amazon-Mydesign5

Complete Order Review

Dezinr-Amazon-Mydesign6

  Thank you for checking my work!