Levels

Redesigning the purchase flow of a health and wellness company

Date

2023

Contribution

  • Research & Analysis
  • Prototyping
  • Design Execution
  • Test & Validation

Links

Prototype of the final purchase flow design

TL;DR

Levels is a health and wellness company on a mission to end the metabolic health crisis. By leveraging data shared by members from biosensors like continuous glucose monitors (CGM), Levels provides real-time feedback on how diet and lifestyle choices impact your health.

Due to resource constraints, the companies purchase flow remained largely untouched since launch, and was delivering very low conversion rate (~1.6%). Having recently left closed beta and with growth the top priority, converting more new members was now critical to success. Working as part of a small growth-orientated product squad, I led an initiative aimed at identifying and addressing the root causes of poor performance and delivering a purchase experience that what lead Levels into its next stage of growth and beyond.

Key Results

  • Increased conversion rate by 275% (1.6% → 6%)
  • Added $3M in annual recurring revenue
  • Increased monthly sensor subscription by 44%
The original purchase flow designs

Research

We began the project with a short discovery phase. Our primary focus was to identify the problems with the existing purchase flow and, at the same time, validate or discard our initial assumptions. We used a blend of qualitative, quantitative, attitudinal, and behavioural research methods to get a more comprehensive view of what we were solving for. Our research uncovered a list of problems that we categorised into six key themes.

Problem Definition

  • Obscure pricing and unexpected costs
  • The suitability of membership options is unclear
  • Too many steps to completion
  • Poor usability and visual design
  • Unreasonable collection of personal information
  • Trust and security concerns
Heuristic evaluation to identify problems with the user interface
Remote usability testing to learn what customers are thinking and feeling
Web analytics review to surface any trends and anomalies
Funnel analysis to understand where users are dropping off
Listing and prioritising our assumptions and hypotheses
Customer personas to understand who we are designing for
Customer feedback collected pre and post-purchase
Affinity mapping to uncover themes in the data.

Process

We worked fast and iteratively, shipping experiments weekly, taking the view that getting designs into the hands of our users was more valuable than achieving pixel perfection. Learnings from each experiment informed our subsequent design decisions, refining and revising the purchase flow with each pass. Regular planning and prioritisation helped us stay focused on the ideas we believed would have the biggest impact.

In our early work, we prioritised implementing CRO best practices, improving usability, fixing technical bugs, and meeting basic customer expectations. Later work explored more innovative ideas that whilst potentially hugely impactful, were deemed more risky.

Early wireframes of the purchase flow
Remote usability testing early designs
Purchase flow v1
Analysing A/B test results in PostHog
Ideating pricing structure and strategy
Iterations of a single design component
Building a clickable prototype in Figma
Sharing experiment results with the team

Priming the user

We included primer questions to reiterate and reinforce the product's primary use cases and align it with the customers' health goals. We would later use the information to personalise the product onboarding and in-app experience. Although counterintuitive, deliberately incorporating purposeful friction into the purchase flow improved user engagement and sign-up quality.

Primer questions added to the purchase flow

Pricing clarity

We made it easier for customers to select a membership by consolidating the three-step process into a single view, allowing them to compare and consider their options without navigating between pages, reducing potential friction or frustration. A cart summary lists the user’s choices and provides a clear and transparent breakdown of the costs.

Consolidating a three-step process into a single view

Simplifying decision-making

We limited the number of CGM plans to reduce confusion and support quick decision-making and used a statistic aligned with their stated health goal to highlight the advantages of the monthly subscription option. To aid sensor comparison and selection, we created a simple table of attributes and included a "Most Popular" sensor for social proof.

Supporting quick decision-making, comparison and selection

Less-friction

To streamline the purchase process, we reduced the number of steps and required fields to only those that were absolutely necessary. We made sure forms were set up to make use of browser autocomplete, introduced additional payment methods at checkout and implemented a more user-friendly search-as-you-type address lookup function. For users concerned about security and privacy, we included a number of trust badges, customer reviews and partner clinician testimonials.

Streamlining the end-to-end purchase process

Improved usability

We made significant improvements to usability and visual design, with a particular focus on the performance and appearance on mobile devices. Our forms were redesigned to comply with best practices and accessibility standards, and we implemented an improved client-side validation.

To maintain design consistency and speed up development, we created a simple style guide for typography, colour, grids, and spacing. Later, we expanded it to include components, layouts, and interactions.

Making significant improvements to usability and visual design