Product Card Redesign

Component Architecture
Content Modeling

The product card was Provi's most-repeated, highest-stakes component, and every version of it had been created separately, with no shared structure to build from. Redesigning it meant fixing not just how it looked, but how it was composed.

Role: Staff Product Designer - Design Systems (FTE)
Project Duration: 2 months
Company: Provi

Highlights

Turned a one-off card into reusable, composable sub-components, enabling product displays to be assembled instead of custom-built
Solved for information parity and more cohesive UX, removing a detour that was causing users friction
Component approach was foundational in building out a white-label storefront experience in just 2 months

Tilted grid of the redesigned Provi product cards showing a variety of wine, beer, and spirits listings, each with vintage or size tags, category info, pricing, stock count, and distributor name.

01 / Diagnosis

Not just a visual fix

Inconsistent product information was costing buyers time & money

The problem presented as a visual refresh of cards, but I saw larger inconsistencies in how product information appeared across the site. Core product information was positioned differently depending on the context, and discounts weren’t reliably accessible. Inconsistency created friction for buyers.

The original product card across six contexts (marketplace list, marketplace grid, discovery carousel, cart, saved for later, and list), each showing a different set of pricing, stock, and distributor details, with the grid and carousel cards linking out to the product detail page for what they leave out.

Users might be building an order from their laptop in an office or from a tablet standing in a stockroom. Different contexts and screen sizes often sacrificed information consistency.

02 / Content audit

Mapping product data

I audited every place product info and related actions appeared for both retailers and distributors, building a map of content across the experience.

Wireframe audit of every place product information appears, with color-coded blocks for image, product line info, distributor info, price info, SKU info, discount badging, and actions. Retailer side: marketplace list, cart, marketplace grid, and product detail sidebar. Distributor side: list, grid, and product detail sidebar.

03 / Component architecture

Composing from content, not containers

Cards became shells for reusable content components

That content mapping led to a set of components that would allow Provi to more flexibly display product information: InfoProductLine, InfoSKU, PriceRange, PriceSKU, and so on. Cards themselves became shells that assembled these pre-defined pieces, meaning that anywhere a lockup of pricing, stock status, or distributor info appeared, it would look the same.

Component documentation spread: a reference list of Product Content Components (InfoProductLine, InfoDetails, InfoDistributor, InfoSKU, PriceRange, PriceSKU, StockStatus, and others) on the left, and an annotated wireframe on the right showing how those components assemble into the card shell, with the final rendered card matching that structure below

04 / Outcome

What a shared foundation unlocked

Information parity, discount visibility, and new ways to show product info

The redesigned card gave retailers and distributors visual and functional parity across list and grid views. Discounts became a more prominent element that was clearly visible per SKU. And with a fresh set of reliable, reusable content components, new displays for product information became unlocked, such as quick access to discounts and price schedules via a drawer pattern.

The redesigned product card in three contexts: an expanded marketplace list row with two bottle options and a discounts link, a cart line item showing a discounted case price with its item menu open, and the same product as an expanded marketplace grid card, all sharing one structure.

05 / Business impact

A new product build in 2 months

The hard part was already solved

Because I had built a robust system of components for product information display, a new white-label storefront product for distributors was built and launched in just under two months.