ClickBank
2020
Redesigning legacy checkout and lifting conversion 6%
Increasing average conversion rate for vendors across verticals and streamlining the checkout customization process to enhance its usability across a broad spectrum of users.
Overview
A checkout buyers trusted and vendors could finally customize
ClickBank’s checkout was desktop-first, looked dated, and a single long step, and customizing it meant uploading CSS that couldn’t be edited afterward. I used conversion data to make the case for a mobile-first redesign, then partnered with the Product Owner and Compliance on a builder that let vendors brand their checkout without a developer.
The Impact
The new checkout raised average conversion from 16% to 17%, about a 6% lift across vendors and verticals. The builder took away the need for CSS and developers, and vendors could preview changes before sending them to Compliance.
Problem
Legacy checkout looked untrustworthy and customization required CSS knowledge
The checkout page was designed with desktop-first and was only partially mobile responsive. The overall user experience was more similar to ordering from a traditional physical catalog rather a modern online checkout.
I suspected that the dated interface made the checkout seem suspicious to users, making them less eager to put their information into it.
Eeeeek, the 90s called. They want their checkout back.
Worse, many vendors had their websites pointed to the default un-customized checkout.
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% actual higher conversion rate across vendors and verticals. However, vendors had a hard time creating these customized checkout forms despite understanding the benefits. We knew that if we made customization easier that it would increase the amount and quality of customized checkout forms.
Research
Interviewing vendors and researching WYSIWYG builders
Breaking Down the Default
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.
Understanding Customization Requirements and Desires
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.
Distilling interview feedback into common themes
Testing Checkout
How many steps is the correct amount?
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.
Exploring a three step checkout flow which was user tested against single and two step versions
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.
Testing the Customizer
What you see is what you get
I created medium fidelity wireframes to take back to vendors. I 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. I expected that direct editing would be more popular, but users preferred a combination, using different editing styles for different use cases.
Overall, vendors were really excited to see an interface that they felt they would be able to use on their own without the help of a developer. I heard many times over that this feature was something they had desired for years and many vendors volunteered preemptively to participate in any beta-testing we had planned.
Exploring different dashboard concepts focused on hierarchy, transaction visibility, and clearer everyday financial workflows.
"When will this be live? This looks so much easier than what I'm doing now."
Interview Participant
E-commerce Vendor
The Product Owner and I researched multiple prebuilt WYSIWG plugins and libraries in advance for the Engineering team in order to ensure that the UX of any OOTB tool selected matched the prototype experience. 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.
Usability testing continued throughout development, with each module's micro-interactions being tested as engineering began building the overarching framework for the customizer. This resulted in minor interaction adjustments, such as refining image selection and ensuring actions like saving, editing, and deleting modules were simple and intuitive.
Outcomes
Higher conversion and access to customization without a developer
In controlled A/B testing, average conversion across vendor categories rose from 16% to 17%, about a 6% lift, which is meaningful at ClickBank’s scale.
Vendors could preview changes before submitting them to Compliance, which removed many duplicate reviews for the internal compliance team.
Customizer demo protoyped with Figma
Deafult checkout on a mobile device, prototyped with Figma
