Golf clubs are one of the client's major drivers (haha, get it?) in e-commerce sales. However, there are two pathways to consider for how a user would add a golf club to their cart: golf clubs that are considered "Stock" (meaning the client typically carries these clubs and they are ready-to-ship) and golf clubs that are considered "Custom" (meaning they are shipped directly from the manufacturer and made-to-order).
The goal
95% of the client's golf club sales are "Stock" clubs and only 5% are "Custom" so the main goals here were to clearly communicate the difference between the two pathways but maintain "Stock" clubs as the priority and design a system that would scale to a variety of golf club types and increased personalization options.
The Solution
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.
1. Default interface for building a "Stock" club
2. Interstitial after clicking "Customize Club" call-to-action
3. Interface for building a "Custom" club
Some of the pain points of this experience include:
Lack of transparency about the difference between the two experiences and interfaces
Lack of visibility into the increased customization options available
Lack of education about "Stock" vs "Custom" clubs and how each affects fulfillment and delivery timing
Lack of education about the customizable aspects of a golf club (loft, shaft, flex, grip, etc.)
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:
50% of users called out a lack of clarity into the difference between the "Stock" and "Customize" categories
100% of users did not take notice of the fulfillment messaging and mentioned wishing it was more prominent
83% of users noted wanting more autonomy over the order they completed each step in
33% of users mentioned that additional education surrounding each step would be helpful for beginner golfers
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.
A new tabbed header for "Stock" vs "Custom" flows with a following fulfillment module that contained clear and descriptive messaging about each respective experience increased transparency about the difference between them. (100% of users were able to discern the difference between "Stock" and "Custom")
An all-at-once treatment for the steps, rather than step-by-step, allowed users to make selections according to their own will and unique priorities.
Introduced educational sub-pages to inform users about each step of building a club, as well as provide additional information like how to access additional customization options and an entry point for booking a golf club fitting appointment.
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.
