top of page

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)

Existing checkout w numbers_TINY@2x.png

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.

Checkout old - error_TINY.png

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.

Checkout Var 1_TINY@2x.png
Checkout Var 2_TINY@2x.png

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

Autofocus@2x_TINY.png

Auto-focus

Inline errors@2x_TINY.png

Improved error states - inline validation

Credit Card Display_TINY@2x.png

Credit card display

Credit Card Display_TINY@2x.png

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

Apple iMac@2x_TINY.png

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. 

bottom of page