Checkout flow redesign

A UX and UI Design project by Jennifer Lee Palandro

Introduction

I hopped on a call with a team leader and colleague about a website redesign project, but we ended up prioritizing iterative needle-movers. As a result of that call, I spearheaded the project to redesign the checkout flow so it would have more customer retention, more storytelling, and more conversions.

At the time, the checkout flow had a drastic dropoff rate with each screen because the flow felt jarring and overwhelming.

The overarching user experience and journey were missing, thus not providing customers a reason to propel forward with each screen.

Analyzing the current flow

To move quickly, I brainstormed improvements to the various screens, stating why a user may not want to move forward in the checkout flow. Here are the notes I presented to the team via an asynchronous Loom video and written documentation.

Screen 1

  • It’s good, but it doesn’t tell you the compelling reasons WHY you want to continue

  • Might be too much information upfront

  • We are working on an email capture to come earlier in the process

Screen 2

  • This step feels abrupt. What is a CGM kit and why do you need one? What is the main difference between the two? Why might you want to choose one over another? Maybe we need a “Recommended.”

  • “Per Kit” is there, but why does this matter? Why does someone care about how much it is per kit? Do we need more of a primer to tell them that in the next step (to be fixed) that they’ll choose the proper cadence?

Screen 3

  • Too much text, coming without context to the user. An eligibility questionnaire is too official this early in the process.

 

Analyzing the current flow

Getting to this part of the process involved thinking about reordering the screens so they would make more sense to the user. Many of these screens and pieces of information wouldn’t make sense to a user who came in sideways to the checkout experience. I continued to make notes to share with the stakeholders and to help me create a more streamlined user-centered design proposal.

 

UX Design Proposal

By writing a proposal first, I could get quick buy-in from stakeholders before taking the time to create low-fidelity visuals.

  1. Intro screen: the “What’s in it for me” screen with benefits etc, inspired by the first three screens of the App Store writeup and assets where I was the Directly Responsible Individual.

  • Company shows you how food affects your health

  • Track your blood sugar in real-time to take control of your diet and make more informed choices

  • We help make food choices easy with personalized nutrition guidance

  • Need to say something about lifestyle choices in here, too… maybe the pillars of health, etc.

  • Major benefit: The ✨ first time ✨ you’ll finally be able to unlock what will work best for YOUR body. Aka no more guesswork

  • Include testimonials!

  1. The email capture screen

    • Now that folks are jazzed about the mission and understand what they can get out of it, it’s time to grab their email address per the work completed by our lead engineer on the project.

    • If they abandon the cart, they will receive an abandoned cart nurture email sequence, which will have a higher conversion rate than a one-off abandoned cart flow. This nurture sequence will have the educational parts of metabolic health, CGM tracking, benefits like lowered risk of disease, combined with pitches and allowing them to pick up where they left off.

2.5. The “Where’d you come from?” screen

  1. The CGM education screen

    • Based on the feedback from our new member calls, most customers need a primer on why one type of CGM is better than the other, even if it happens on the same screen as where they make their selections. But for the sake of this exercise let’s have it be a separate screen. Maybe with animations ✨ to show the toggle between the two

    • Locking in these two naming conventions with appropriate hyphenation:

      • Real-time streaming CGM kit versus

      • Manual-scan CGM kit

  2. The CGM choice and cadence screen

    • Self-explanatory. Smoosh this down into one screen so it’s not a lot of scrolling

    • Include the price of each kit HERE. Not anywhere before this(!)

  3. Where should we ship your CGM kits?

    • Address capture

    • Condense this if it’s possible!

  4. Excitement around membership

    • Without this, the price on the next screen may become a really easy “no”

    • Talk about why membership is necessary and what the benefits are:

      • app with tracking, real-time personalized insights; community, experiments,

      • what it unlocks: blood testing, nutritionist marketplace

    • Call to action: Become a member

    • All this for just: $16.58 per month (billed annually), which is a more human friendly, feasible number than a $199 lump sum

  5. Billing capture

    • Just credit card info

    • Zip code and/or billing address

  6. Order summary

    • Quick intro on why the company is awesome. One sentence max. Add mockup of CGM kit + app for visuals 😍

    • Membership price

    • CGM kit price with type and cadence specified

    • Small: “By submitting your order, you confirm your eligibility in that you reside in the US, don’t have a T1D or T2D diagnosis, are not on diabetes medication other than metformin or pioglitazone, don’t have an allergy to medical-grade adhesives, and are not incarcerated or are in legal custody.”

  7. Confirmation screen

    • This screen is currently missing and would need to be added. Right now, post-order-summary the user goes straight into medical consultation land, which can be overwhelming to the new customer who just spent a lot of money.

 

The high-fidelity wireframes

One of the main goals for this checkout flow is to move users through the experience in a way that presented the right context at the right time, so no screen would be jarring and cause an flow abandonment.

Through screen analytics, we saw about a 30% dropoff at each screen, with the full conversions being low.

Through the redesign, I tried to provide context and not overwhelm the user with too much information at once.

If I were to work on this further, I’d suggest:

  • Video content for advisor content or customer testimonials

  • Animations for an overview of the process

  • More thought around the user experience post-purchase, and what onboarding would look like in relationship to this new checkout flow

 
 

Additional thoughts and questions

  • Do users have questions as they move through the process? Should we add a chatbot or FAQ hover icon to help guide them through questions, with a chance to reach out to support?

  • How can we present the information about CGM choices and subscription cadence in a more informational—yet not overwhelming—way?

  • UX research is needed for this flow!