Reducing mobile checkout abandonment by 20%.
For one of our partners, we have completely re-invented the whole Payment Page to provide better UX and optimize conversions.
The approach included analyzing heatmaps and session recordings to include those insights into the general good UX/CRO practices.
Payment page has suffered from a significant drop-off rate, especially on mobile. This was especially alarming since the user had to spend significant effort filling out the forms to get there.
Industry:
E-commerce
Products:
Website (Checkout)
Market:
USA
Scope of work
Our UX team uses a wide variety of tools, techniques and frameworks to solve problems and support your business.
Project Goals
Decrease abandonment on the checkout page.
Keep the existing payment-providers and make sure the checkout is compliant with their requirements.
Challenges
At Riotters, we excel in challenging projects.
With a blend of expertise and tenacity, we embrace complexity, turning it into opportunities for innovation.
One of the most sensitive part of the website
Redesigning a checkout is always risky business, as this is the final step the user takes to making a purchase. Any mistake on our side can cause them to abandon their cart at the very last minute.
Technical Constraints
We had to make sure w keep the checkout is compliant with payment providers requirements. We also weren’t allowed to suggest new providers.
Optimizing for mobile
The original design was focused purely on desktop. However, with the increasing mobile traffic, we had to accommodate the view for the limited space.
Approach and Solutions
By analyzing session recordings, heatmaps, GA4 data and conducting our UX/CRO audit, we determined the weakest spots and created multiple variants of multiple components to experiment.
Before. Where was I?
The architecture of the top of the page proved several issues, from disrupting the user flow, to pushing the most important information (payment info) far below the fold.
We used session recordings and a usability study to support the hypothesis that most people will scroll past customer reviews.
After. Giving one last push
We added a progress bar to reassure the user that they’re almost done.
We prioritized payment info over customer reviews.
Before. How much do I pay?
Previously, the checkout page didn’t have the total clearly displayed. It was hidden and only accessible at the top of the screen, which most users didn’t noticecc.
After. Clear total
We made sure that the total price is visible to all customers and close to the final CTA.
Before. What’s next?
In the session recordings we noticed that a lot of users tried to scroll below the buttons. We’ve also learned from the Customer Service and online reviews that a lot of users shared very similar questions about their order.
After. FAQ
We decided to add a short FAQ to answer the key questions that were stopping the users from placing their order.
The redesign resulted in an very significant decrease in abandonment rate of this step and significantly higher overall conversion rate.
Industry:
E-commerce
Products:
Website (Checkout)
Market:
USA
More cases
Book a call with our UX Advisor
Let's talk about your product and choose the solutions that best fit your needs. Book a free consultation now - let’s unleash your product potential.
