Pit Viper Product Variant Restructure

Lead UI Designer @ Accenture Song (Agency) — 2023

business goals
visual design
collaboration
end-to-end

Pit Viper has been a longtime retainer client at The Stable, utilizing our design, strategy & dev expertise to iteratively optimize & grow their ecom experience. As their brand and business continues to grow, so has Pit Viper’s approach to their product assortment.

New eyewear styles will be added seasonally while Pit Viper “classics” would be getting new lens tech options. Collaborating closely with their team, we designed a backend product structure that better utilized Shopify variants & a frontend that would allow customers to easily compare and shop the new offerings. All with that Windows 95 elegance.

Introducing “Lens” as a product variant

This phase was a lot of back & forth between design, the client & our development team

Wireframes by my teammate, Mark

UX Wireframes helped to determine requirements, unique product criteria & merchandising headaches

The backend restructure gave us an opportunity to refresh the interface of the Product Detail Page (PDP) and Product Listing Page (PLP). The CEO wanted to see something “clean” while the Creative Director had very little flexibility towards the site’s Windows 95 aesthetic.

To strike the right balance, we created hierarchy through non-white white space while adding texture with tactile hover & selected states (drop shadows a must). Windows 95 stayed prevalent throughout the details, while allowing modern ecom to lead layout and content.

Retro desktops inspired the PLP header

We prioritized lens type information both in the base & hover state to make it clear there were more lens options

On desktop, we utilized the hover state for progressive disclosure — uncovering lens type thumbnails & quick add

The PLP product cards presented a unique challenge with the added complexity of lens variants. We needed space to communicate the technical benefits of the lens (polarized, Z87+, etc) and expose these options to the customer so they could find the right lens type or color.

Utilizing progressive disclosure on desktop & a unique mobile-specific layout, we were able to display the required information without overwhelming the PLP experience. We leveraged the thumbnail UI and type hierarchy from the PDP to create consistency between the pages.

Mobile exposes variant details

We created a framework that could scale & flex along with Pit Viper’s product assortment, and a UI that amplified their brand voice while creating hierarchy throughout the shopping flow.

We’re excited to see how these large scale updates affect Pit Viper’s KPI as we continue to optimize the experience.’Till then, please enjoy the moment where you get abducted by aliens as you add to bag.

In collaboration with Mark Oxier (UX)