Work/Product Card Redesign

E-commerceInformation HierarchyDesign Systems

Discount Tire Product Card Redesign

A data-driven redesign of Discount Tire's product listing cards — transforming a legacy component into a research-validated system that surfaces what shoppers actually need, improves PLP conversion, and scales across every device and product category.

Role

UX Designer

Research synthesis
Early design direction
Traction Design System integration
Cross-functional collaboration

Team

Cross-functional team

2 designers
1 developer
Dedicated research team
7 product & business stakeholders

Tools

Figma
FigJam
UserTesting
Adobe Experience Manager
Adobe Target
Adobe Analytics

Timeline

15 weeks

W1W3W8W12W15

ResearchDesignRefinementDev Sprint

Designed for

desktop

tablet

mobile

TL;DR — The Outcome

What shipped

Redesigned PLP product cards from legacy layout to research-validated data hierarchy
Card system scaled from tires to wheels, wipers, and accessories
Absorbed into the Traction Design System as a core component

My role

Assisted in user research — ran testing sessions and synthesized findings alongside the research team
Drove early design direction, setting structural constraints before handing off visual refinement to my teammate
Owned Traction Design System integration — broke down the design into a fully standardized, production-ready component set built from scratch

Timeline

Weeks 1–3: Research & synthesis
Weeks 4–8: Iterative design & stakeholder validation
Weeks 9+: Refinement, Traction Design System integration & dev handoff — extended to account for the complexity of a core purchase journey component

20Research participantsAcross 4 shopper archetypes

64%Mobile shoppersPrimary design constraint

26+Card states shippedValidated via component audit

4Product categoriesTires, wheels, wipers & more

01 — The Problem

The card showed everything except what mattered

The product listing cards weren't organized for shoppers — they were organized for the database. SKUs, specs, badges, and inventory flags all competed for the same visual space as prices, reviews, and CTAs. Nothing was prioritized, so nothing stood out.

The Hierarchy Problem

Every element wanted the top — and nothing knew where it belonged

PRICE $115.00

★ 4.5 (892)

ADD TO CART

BEST

Save $70 rebate

7+ in stock

Featured

Treadwell score

Reviews

OE Tire

205/65 R16 95H

Item #100808

SL BSW

65k mi warranty

Compare

Stopping dist. 169 FT

Call store

A hidden differentiator

Treadwell — Discount Tire's proprietary recommendation score — was barely visible, despite being a real edge. It scored tires on Stopping & Traction, Tire Life & Cost, and Ride Quality, so shoppers could compare on more than price.

64%

of traffic came from mobile. A card built for desktop became nearly unusable on a phone — shoppers couldn't scan, couldn't compare, couldn't commit.

Existing Discount Tire product listing card — dense layout with competing visual elements

The existing product card — every element competed for attention with equal visual weight

02 — The Goals

What the card had to earn

Restructure the hierarchy

Prioritize what shoppers actually use to decide — price, Treadwell, reviews, availability — over what the database has always surfaced.

Elevate Treadwell

Turn a barely-visible score into a trusted, glanceable differentiator that earns the space it takes on the card.

Design mobile-first

Keep the card scannable and committable on a phone — where 64% of traffic lives and most purchase decisions get made.

Scale across categories

One card system that flexes for tires, wheels, wipers, and accessories without rebuilding for each product type.

03 — Research

Before a single pixel

20 participants. 4 distinct archetypes. Each one approaches a tire purchase differently — and each one needs different information at different moments. The card had to serve all of them.

What we set out to learn

01
How shoppers actually evaluate a tire
The mental models, decision paths, and moments of doubt — not the spec sheets the database wanted to show.
02
How competitors used data to build trust — and where they fell short
No competitor came close to Discount Tire's depth of performance data — Treadwell rated tires across more dimensions than any equivalent we benchmarked. The signal existed; the hierarchy didn't.
03
Whether Treadwell, surfaced correctly, could carry the card
Could DT's proprietary recommendation score become the visual anchor shoppers trusted — instead of a footnote next to price?

Discovery

Qualitative User Interviews

20 participants across four mental models. We mapped how each type approaches a tire purchase — what they look for, what trips them up, and what builds confidence.

Mental modelsPain pointsFour archetypes

Validation

Task-Based Usability Testing

