CONTEXT
Upsells and cross-sells are standard sales techniques of offering customers higher-end items, related products, or additional quantities at a discount.
By the end of 2020, these types of features had become a standard third-party developer extension for Shopify’s Checkout flow, increasing a merchant’s average order value by 30%.
But this came at a cost. Shopify lost out on valuable customer behavior data, the merchant dealt with non-customizable pages and losing control of their customer experience, and customers were left confused to to what exactly they were buying.
UX STRATEGY
My UX team was split in two, one working on our long-term Customer Segmentation platform, while 1 designer, 1 content strategist, and myself joined an existing Checkout engineering team to build an MVP solution. We had to balance the needs of Shopify, our vibrant third party developer community, our merchants, and their customers. And we had to do it in 3 months!
We know we could not shut out developers from developing Checkout plugins, yet the user experience of their current cross-sells and upsells UI was poor.
As UX Manager, I led my team to:
- Educate our developer community on Shopify Checkout best practices
- Take the burden of a developer’s front-end development by creating a Shopify cross-sells layout and page template
- Build out a UI toolkit for developers to extend the template system
- Document styles and provide developers with documentation
LAYOUT AND PAGE TEMPLATE
UI TOOLKIT
OUTCOMES
Our cross-sells MVP delivered a 12% increase in average order value, migrated our top 3 cross-sells developers to the new template system, and reduced customer confusion during Shopify checkout.
