SurveyMonkey Checkout
Running experiments to provide the best checkout experience
On my entry into SurveyMonkey, I was tasked with redesigning the Checkout page, a page that was not touched for over 4 years and data that pointed to much-needed improvement.
The goal was to reduce friction in the purchase process, allowing easy and smooth transactions to start off a good relationship with the SurveyMonkey product. We aimed to increase our Checkout-to-Order conversion rates and regain lost business.
Goals
Increase checkout to order conversion rate as we move to a new scalable technology, while improving the user experience
Previous Checkout Page (control)
Visually the page was functional, but not enjoyable.
Misalignment of UI elements did not seem professional and users questioned if this was a false page.
Placing the payment method at the top did not inspire trust.
Also payment methods were dependent on the country that the user selected.
Confusion around the field and specifications, like purchase order number and adding users to their plan caused buyer hesitation
Error states were global only, making it hard for users to correct their information.
Users would be automatically scrolled to the top of the page to view the error message and the fields in error were not highlighted.
Discovery
To establish a baseline of understanding of checkout, I ran usability research studies; uncovering issues of trust, comprehension, and display errors that kept blocking users from completing their purchase.
Two experiments
I studied multiple checkout flows and looked at best practices, before whittling down to 2 experiments to test layout and information display.
Multi-step checkout
SurveyMonkey supports 15+ countries and research shows multi-step checkouts are popular internationally. Breaking down checkout into digestible chunks makes it easier for users to complete the form
Single page checkout & right order summary
I displayed all the fields on a single page paired with a persistent order summary which is standard across checkout forms. This would promote trust and eliminate pricing confusion.
In addition, we committed to optimizing the experience including:
-
Designing for mobile
-
Improving errors with inline validation
-
Clarifying credit card display
-
Reducing form fields for different countries
-
Pre-populating form fields
-
Payment method instruction improvements
-
Additional tooltips
-
Order of sections
Auto-focus
Improved error states - inline validation
Credit card display
Credit card highlight
The Results
Our hypothesis 1 had a sweeping win, increasing in both the US and our supported countries. For users who entered the checkout funnel there was a 4% US / 8% non-US improvement of Basic to paid users in the new design over the control.
+4% conversion increase
U.S. increase in improvement of Basic to Paid (B2P) rate in the test v. Control
+8% conversion increase
Non. U.S. increase in improvement of Basic to Paid (B2P) rate in the test v. Control
Next steps
This experiment was valuable to help us establish a framework for our checkout across all SurveyMonkey locales. Variation 1 was implemented and our team continued to optimize checkout, running additional tests like adding a help widget, providing an order summary, and tweaking the UI, to continue to highlight the value to users.