Redesigned cards tested against specific tasks. We measured time-on-task for purchase completion and participants’ ability to locate key information from the PLP card.

Time-on-taskPurchase flowInfo retrieval

20Research participantsqualitative interviews

64%Mobile trafficshaped responsive priority

4Shopper archetypesdistinct mental models

6Competitors auditedbenchmarked PLP cards

Competitive Audit

Everyone shows the card. Nobody owns it

No competitor treats a proprietary recommendation score as the visual anchor of the product card. SimpleTire's SimpleScore and Continental's EU Tyre Label come closest — but both are secondary badges, not the first thing a shopper sees. Treadwell had the research credibility and brand trust to own that position. The card just needed to let it.

TireRack

The data authority

01Dense vertical list surfaces more specs than any competitor — but raises the bar for casual shoppers who don't know what to scan for
02Real test-track results and large-scale consumer surveys are a genuine trust signal — but live on dedicated sub-pages, never surfaced at the card level
03Best-in-class for total-cost transparency — install pricing confirmed before checkout, surfacing in the installer-selection step rather than on the listing card itself

Synthesizing the Data

What the research revealed

Shopper Archetypes

Four types of tire shoppers

20 participants, 4 distinct mental models. Each archetype shaped a different set of design decisions.

The Deal Hunter

— Alex

Values a good dealPatient — waits for promotions3/20 participants · scans savings & badges

“I want to make sure I'm getting the best deal before I commit.”

Who They Are

Alex just landed her first job after college as a software developer. She drives a 2012 Toyota Corolla — a used car. When tire season comes, she has the patience to wait for the best deals, proceeds all the way through checkout just to see the final price, and shops during big discount holidays.

Pain Points

Confusing or labored directions when applying promotions in the cart
Lack of price transparency throughout the flow
Jumping through hoops to stack discounts

What They Need

Reassurance touchpointsperiodic check-ins on value
Simple & straightforwardenough to feel in control, no more
Trust-building through availability and transparency
Focus on basicsno upsells, just what keeps her safely on the road

Scan Patterns

Four archetypes, four paths through the same card.

Select an archetype — or watch the scan patterns rotate.

Key Findings

What shoppers actually prioritize

The research revealed a clear gap between what the existing cards emphasized and what shoppers actually use to make purchase decisions.

Valued Treadwell Recommendations

15/20

Shoppers responded strongly to Discount Tire's proprietary recommendation score — yet it was barely visible in the existing card design.

Prioritized Price & Savings

13/20

Price transparency and savings visibility ranked higher than brand loyalty or technical specifications in purchase decisions.

Relied on Customer Reviews

8/20

Reviews mattered, but less than expected — users trusted the Treadwell system more than peer reviews for tire selection.

Discount Tire product card — Michelin Defender 2

04 — Stakeholder Alignment

Feedback That Shaped the Direction

Cross-functional feedback sessions with product, research, UX architecture, and engineering surfaced the constraints — and the calls that would define the card system.

01Product

Mobile-first

64% of shoppers are on mobile — responsive layout isn't optional, it's the primary experience.

Shipped

02Research

Treadwell Callout

15 of 20 participants valued Treadwell recommendation data. We made it the card's structural backbone, not a buried badge.

Elevated

03Research

Price Hierarchy

13 of 20 prioritized price over load index and speed rating — so price and savings lead, and technical specs sit secondary.

Shipped

04UX Arch

Card Proportions

Concerns about card length across different use cases. Some scenarios produce significantly taller cards.

Refined

05UX Arch

Category Scaling

One card system had to flex across tires, wheels, wipers, and accessories — same interaction pattern, different data.

Shipped

06Research

Tire Imagery

Not all tire imagery is uniform. A quality audit was needed for half-tire product images.

Audited

07Engineering

Audit Matrix

26+ card states mapped before the first line of code — staggered tires, signed-in pricing, backorder, Treadwell, vehicle-entered.

Shipped

08Product

Grid View

Positive reception — helps shoppers compare. But responsive behavior needed careful attention.

Refined

09Engineering

Compare Feature

The compare tool needs further exploration — shoppers want it, but the interaction model is unresolved.

Deferred

Shipped as-is Refined through iteration Deferred

Several iterations later

The card found its shape. Now it needed a home

After rounds of testing and refinement, the new PLP card was ready — but shipping it meant more than handing off a screen. It meant breaking it down into components, defining every state and token, and building it into Traction so every team could inherit the hierarchy without reinventing it.

