A checkout flow for Gainful’s custom nutrition system

Gainful is unique for its personalized protein powder. They aimed to expand by offering a range of custom supplements.

Our task was to create a user-friendly checkout process to transition from selling one product online to a complete personalized nutrition system.

We began with a round of baseline usability testing to inform changes to the checkout flow.

Gainful customers had different goals and experience levels, but shared a lack of understanding about how their personalized blends were made.


This insight allowed us to distill our experience principles.

Experience principles

  • Show exactly how products work together to help athletes achieve their unique goals, regardless of their experience level.

  • For both skeptical fitness veterans and beginners just starting out, understanding the why behind our recommendations was key to their trust in the product.

  • Introduce and promote new offerings (ex, Hydration) as a key part of the nutrition system without detracting from the conversion rate of the core Protein produt.

The intake quiz served as an opportunity to learn customers’ goals while as educating them on the science behind their blends.

We created the “Why We Ask This” pattern to anticipate common questions we heard in usability testing.

We also learned there were certain patterns in the existing quiz that caused usability issues.

We resolved those issues with bespoke UI patterns and layout optimized for mobile, as most of the sites traffic was routed from social media.

For the results screen, we designed two unique concepts, each illuminating the individual ingredients and inspiring confidence in Gainful’s recommendations.

We A/B tested each concept to determine which resulted in the best conversion rate.

Concept 1: Stepped Flow
First show the products as one complete system, then allow users to select flavors and add-ons.

Concept 2: System Builder
Add each product one step at a time, allowing for customization of flavors on each screen. Then show a complete summary before checkout.

The Hydration product launched in December, 2020. While the bundle concept showed a better take rate for Hydration and Pre-workout products, the stepped concept showed a better overall conversion rate.

Since our work on this project, Gainful has launched a full suite of bespoke nutrition products and expanded to brick-and-mortar with a Target partnership.

Visit the Site →

Created at Everyday Industries under the direction of Allison Sall

Previous
Previous

Greenlight Referrals Redesign

Next
Next

Wagmo Quote Builder