About
About
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

Next case study

Amazon Account Dashboard

Vamsi Karuturi

Senior UX Designer

© 2026 Vamsi Karuturi. Crafted with intention.

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

01

Restructure the hierarchy

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

02

Elevate Treadwell

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

03

Design mobile-first

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

04

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

  1. 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.

  2. 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.

  3. 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 product listing page

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.

01

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.

IMAGEBRAND · NAMETREADWELLPRICE · SAVINGSREVIEWSAVAILABILITYADD TO CART

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.

1

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.

2

Prioritized Price & Savings

13/20

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

3

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.

01
$115
CTA
Sketch
Research Phase

Early concept cards

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

02
$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.

03
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.

04
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.

Tire
Tire

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.

01

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.

02

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.

03

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.