With the product detail page (PDP) as the entry point, a full-page overlay modal experience for mobile/tablet breakpoints and side panel overlay experience for desktop breakpoints allows users to isolate the club builder experience without navigating away from the PDP. A tabbed approached ("Stock" as tab #1 and "Customize" as tab #2) gives users the ability to navigate between the two different club building pathways while maintaining "Stock" at the forefront. A dedicated fulfillment module that sticks to the header when the user scrolls allows for clear messaging about the current pathway, the type of club being built, and/or the estimated timing for delivery.
On the current e-commerce site, the PDP's interface for building a golf club defaults to include only the options available for building a "Stock" club. In order to access more customization options (i.e. additional loft, shaft, and/or grip options) the user must click the "Customize Club" call-to-action button, which would convert the experience into that of building a "Custom" club.
Some of the pain points of this experience include:
Early iterations of the redesign followed a step-by-step UI treatment that combined the Stock and Customize options so users were exposed to all options available to them, with fulfillment messaging below the CTA that would inherit a callout treatment upon a change of the estimation.
However, after user testing this framework, we found the following:
After evolving the designs closer to what became the final product, we solved for these encountered pain points and conducted another round of user testing.
This project addresses the challenge of optimizing golf club sales in an e-commerce setting, with a focus on prioritizing "Stock" clubs while accommodating customization options. The solution involves implementing a clear and user-friendly interface that communicates the distinction between "Stock" and "Custom" pathways. By utilizing a full-page overlay modal experience for mobile and tablet devices, and a side panel overlay experience for desktop users, customers can easily access the club builder without leaving the product detail page. The use of tabs allows users to navigate between the two pathways while keeping "Stock" clubs at the forefront. Additionally, a dedicated fulfillment module in the header provides clear messaging about the current pathway, the club being built, and estimated delivery timing. The previous pain points of lack of transparency, visibility into customization options, education about "Stock" vs. "Custom" clubs, and understanding customizable aspects of a golf club have been addressed in the proposed solution. Overall, the implemented design system aims to enhance the user experience, increase sales of "Stock" clubs, and accommodate a variety of golf club types and personalization options.