Shopify

Shopify

•

•

2023

2023

Optimizing Shopify's Subscription Checkout

A new checkout to enhance the user experience while better catering to the evolving business strategy of upsells, cross-sells, and bundles. The first iterations already boosted conversions and generated an additional $17 million in gross profit.

TL;DR

Shopify is a commerce platform that lets anyone start, manage, and grow a business. It powers millions of businesses in more than 175 countries and is trusted by brands such as Mattel, Gymshark, Heinz, FTD, Netflix, Kylie Cosmetics, SKIMS, Supreme, and many more.

Shopify's subscription checkout hindered the company's evolving Monetization Strategy by lacking support for upsells, cross-sells, and bundles. It required separate, costly maintenance for different checkouts.

Leading a multidisciplinary team, we've developed a new, streamlined checkout system that significantly improved user experience and supported combined transactions, boosting conversions and gross profit by $17 million with the first iteration.

My role

As project champion and craft lead, I collaborated with data science and product managers for research and implementation. I led three UX designers, managing their work to ensure smooth progress, and worked closely with engineering for feasibility. I kept senior leadership updated on the project’s progress.

Problem

Shopify's original checkout system, designed solely for subscriptions, became a hurdle as the company’s Monetization Strategy evolved. It couldn't support upsells, cross-sells, and bundles, which were central to the new strategy. Shopify also had separate checkouts for subscriptions, themes, domains, apps, and retail, each requiring individual development and maintenance, increasing operational expense.

Additionally, we've identified multiple UX flaws:

  1. The checkout caused friction with multiple exit points, confusing copy, and excessive input fields and confirmation buttons.

  2. The main call-to-action was often positioned below the fold, causing friction and drop-offs.

  3. Every selection and input required confirmation by clicking a button, requiring way more clicks than necessary.

  4. Separate teams maintained different checkout flows, adding maintenance burdens and inconsistencies.

  5. Upsells occurred post-purchase, asking for more money immediately after a sale.

  6. The flow wasn't optimized for mobile, leading to poor user experiences on responsive websites and the native app.


Approach

Recognizing these issues, I leveraged Shopify's domain knowledge and partnered with the buyer-facing checkout team. I created a vision prototype that addressed multiple problems and resonated with the organization. With support from my product and data colleagues, we presented the prototype to senior leadership, securing its inclusion on the roadmap.

We established a regular check-in panel for progress sharing and early feedback. We also consulted external sources like Baymard for a comprehensive checkout experience across Desktop, Mobile, and Native platforms.

I guided a multidisciplinary team, including a Product Manager, Data Scientist, Engineers, and three UX designers. I ensured regular communication with senior leadership, updating them on progress and integrating insights from internal and external resources.

Outcome

The new checkout system, now a convenient bottom sheet, enables quick conversions and upgrades without disrupting users' tasks. We established a clear structure with three key surfaces:

  1. Evaluation surface (not in this presentation): Offers like plans or app bundles.

  2. Left — Task surface: Facilitates transactions and captures essential information.

  3. Right — Review surface: Provides an overview of the purchase, cost, call-to-action, and legal information.


We streamlined the process, reducing form fields from 10 to 4, eliminating redundant save buttons, and removing rarely selected billing cycles. The user interface improved by hiding auto-fillable fields until an address is selected, ensuring a smooth checkout experience.



The new checkout supports combined checkouts for plans and retail products, enabling cross-sells during initial subscriptions or later, which was previously impossible and hindered the retail team.



We also updated the checkout with a timeline feature, simplifying cost clarity for merchants and scaling with Shopify’s needs.



Given the critical mobile version, we prioritized its release, leading to significant improvements in conversion and task completion.

Impact

We shipped iteratively to make sure whether or not our assumptions are true.

  1. Introducing the timeline to the old checkout slightly increased conversion rates.

  2. The improved mobile version launched successfully, showing higher task completion and conversion rates.

  3. The new subscription checkout within the bottom sheet and UX improvements significantly boosted conversion, adding $17 million in gross profits with the first iteration.

Other projects

Back

Improving accessibility and customizability in a white label app

Wunder Mobility