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.
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.
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.
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.
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.
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.
A key part of the execution was the preparation of the design file for engineering. This work went beyond static mocks:
The final design prioritized clarity and utility, distilling complex PDP options into a simple, high-converting component.
The module went through an important iterative process based on A/B testing:
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:
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.