Legacy Product

Knowing the brand aimed to create two unique Product Detail Pages (PDPs), I initiated the ideation process by researching competitors and leveraging best practices from Baymard Institute, particularly focusing on 'discontinued PDPs' as my searches for 'legacy' and 'product line' were unproductive. Additionally I always keep in mind Nielsen Norman Group's 10 Usablity Heuristics while creating new experiences and utilizing Dribbble for out of the box inspiration.

Regarding legacy products, I discovered that while the shoe industry lacked substantial examples, the biking industry offered valuable insights. Companies frequently introduce new bike models and effectively redirect users to these models once older versions are discontinued. This experience underscored the importance of seeking inspiration beyond direct competitors and exploring other industries to spark innovative ideas.

For new product availability alongside older products, Brooks Running provided a noteworthy example. Although it wasn't a unique PDP, their approach involved integrating new product information within an existing template. This led me to further investigate cross-promoting products through Baymard.

After gathering competitive insights, inspiration, and best practices, I still had questions about the necessary content for these spaces without overwhelming users (guided by Nielsen Norman Group's heuristics), the optimal placement of items, and if wording of certain elements like the product badge on the legacy pdp makes a difference.

After conducting user tests, I reworked several elements on the page based on key takeaways for a 'legacy product':

1. Discontinued Badge: We tested 'archived' and 'legacy' labels on the single product image but found users believed these products might return. Therefore, even though this page is a 'legacy' experience, it was crucial to display a 'discontinued' badge to clearly indicate the product will not be coming back.
2. Larger Product Image: To balance space and content, the product image for the 'New model' was increased by about 20%.
3. Supporting Content: Users who land on this page are already interested (typically via direct Google searches for the product name, common in both the shoe and biking industries). Product ratings were not important to them, but available colors were. To avoid clutter, we opted to show a color count instead of swatches, confirming with engineering that this was feasible.

Other important elements of this legacy page include:

• Stripping the page of all additional content except the main product image.
• Messaging in place of the product name (while still including the product name for SEO and clarity) to inform users the product is no longer available, providing additional context and supporting inclusive design.

Within this experience, the layout of the 'new model' tile is new but utilizes atoms readily available within the design system. Since this tile only appears within the legacy experience, it's a local component to the PDP file. The organism does not yet live in the larger design system. We follow a general rule: atoms that make up organisms in a single file may live locally. Once the organism is used across project files, we regroup to discuss integrating it into the larger design system.

From user testing, we learned that the content was just right. While there was no preference on placement being above or below the product details, the element was well received, creating trust in the user and providing a nice surprise and delight, which increased PDP views. Ultimately we placed above the product details but below the add to cart for higher visibility.

This element evolved into something unique and highly flexible, significantly reducing story points for development and engineering. Instead of a custom PDP development, it became an optional product attribute. This small but powerful attribute offers more flexibility than the brand's original intention of pointing to a new model while a current 'legacy product' is still available.

Brand teams can create custom callouts/eyebrows, headings, supporting text, and choose which product this attribute points to. It can also be used to:

• Point to an alternative product, such as a waterproof version.
• Highlight a matching product, like bottoms to a top.
• Indicate an alternative product without PFAS (if you know, you know).

To ease the burden on brand teams, the attribute is designed to pull in the first product image by default, with the option to add a custom image.

The flexibility of this attribute not only decreased development effort by avoiding custom PDP creation but also provided more value by addressing several pain points across the collective brands sharing the platform.