SecurionPay – Checkout Process

SecurionPay Checkout is a payment processor that can be embedded on a website. It provides easy payment method with features of remembering a client (by e-mail), SMS authorization, 3D Secure and cross sales.

Examples with Checkout

Design Process

At the very beginning solutions provided by companies like Stripe and Braintree were a benchmark. Even a simple thing like credit card’s payment form can be sexy and full of micro-interactions to please users.

Since SecurionPay offers more diversified payments than Stripe or Braintree (cross-sales, 3D Secure, one-click payments, donations), multiple user scenarios needed to be designed and tested. Also on mobile.

There is still a large area for improvements that surely will increase conversion rate. As a UX designer, I am obliged to identify such elements, design and verify them.

User flows and microinteractions

Checkout is full of small animated elements, transitions and hints which all leads to increasing conversion rate of merchants. Both on desktop and mobile. To achieve that mockups, prototypes and, finally, designs in Photoshop were created.

Mobile Version of Checkout – SMS verification process

A scenario where identified client (by e-mail) is asked to confirm his identity using SMS code. When this is done card data are filled in automatically.

Scenario with Cross-Sales

Cross Sales in SecurionPay’s Checkout are transactions done with a card used in the intitial purchase. Card is authorised and the client can make additional shopping with just a single click. This process has a very high conversion rate, reaching 30% in some scenarios.