05 — Design Evolution

From research mockup to production system

The card didn't arrive at its final form in one leap. It moved through four distinct phases — each informed by the one before it, each bringing the design closer to a system that could handle every real-world scenario.

$115

CTA

Sketch

Research Phase

Early concept cards

Initial mockups exploring Treadwell vs Non-Treadwell layouts, Best Seller badges, and review integration.

$115$145

ADD TO CART

Lo-fi

Iteration Phase

Variant exploration

Iterated across 26+ card states — staggered tires, signed-in pricing, canonical vs vehicle-entered views, grid layouts. Variants validated via A/B tests in AEM + Adobe Target.

TREADWELL

$115$145

in stock

ADD TO CART

Hi-fi

Validation Phase

Component audit matrix

Built a master matrix validating every possible card scenario before dev handoff — catching edge cases on paper, not in production.

TREADWELL

$115$145

in stock

ADD TO CART

TDS

System Phase

Traction Design System spec

Finalized as a Traction Design System component — documented, scalable, and ready for cross-category adoption.

Early research-phase card with Treadwell Recommended badge and report section

An early iteration of the product card during the research phase

The Component Audit Matrix

Rather than handing off a handful of “ideal” mockups, we built a comprehensive matrix of every possible card state. This single artifact validated that the design could handle every real-world combination — staggered tires, signed-in pricing, backorder with savings badge, canonical vs vehicle-entered — before the first line of production code was written.

Treadwell RankedNon-TreadwellBest Seller BadgeSavings BadgeSigned-In PricingSigned-OutStaggered TiresCanonical ViewVehicle-EnteredGrid ViewBackorderDiscontinuedSpecial OrderIn-Stock NearbyStrikethrough Price

Component audit matrix showing all 26+ PLP card variant states validated before development

The component audit matrix — every card scenario validated on paper before production

The Result

The redesigned cards

Clear hierarchyTreadwell, front and centerEvery state accounted forOne system for every category

Component System

One card. Every category.

Same spine. Flexible sections. The card flexes across tires, wheels, wipers, TPMS sensors, and chains without forking the component.

06 — Into the Design System

Integrating new product cards into Traction

The redesigned cards didn't ship as one-off screens — they became reusable components inside Traction, Discount Tire's design system. That meant defining states, tokens, and rules that every team could inherit, so the new hierarchy held up across every surface the card appeared on.

PLP card helper components broken down by subsection: availability states, pricing variants, Treadwell ratings, quality tier badges, finish swatches, and compare checkbox

Helper components — each card section defined as its own sub-component with all states enumerated

Designed around existing data

The states matched how the data was already structured in the codebase

Each availability state in the design maps to a value that already existed in the dev codebase — no new data models, no restructuring of how availability was organized. The designs worked with the data as-is, keeping scope focused on the UI layer.

existing codebase value → design state

IN_STOCK_MY_STORE→In stock at My Store

IN_STOCK_NEARBY→In stock at nearby store

BACKORDER→Product on backorder

DISCONTINUED→Product discontinued

SPECIAL_ORDER→Special order

AVAILABLE_BY_DATE→Available by date

No scope creep

By designing around existing data structures, there was no ask to reorganize how availability was stored or served. Engineering effort stayed scoped to the UI.

Only visual work remained

Each named state already had a corresponding value in the codebase. Wiring up the component meant choosing the right icon, color, and copy — not rewriting data logic.

Exhaustive by design

Every value the codebase could produce had a corresponding design state. Edge cases were resolved in Figma before a single line of integration code was written.

Final Traction Design System PLP Card component specification showing all variants across tires, wheels, wipers, and accessories

The final Traction Design System component spec — one card system, every category, every state

“

“Meet customers where they are and find the tires they want through a unified digital experience. Customers should feel confident and supported along the way, knowing that if anything goes wrong, DT will be there to make it right, down to the last mile.”

— Project Vision — Discount Tire Research Team

07 — Contribution & Impact

What I did — and what shipped

I shaped this project across nearly every phase — research, early design direction, and design system integration — with iterative visual design handled by my teammate. The result shipped to discounttire.com and is live today.

01Research

User testing & synthesis

Assisted with user testing sessions across 20 participants. Synthesized findings into an information hierarchy that became the structural foundation of the redesign.

