Day 2 of 100: Card checkout UX flow — from Diamond bank online to Interswitch WebPay Platform

UI design challenge with context and a process.

Finally, here are the results from my second day of the 100 days of UI element design with context and a “Google design sprint-like process”. Day 2 is very important because checkout systems are very delicate and if wrongly designed can cost companies millions of $s. Yes, changing a button has increased a site’s annual revenues by $300 million.

In case you missed day 1 — A minimal, easy to do sign up form for Jumia.com, please check it out.

Preamble

This was my experience experimenting the new “Xpress Recharge” data bundle by Smile Communications Nigeria Ltd.

• I logged into Smile.com to check available data bundle using “Xpress Recharge”

• I selected the bundle I wanted and after about 2 clicks I was redirected to Diamond Bank’s Diamond WebPay interface — a page that took me back to the then archaic nature of websites (only found in archive.org). It was like going from grace to grass for Smile website was at-least well presented, but this one did not sink down well into my system. Why? because this is 21st century.

I immediately became confused on what was happening so I took my time to go through the page to understand exactly what I supposed to do.

Since this is not a major concern for us — I will show you the quick redesign I did later

• After I clicked the “Make payment” button on the Diamond page, I was taken to Interswitch WebPay payment page —

Interswitch WebPAY Payment Page is a simple page that can be called from any website seeking to offer visitors the facility to pay for goods or services with their bank issued cards or other payment tokens.

So day 2's problem sparked off on Interswitch WebPay payment’s page. A card checkout form is one of the most important aspect of a user checkout process for any business. So if it’s not done well you will likely have a high rate of user drop offs when transacting online.

Exhaustively, I went through the form, filled every field and noticed a lot of UX issues. This got me thinking because Interswitch recently redesigned another platform of theirs called Quickteller. If Interswitch can redesign the card checkout for Quickteller ( which looks fantastic), why not do the same for WebPay where most online payments in Nigeria are done.

So I went back to my drawing table to wear multiple hats in my “Google design sprint-like” challenge before coming up with a solution.

What was the ultimate goal?

How can my experience purchasing data bundle from smile be improved by following the flow from Diamond bank WebPay platform to Interswitch WebPay payment page?

As usual, I asked lots of questions:

- Is the current Interswitch WebPay’s checkout form the best that can be offered to users?

- How can I minimize the steps to ensure a successful transaction is made?

- Does the look and feel of the two sites ( diamond and WepPay ) encourage or intimidate users?

- Does the page make users feel secure or afraid that something can happen to their money?

How can customers be re-assured that they are few steps away from completing a transaction?

Are we really helping users by handling minor form details that that can easily be solved?

Initial questions I asked myself

Mapping the journey

Then I mapped the likely journey of users to the Interswitch WebPay Payment page.

User Journey map

Research

I performed some quick research online coupled with my little experience with performing online transactions to find out what makes a great card checkout form. Listed below are some of the things I discovered relevant to this challenge:

1. Primary goal of a card checkout form is completion.
2. Payment system drop off rate is what is affecting lots of online businesses and not the business model or general website or the app.
3. Nigerians trust issues can be eliminated if payment system looks and feels secure.
4. Checkout forms should always appear authentic and not look ugly and cluttered.
5. There should be a clear path to success.
6. Users should feel safe on the page as they checkout.
7. Minimizing the feeling of risk and avoiding confusion.

Luke Wrobleski an expert product designer who wrote a classic book on web forms — filling in the blanks pointed out that:

Fundamentally, there are two ways to boost checkout conversion: increasing people’s desire to buy (persuasion) and reducing the effort required to make a purchase (efficiency) as the image below (originally crafted by Joshua Porter) illustrates.

UX Issues with Interswitch’s WebPay Payment page

But why do we really need to point out the UX issues with WebPay?

Because lots of businesses in Nigeria that require an online payment solution redirect to Interswitch WebPay Payment solution. This means that a lot of users are experiencing this but cannot complain. ( yes, i have asked people). Who knows if this issue is not one of the reasons why we have high drop off rate on e-commerce sites, like Konga and Jumia where new online shoppers come onboard and are already skeptical about web payment that “yahoo yahoo fraud, being the popular notion is real”

issue 1: Page does not appear or seem safe or secure at a glance

• Pay button is in pure RED. Telling users that “Hey click this danger button and we will suck all your money, Hoohaahahahah”. Red does not go well with progress, please or peace.
• the UI in no way reassures the user that their transactions are secure. A text saying “You are secured here, or even a padlock icon” can communicate this to skeptical Nigerians who do not trust to an extent online payment systems.

issue 2: Poor error handling — Inline validation and not popups make sense and saves a lot of stress. I rather validate on the go than wait till I click submit or pay button.

issue 3: Card detection should be automatic: No need to have a drop down always asking users to select a card type. We all know that Mastercard card PANs, or card number starts with 51–55, visa with 4 etc. So this should be automatically detected when the user fills the card number.

issue 4: Selection of “Card type happened 3 times (one from the Diamond bank webpay and two times from Interswitch’s card WebPay page) — Those experiences can put great doubt and fear into users. We are humans ooo. A question we should ask ourselves also is “how can we change this current trend of multiple redirects just to pay for an item online?”.

issue 5: No progress or hope-encouragement field. No progress on what is going on for a user who is already frustrated, going through 3 different sites just to make a single payment. Yes! there is another stage of token generation (: Please let’s make people aware of this too. Though this can also be ignored for “once bitten, twice shy”. Users, after their first experience will learn about the token generation.

issue 6: Page looks too traditional — a complete UI touch is needed too. Great design does not ignore UI. Atleast a painted house will cover its dirty internals.

Sketch!!! sketch!!! sketch!!!

I always love this part for I am in love with Mrs. Sketch ( hahahaha, I mean i love sketching oooo )

So I embarked on trying out different redesigns until I was okay to prototype one.

And yes! I also worked on the Diamond Bank’s page too

Did any prototype emerge? Yeeeeesss :)

Atlast, after many variations using Bohemian sketch app,

I was able to come up with a flow from Diamond bank to WebPay that looks secure, confident, trustworthy and aesthetically satisfying.

Old flow

To the new flow

DISCLAIMER: I represent myself and myself alone and not any company or secret agency trying to mar or destroy Interswitch or Diamond bank’s online image. I am just a learning designer trying to improve, by looking at real life design scenarios. This is for educational purposes only.

Thank you so much for reaching the end of this article. Your feedback will be highly appreciated and please don’t forget to “recommend” and “share” the article if it made sense to you.

Check out DAY 3 of the 100 days UI challenge-Landing page that engages — A Wakanow case study

references:

The Ultimate UX Design of: the Credit Card Payment Form

Top 5 Online Payment Gateways in Nigeria 2016

New Credit Card Form UX Patterns

The Apple Store’s Checkout Form Redesign by Luke Wrobleski

Evolving E-commerce Checkout by Luke Wrobleski

Thanks awesome Dribbblers for their design inspirations :)