A list of UX to-do's
How does a global brand get comfortable with major changes in just days? Data...
While with Columbia Sportswear, one way we sought to improve overall site performance was by understanding where abandonment was occurring. We reviewed analytics, customer reviews, and feedback, we came up with an innovation we felt confident in.
However, it would take qualitative user-testing, combined with quantitative A/B testing, to convince. And it was convincing.
Working with a data-mining expert, we reviewed the eComm abandonment reports for the Columbia Sportswear site, and their sub-brands Mountain Hardware, Sorel, and Prana, and found:
We looked at pages with high drop-out rates, paying closer attention to funnel pages, PDP->Cart->Checkout.
We found the checkout flow had progressively increasing drop-out rate over the course of four checkout pages, far too high.
I investigated, and found plenty of UX improvements to make to decrease abandonment
Strategy - A single-page checkout
We proposed a single-page checkout - something innovative in early 2016. Columbia would be one of the first international online retailers to design and deploy a single-page checkout, which are ubiquitous today.
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation. They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
What was the main purpose of your sketches? (e.g.: presenting, testing, brainstorming)
What information was the basis for your sketches?
If you made multiple versions what were their main differences?
Which version did you choose and why?
Explain the layout and arrangement of the elements!
How did your sketches help you move forward?
Before pushing live we conducted two rounds of validation testing.
The first round was moderated user-testing, designed to validate whether our UX strategy and design decisions had qualitatively improved the experience. After building a working prototype (in collaboration with a developer) we asked 25 participants to checkout twice, once on mobile and once on desktop, and to think "out loud" while doing so. Other variables like using a gift card, using PayPal, and changing their shipping info were balanced and tested as well.
Spoiler alert - they loved it. We moved to round two...
A/B Testing - We quickly setup an A/B test, exposing the new single-page checkout to about 10% of site visitors, looking for a 5% reduction in abandonment during checkout as positive threshold to increase audience. We expected this to take a couple days given traffic - we hit it in about 6 hours, and immediately increased the audience to 25%, and finally 100% three days early.
Abandonment rate - Site-wide: down 6%
Abandonment rate - during checkout: down 10%
Recovered revenue - Not shared for NDA reasons, but well worth the effort,
Next steps - kick-offs were planned to convert the three sub-brand sites to the same single-page flow at quickest haste.