02Design Direction

Conceptual framework & early iterations

Drove early design direction — setting the structural constraints and card architecture. Handed off iterative visual refinement to my teammate once the direction was established.

03DS Integration

Full rebuild inside Traction

Owned the Traction Design System integration end-to-end. Rebuilt the complete card set from scratch, covering 26+ states, all product categories, and both user flows — further refining coverage beyond what the visual iterations had scoped.

04Audit Matrix

Component audit before development

Authored the component audit matrix that mapped every possible card state — staggered fitments, signed-in pricing, backorder, non-Treadwell — before a single line of production code was written.

Live Now

Shipped to discounttire.com

These cards serve millions of shoppers today, live in production across every product category.

TiresWheelsWipersAccessories

Outcomes

What moved

+27%PLP → checkout conversionMeasured via Adobe Analytics

+18%Mobile add-to-cart rateMeasured via Adobe Analytics

+10%Treadwell trust signalPositive trend in score engagement

What worked

Mobile readability — price and Treadwell first, specs secondary
Hierarchy matched how shoppers actually scan
Cards continued to evolve post-launch via shopper feedback

Still open

Card length on mobile — a deliberate trade-off, acknowledged from day one
DT surfaces more product data than any tire retailer; compressing without losing utility is hard
A mobile-specific card layout is the likely next step

08 — Reflection

What I took away

The card wasn't the win. The system around it was.

Research turns opinion into evidence

Working alongside a dedicated research team changed the dynamic of every review. Arguments stopped being “I think users want X” and started being “the Pragmatist needs price and availability immediately.” Pointing to a real person with real behavior carried more weight than any stakeholder preference — and moved decisions faster.

Documentation is design work

Mapping 26+ card states in the component audit matrix felt like overkill — until it caught the edge cases that would have shipped as bugs: staggered pricing, backorder + savings-badge overlap, signed-in vs. signed-out variants. The developer called it the cleanest handoff he'd ever worked with. That matrix, not the final mockup, was the decision I'm most proud of.

A card is a system, not a screen

The moment the same card scaled from tires to wheels to wipers without structural changes, every architectural decision was validated. We hadn't designed a tire card — we'd designed a product-card system. That distinction is what earned it a permanent seat inside Traction.

Next case study

Discount Tire Product Card Redesign

TL;DR — The Outcome

01 — The Problem

The card showed everything except what mattered

Every element wanted the top — and nothing knew where it belonged

A hidden differentiator

02 — The Goals

What the card had to earn

Restructure the hierarchy

Elevate Treadwell

Design mobile-first

Scale across categories

03 — Research

Before a single pixel

Everyone shows the card. Nobody owns it

What the research revealed

Four types of tire shoppers

The Deal Hunter

Four archetypes, four paths through the same card.

What shoppers actually prioritize

Valued Treadwell Recommendations

Prioritized Price & Savings

Relied on Customer Reviews

Feedback That Shaped the Direction

Mobile-first

Treadwell Callout

Price Hierarchy

Card Proportions

Category Scaling

Tire Imagery

Audit Matrix

Grid View

Compare Feature

The card found its shape. Now it needed a home

05 — Design Evolution

From research mockup to production system

Early concept cards

Variant exploration

Component audit matrix

Traction Design System spec

The Component Audit Matrix

The redesigned cards

One card. Every category.

06 — Into the Design System

Integrating new product cards into Traction

The states matched how the data was already structured in the codebase

What I did — and what shipped

User testing & synthesis

Conceptual framework & early iterations

Full rebuild inside Traction

Component audit before development

What moved

What I took away

Research turns opinion into evidence

Documentation is design work

A card is a system, not a screen

Amazon Account Dashboard

01 — The Problem

The card showed everything except what mattered

Every element wanted the top — and nothing knew where it belonged

A hidden differentiator

02 — The Goals

What the card had to earn

Restructure the hierarchy

Elevate Treadwell

Design mobile-first

Scale across categories

03 — Research

Before a single pixel

Everyone shows the card. Nobody owns it

What the research revealed

Four types of tire shoppers

The Deal Hunter

Four archetypes, four paths through the same card.

What shoppers actually prioritize

Valued Treadwell Recommendations

Prioritized Price & Savings

Relied on Customer Reviews

Feedback That Shaped the Direction

Mobile-first