• Design
• iOS
• In Depth

Taking a checkout conversion rate from 45% to 65%

Not your usual e-commerce app

We work on a variety of apps here at Brightec, all of which have their own unique challenges and things about them that we really enjoy doing. In this blog we look at a unique iOS app that buys products off the user, not the other way around. Users gain money through the app, as opposed to parting with it.

Despite this fundamental difference to most e-commerce apps, there is a vast amount of overlap in user behaviour; Many of the same fields need to be completed and the user flow is roughly the same. While the user isn’t parting with money, they are parting with their previously-loved items. Both these decisions make the user question whether or not they should complete the checkout process.

We collect insights on the app's performance through Firebase. And this blog is mainly written between the two firebase events 'begin_checkout' and 'ecommerce_purchase'. In a nutshell, we're talking about the amount of people who started the checkout process and then went on to finish it with a purchase.

Last summer, the checkout conversion on the app was down at 45%. It's now up at 65%. So here are our proven tips for improving checkout conversion.

Increase accessibility

Before we undertook the design and development work for the update, many of the text colours throughout the app did not meet the industry standard for contrast ratio. If you’re unaware of this concept, it's basically a means of testing how easy your text is to read.

In a nutshell, we made our grey darker. But there were also instances where we previously had the brand orange on a white background for a header, or vice versa. This was very difficult to read and didn’t pass the ratio test. So we completely changed the way we worked with the brand palette.

If you want to check how your colours fare for accessibility, try this website or get the mac app Contrast.

Since the update, all the colours match the accessibility standard for contrast ratio, and therefore we can be confident that users are able to digest the information on-screen much more easily.

Remove friction elsewhere in the app

In order to improve checkout conversion, you have to look much wider than the screens which make up that final part of the user journey. Something that a user sees during onboarding right at the start, could make them hesitate before tapping ‘Complete’ at the end.

The app uses a barcode scanner to provide a value for each item. We discovered that lots of users were accidentally scanning duplicate items, adding multiple copies of the same product to their basket by mistake. When they got to the checkout summary and noticed that the number of items was higher than they were expecting, they naturally left the checkout flow to investigate further and to check for themselves where it had gone wrong.

To combat this, we deliberately introduced a delay to the scan speed. After an item was scanned, we forced the app to wait for a number of seconds until we felt confident the user would have moved their item away from the camera.

We also introduced a warning dialogue, to let users know earlier in the flow that we had detected duplicate items in their trade. Making the users aware of the issue sooner, meant that they could fix it while the action was still fresh in their mind. We didn’t force them to remove duplicates, as some users legitimately had two copies of the same book which they wanted to get rid of.

These changes worked really well. Before the update, 7.5% of users scanned duplicate items. After the update, this figure had been reduced to 4.8%.

Not only has this improved the conversion rate on the app, but it's also saved time for the client’s warehouse staff, who now process a lower percentage of unintentional duplicate trades.

Increase consistency between interactive elements

We went through the app and made the interactive elements the same colour wherever possible. The goal was to make it clear to the user what actions they could do on any given screen. In our particular case, if it was blue, you could tap on it.

Previously there was a combination of orange, grey and blue colours. Each signifying different types of buttons (Primary, secondary, tertiary etc). This felt clever at the time, but in reality, it proved to slow down the user’s decision making through the checkout.

Time is money, faster flows mean more checkouts

The longer it takes for a user to get through the checkout process, the more opportunity they have to change their mind or get distracted.

By removing clutter and tidying up the UI, we made each mini-decision that a user has to make a little bit easier. This means that on average users complete the checkout 9 seconds faster than before we made the changes. It sounds like a small margin, but in a world where a 1% increase in conversion rate could be the difference of tens of thousands of pounds. It's worth investigating.

What does this all mean in monetary terms?

The improvement in conversion rate is responsible for a 35% increase in the total value of items sent to our client. This was measured over the first 6 months after the update. That figure is purely the value of the difference between old and new conversion rate, it does not take into account increased volumes as the app has grown. Being an ongoing app, this result will of course continue to prove a worthy return on investment for our client month on month, year by year. Seemingly small details really do matter.