ByHeart Purchase Module

Dynamic purchase module allowed content-to-cart checkout, lifting purchase completion by preventing users from navigating away from the educational page.
Platforms
Web
Launched
October 9, 2024
Roles
UI/UX Designer

overview

Problem & Opportunity

The client, ByHeart, utilized extensive, long-form educational landing pages to engage their target audience. A critical friction point, however, was identified between these high-intent, educational pages and the final Product Detail Page (PDP). Users who valued this detailed content often experienced conversion drop-off when moving to a separate PDP to complete the transaction. The core business challenge was to significantly improve the conversion rate (CR) of these long-form landing pages without the ability to modify the client's existing, in-house PDP.

Project Goal

To design and implement a persistent, high-converting purchase module that could be seamlessly integrated in-line with existing long-form content. The primary Key Performance Indicator (KPI) was to reduce funnel friction and directly increase the conversion rate of the landing pages by allowing users to complete the crucial “Add to Cart” action without ever leaving the page.

Target Audience

The module was specifically designed for users who are highly engaged with educational, long-form content and require detailed information before committing to a purchase. These users represent a high-value segment, making a smooth, immediate transition from "learning" to "buying" essential.

Key Design Challenge

The project was constrained by a critical technical limitation: the design team was restricted from making any edits to the client's existing, third-party Product Detail Page (PDP). The solution had to be implemented entirely on the landing page level. This necessitated an innovative technical solution—leveraging dynamic Shopify Magic Links—to ensure the in-line module could successfully populate the user's cart and send them directly to a pre-filled cart experience, bypassing the un-editable PDP as a necessary funnel step.

execution

The execution of the ByHeart purchase module was guided by strategic analysis and a focused approach to direct response design, ensuring the module was effective, minimal, and aligned with the user's journey through long-form content.

Initial Strategy and Research

The initial phase involved determining the optimal placement for the module, focusing on positioning it adjacent to areas of high user engagement (mid-page content blocks) and repeated module appearances after significant educational sections. The project confirmed that the primary friction point was the transition off the educational page, validating the need for an in-line solution to prevent drop-off.

Advanced Prototyping and Handoff

A key part of the execution was the preparation of the design file for engineering. This work went beyond static mocks:

  • Dynamic Prototyping: I created interactive Figma prototypes that demonstrated the module's dynamic functionality, specifically showing how the displayed price would automatically update based on the selected quantity.
  • Component-Based Design: I established a robust component library for the module. This use of organized components facilitated the creation of dynamic fields during the final engineering implementation, significantly reducing the developers' workload and ensuring consistency across all variations of the module.

Module Design and Technical Innovation

The final design prioritized clarity and utility, distilling complex PDP options into a simple, high-converting component.

  1. Key Elements: The module included all necessary conversion elements in a compact space: Product Name and Image, Pricing and Subscription Toggle, a Quantity Selector, and a clear Primary Call-to-Action (CTA).
  2. Technical Innovation (Shopify Magic Links): The core of the execution was the implementation of dynamic Shopify Magic Links. This custom solution ensured that clicking the CTA immediately: adds the selected product and quantity to the user’s cart, and redirects the user directly to the existing, pre-populated cart or checkout page. This single action effectively closed the gap between the landing page's high intent and the final conversion by bypassing the un-editable PDP.

Iteration and Refinement

The module went through an important iterative process based on A/B testing:

  • First Test & Placement Optimization: The module was initially tested against the control page (no in-line module), then moved to a higher-prominence location, confirming that proximity to the hero section yielded an incremental gain in conversion.
  • Interaction Design Update: A subsequent iteration focused on refining micro-interactions by changing the quantity selector from distinct buttons to a single dropdown menu to optimize space and interaction efficiency. Concurrently, the product video was prioritized by being moved to the first slot of the product image carousel, leveraging media to immediately build trust and engagement.

outcome

The implementation and iteration of the In-Line Purchase Module successfully addressed the conversion drop-off problem, delivering significant, measurable gains across the landing pages.

TABLE GOES HERE

Key Quantifiable Achievements:

  • Conversion Rate Lift: The initial test resulted in a 13.6% increase in Conversion Rate (CR) over the control pages.
  • Optimized Performance: Moving the module to a higher-prominence location yielded a further 9.87% incremental gain in CR.
  • Primary Metric Impact: The design led to a significant 22.7% increase in Cart Complete actions over the control, proving its effectiveness in transitioning high-intent users directly into the checkout funnel.

Key Project Learning: The most significant success was the development of a highly adaptable, dynamic purchase module. This functionality allowed the client to update the module's contents and options through simple editing of a Google Sheet that had a webhook directly linked to the module. This solution provided a long-term, scalable way for the marketing and product teams to conduct rapid testing and manage pricing/product changes without requiring engineering resources for every update.