As a front end developer passionate about e-commerce platforms I had the chance to work on the development of a mobile booking flow and I soon realised that it’s very difficult to create a low friction experience with high engagement and easy to use workflow.

Reducing friction and making our user’s life easier when it’s time to make a purchase is fundamental. The checkout process is probably the most stressful step for our users.

The problem

People usually don’t enjoy the process of buying something on the web using their mobile devices.

They do not remember all 16 digits, cvv, expiration of their credit/debit card. Then the users need to add their contact details, billing/shipping address.

They do not trust the website: it does not matter if the website has the green locker on the navigation bar; the user experience and the user interface is always different because every website implements a different solution to resolve the same problem.

On top of this, users need to add the same information using different keyboards, dealing with fat fingers, moving through multi page forms. It’s a large set of information, always the same, tedious and repetitive.

Statistics

If we try to compare the desktop web site and the mobile website of a product I’ve worked on, we find a very interesting situation. Despite the mobile traffic is continuously increasing, the conversion on mobile web devices is pretty low. Now, I’m not saying that the mobile web product is badly engineered. I’m also not saying that we should compare the users base. People probably use the two products in two different ways and they expect something different.

I can probably give you the following rough statistic about a product I have worked on in the past. The mobile web traffic is 30% more of the desktop web traffic. The mobile web conversion is 60% less of the desktop web conversion.

If we now try to compare the native apps (ios and android) with mobile web, we can see something very interesting. On mobile web, the step conversion between the result page and the checkout page is the same as a native app, i.e. ~30%. Despite this, the step conversion between checkout page and payment confirmation is half, i.e. 30% on native app versus 15% on mobile web.

Other requirements

On top of all this, as developers we unfortunately have to deal with some business requirements that are not always simple to meet:

guess the card type as soon as you start type the number

validating the number

guess when the number is complete so to jump the focus of the user on the next field

add spaces between digits to change the syntax depending on the type of the number

These require always being up to date with new cards that banks are continuously releasing. Imagine also providing OCR functionality with the device’s camera.