- Mobile Billing Optimization

Increasing conversion 2x by cutting unnecessary pages.

In Summary

One of my first “deep dive” projects, in terms of UI/UX, at was when I was asked to help redesign our mobile billing pages/path. Our product team had noticed an increase in mobile traffic, without conversion numbers that came anywhere near those of our desktop traffic, realizing that there must be some aspect to our mobile experience causing this drop, we took to getting at the root of the cause. After going through my design process, and meeting with various stakeholders, a refreshed design was created and launched. In the months following, conversion had doubled on mobile –and our desktop conversion saw a lift as a result of some similar, albeit less drastic, UI updates. Below is a deeper dive into my process with accompanying screenshots and mocks.


The Problem

The core problem in why our mobile conversion wasn’t even close to our desktop presented itself when I ran through the mobile billing path myself, as though I were a user. We had three separate pages to load to complete a purchase. That is a lot to ask of a user from a load time perspective, and once they did arrive at the third step, the actual billing page – they were presented with so many fields they could easily go crosseyed.

Simply put: We were asking so much of our users instead of making the process as simple as possible.

The Process

My typical process usually begins with a multifaceted analysis of any existing solutions we, as a company, have in place and secondarily, other solutions to similar problems. There is certainly a time and place for breaking the norm in the UX/UI world, but I do like to keep up on what others’ solutions are as it helps me be informed and see possible plusses and pitfalls to doing things that way. This method is exactly what led me to realize how many pages we were stepping users through, and just how long the actual billing page was – when this was compared to other online retailers and travel agents, I realized we wouldn’t have a fighting chance in the mobile space if we didn’t address this.

My first approach was definitely going to be centered on taking a three page process down to two, but my other challenge was the fields we were capturing and how unnecessary they felt. I then used my research to lead a discussion with the project owner as I wanted to know exactly what fields we needed to have, and confirm that any we could get rid of wouldn’t have an adverse affect on our side if removed.

One more factor at play was that of the design of the actual fields being used, they were simply desktop fields on a mobile width – which translated to a tangled web of pinch and zoom, trying to activate fields, and fill them out, and ultimately getting frustrated.

Before & After

Let's Get Social

Follow me on the platforms below, and get in touch so we can work together on building something awesome!

Built with Elementor © 2019 Kristoffer Daniels. All Rights Reserved.