Openfit

Stream workouts anywhere anytime

February 2021 — February 2022

product design

A/B testing

Role: product designer

Website · app is absolved

Last updated January 2022

Openfit no longer exist after they were acquired and absorbed into the Beachbody ecosystem. Check it out here the appʼs website.

Introduction

This case study showcases the design work carried out at Openfit, a fitness streaming platform, with the objective of enhancing the checkout experience. The project aimed to integrate Apple Pay as a payment option and improve the overall user journey. The focus was on increasing the Purchase Conversion Rate (Purchase CVR) through A/B testing. The study encompasses Openfit's platform as well as Ladder.com, a standalone brand under Openfit.
‍

Business Problem

Openfit aimed to reduce cart abandonment and improve revenue and customer satisfaction by integrating Apple Pay and exploring alternative payment methods to streamline the checkout process. The success of the project was measured using the Purchase Conversion Rate (Purchase CVR), which tracks the percentage of users who successfully complete a purchase.
‍

Approach

To measure the impact of design changes, an A/B testing approach was used, creating two design variants. Design Variant 1 focused on streamlining Apple Pay integration, while Design Variant 2 prepared for expanding payment options. Both variants were tested on Openfit's mobile web platform and Ladder.com, enabling a comprehensive analysis of user preferences. Testing on mobile web allowed for a quick

Current state of checkout

Design Variant 1 focused on seamlessly integrating Apple Pay into the checkout process, providing users with a quick and secure payment option. The design aimed to minimize friction and reduce the number of steps required to complete a purchase.

Key Features

Customizable Checkout Experience: Users could personalize their payment options by saving a credit card and keep it on file, enabling them to choose their preferred option in the future.

Audit

In order to optimize the checkout flow at Openfit, an audit process was conducted to analyze the number of clicks required to complete the control checkout flow and the Apple Pay checkout flow. By examining the click count, I aimed to identify opportunities for streamlining and reducing friction in the user journey. This audit process provided valuable insights into the efficiency of the existing checkout process and guided the design decisions for integrating Apple Pay, ultimately improving the overall user experience.

Steps required to complete a checkout

Number amount of taps and user inputs a user has to do to accomplish a checkout

To complete the checkout experience of a person logged out from home it would take the following clicks. This is not considering the amount of input required to fill each field only tapping into them.

Design process

The design process for enhancing the checkout experience at Openfit took into consideration the problems identified with the current control experience. These problems included a high cognitive load due to the amount of information to decipher, the presence of legacy design components like checkboxes and radio buttons, and the overwhelming legal language.
‍

Identifying the problems

To address these issues, I followed key UX heuristics and principles:

Simplify and Streamline: Reduce cognitive load by streamlining information and simplifying legal language.
Consistency and Familiarity: Replace legacy components with modern and standardized controls for familiarity.
Minimize User Effort: Simplify interactions and reduce user input.

Design Variant 1: Apple Pay Integration In Cart

Design Variant 1 focused on seamlessly integrating Apple Pay into the checkout process by adding the button into the cart, providing users with a quick and secure payment option. The design aimed to minimize friction and reduce the number of steps required to complete a purchase.
‍

Key Features

Apple Pay Button Integration: A prominent Apple Pay button was placed within the checkout interface, allowing users to complete the transaction with a single tap.
Autofill User Information: Apple Pay automatically populated user information, such as name and billing address, eliminating the need for manual entry and saving time.
One-Step Payment Confirmation: Users could verify the payment details and confirm the purchase with a simple touch ID or face recognition, ensuring a smooth and efficient checkout experience.

Checkout task flow injecting Apple Pay in cart

Adding Buy with Apple Pay in cart

Apple Pay button and a checkout button in a v-stack anchored at the bottom in the chin pattern

This design variation explored a button a step before to drive users to purchase quicker and faster in an attempt to increase Purchase CVR.

Implication

The inclusion of legal copy in the checkout alert received pushback from the C-Suite due to the potential risk of users disregarding important terms, leading to compliance issues. To tackle this challenge, I explored alternative solutions such as reverting to the original placement or offering a dedicated link for users to review the legal terms separately. This approach aimed to maintain a streamlined checkout experience while ensuring transparency and compliance. The implementation of the legal copy in the alert was put on hold as further options were explored.

Alert modals

Steps required to complete a checkout

Number amount of taps and user inputs a user has to do to accomplish with the proposed checkout experience

To complete the checkout experience of a person logged out from home it would take the following clicks. This is not considering the amount of input required to fill each field only tapping into them.

Design Variant 2: Alternative Payment Options Expansion

Design Variant 1 focused on seamlessly integrating Apple Pay into the checkout process by adding the button into the cart, providing users with a quick and secure payment option. The design aimed to minimize friction and reduce the number of steps required to complete a purchase.
‍

Key Features

Multiple Payment Options: Variant 2 offered users a selection of alternative payment methods, including credit cards and in the future would include PayPal, and digital wallets, in addition to Apple Pay.

Checkout task flow injecting Apple Pay in cart

Adding Buy with Apple Pay in checkout

Apple Pay button in a radio button list

This design variation explored a button a step before to drive users to purchase quicker and faster in an attempt to increase Purchase CVR.

Implication

The inclusion of legal copy in the checkout alert received pushback from the C-Suite due to the potential risk of users disregarding important terms, leading to compliance issues. To tackle this challenge, I explored alternative solutions such as reverting to the original placement or offering a dedicated link for users to review the legal terms separately. This approach aimed to maintain a streamlined checkout experience while ensuring transparency and compliance. The implementation of the legal copy in the alert was put on hold as further options were explored.
‍

Identifying the problems

To address these issues, I followed key UX heuristics and principles:

Simplify and Streamline: Reduce cognitive load by streamlining information and simplifying legal language.
Consistency and Familiarity: Replace legacy components with modern and standardized controls for familiarity.
Minimize User Effort: Simplify interactions and reduce user input.

Results

The A/B testing conducted on Openfit's platform and Ladder.com revealed that Design Variant 2 outperformed Variant 1 in terms of Purchase Conversion Rate (Purchase CVR). On Ladder.com, the expanded payment options in Variant 2 led to an impressive 81% increase in Purchase CVR compared to the control group. However, on Openfit, statistical significance couldn't be determined due to potential bias from users with saved credit cards.

Based on these results and the positive user response, the decision was made to implement Design Variant 2 as the primary checkout experience for both Openfit and Ladder.com. This choice not only improved the user journey but also aligned with Openfit's commitment to providing a seamless and user-friendly platform for fitness enthusiasts.
‍

A/B test results

Takeaways

By strategically integrating alternative payment options into the checkout experience, Openfit successfully enhanced user satisfaction and Purchase CVR. The A/B testing approach allowed for data-driven decision-making, ultimately leading to the selection of Design Variant 2. Moving forward, Openfit can continue to iterate and optimize the checkout experience and incorporating apple pay into other checkout flows and experiences.
‍