CLICKBANK
Checkout
Increasing average conversion rate for vendors across verticals and streamlining the checkout customization process to enhance its usability across a broad spectrum of users.
CONTEXT
Default Checkout
The initial checkout page was designed with a desktop-first approach, and was only partially mobile responsive. The overall user experience resembled that of ordering from a traditional physical catalog rather than facilitating a seamless digital purchase.
It was hypothesized that the dated interface made the checkout seem suspicious to users, making them less eager to complete their purchase with confidence in their information being stored securely.
RESEARCH
Breaking Down What Existed
Our primary KPI to measure a successful redesign of the checkout was conversion rate.
To address the issues of the checkout comprehensively, I conducted thorough best practice research spanning all facets of the checkout procedure. This involved benchmarking against industry-standard payment processors and leading online retailers. I did input by input analysis, paying special attention to the phone number and address inputs as the form is used internationally. I used Micro-strategy to create data grids of checkout conversion by form style, sales vertical, year, device, and other metrics.
Additionally, I leveraged tools such as MouseFlow to meticulously analyze hundreds of user recordings of both successful and unsuccessful conversions, thereby identifying and scrutinizing areas within the checkout flow that impeded user progression. 60% of checkout traffic came from mobile, in the most recent year mobile had a 6% higher conversion rate despite the form not currently being mobile-first designed. We hypothesized that taking a mobile first approach would increase conversion more.
Since the checkout was used by hundreds of vendors, there were many variations in appearance. I documented how the checkout interface modules would dynamically appear or disappear based on the type of product being purchased and whether vendors had opted to incorporate additional content blocks into their checkout process.
FEEDBACK
User Testing
One of the first design changes I tested was breaking out the checkout steps into sections for customer information, shipping, and payment information. Vendors and customers disliked that the checkout was a single step as this was against typical patterns and required more cognitive load on the end customer.
I conducted remote user testing user Axure prototypes with a general audience comparing two step vs three step vs four steps, and tabbed checkout ui vs accordion checkout ui.
There was significant user preference towards three step checkouts which aligned with what we learned from competitive analysis. Users indicated they felt these were a more positive experience and that they felt quicker to complete. We learned was that users felt more confident in their purchase when the check out included a review step, but that the process should not involve more than three steps, else the user would get frustrated.
There was no statistical significance between tabbed and accordion style UI and mixed opinions from vendors led us to the decision to allow this as an option for the vendor to select.
We learned from user testing that when the credit card images were colorized, users would click the images thinking they had to select their credit card type. I changed the credit cards to being grayed out and lighting up as the card was recognized to successfully avoid this misunderstanding.
I also conducted testing between displaying a lock icon at the top of the page and a lock icon inside the credit card field, ending up with both as this made the users feel more secure entering their payment information.
RESULTS
Increased Conversion
Compared to the original checkout, the new checkout form had superior mobile performance, with all elements designed for the viewport, and met accessibility compliance standards.
The integration of a floating pay button has notably enhanced user experience during checkout, alleviating the need for users to repeatedly scroll through their form information before final submission.
Through testing, we observed a 1% average increase in conversion rates.
The observed 1% increase in conversion rates is best understood in relative terms to the original conversion rate. For instance, if the initial conversion rate stood at 16%, the implementation led to a new conversion rate of 17%, showcasing a proportional improvement rather than simply a 1% addition to the original figure. This distinction is crucial as it underscores the significant impact of the optimization efforts, especially when applied across various categories and impacting millions of users.
CONTEXT
Checkout Customization
The process to customize the checkout to match the merchant’s brand required the uploading of a CSS file. No edits could be made after upload, so any adjustments required creating an entirely new checkout form. Checkout forms have to be submitted to ClickBank’s internal compliance team before going live, so any changes that Compliance ordered required a new checkout form to be created and submitted.
Customized order forms had a 1.1% higher conversion rate across vendors and verticals. However, vendors struggled to create customized checkout forms despite understanding the benefits. We hypothesized that streamlining the customization process would increase the amount and quality of customized checkout forms.
RESEARCH
Research
i met with the internal Compliance Team to understand the Compliance Process that checkout forms went through, understanding from the team of what criteria needed to be met.
I conducted a competitive analysis of WYSIWYG page builders and checkouts.
I assessed dozens of existing customized checkouts with various conversion performance to find out which elements were common, and which elements contributed most to conversion success. Timers and social proof contributed highly to good conversion rates.
Alongside the Product Owner, I led client interviews to understand difficulties and desires our users had with the customization process.
We consistently received feedback about the difficulties around:
Writing and editing CSS to create their templates
Inability to edit or change a template once uploaded
Limitations of only one layout
Limitations of single step check outs
The out-dated base design and poor attempt at mobile responsive
and more nuanced grievances.
“When will this be live? It looks so much easier than what I am doing now.”
FEEDBACK
User Testing
I created medium fidelity wireframes to take back to vendors. I recorded their assumptions on the interfaces and asked how they imagined they would perform tasks within an interface like this. I asked about their preferences and whether their needs were met.
I asked extensively about how they felt editing in a panel and seeing results vs editing on the demo. Users preferred a combination, using different editing styles for different use cases. Overall, vendors were enthusiastic to see an interface that they felt they would be able to navigate on their own without the help of a developer. The Product Owner and I heard many times over that this feature was something they had desired for years and that they would love to participate in any beta testing.
The Product Owner and I explored multiple prebuilt WYSIWG plugins and libraries in advance for the Engineering team. Drag and drop functionality alongside page builders are extremely common and we wanted to prevent the engineering team from having to reinvent the wheel on these requirements.
RESULTS
Results
We adopted an MVP approach focusing solely on essential modules, leading us to remove certain features like videos and timers to expedite our Go-To-Market strategy.
Throughout development, each module's micro-interactions underwent concurrent testing, alongside extensive client interviews using high-fidelity mockups. This process resulted in minor interaction adjustments, such as refining image selection and enhancing the functionality of saving, editing, and deleting modules, all aimed at improving usability.
Despite the application's inherent complexity, developers navigated the project with minimal queries, owing to the comprehensive designs and documentation provided.
Our solution empowered merchants by eliminating the need for CSS knowledge or the hiring of developers to customize their checkout pages. Merchants could now preview changes without needing to submit to Compliance.
Get in Touch
I’m a passionate UX professional combining data, strategy, and aesthetics.