Research with 20 shoppers shaped a clearer product card. I helped turn those findings into the design direction, then built the cards into Traction for reuse across product categories.
Research synthesis · Design direction · System integration
From a listing to a decision.
15/20valued Treadwell recommendations
26+ states One shared component.
PLP / 01
Project at a glanceDiscount Tire / Product card redesign
My role
UX designerResearch synthesis, early design direction and Traction integration
Core team
2 designers · 1 developerA dedicated research team and 7 product & business stakeholders
Scope
Desktop, tablet & mobileTires, wheels, wipers and accessories
The legacy card made price, reviews and the purchase action compete with SKUs, specifications and badges. We needed a clearer hierarchy so shoppers could compare products with confidence.
64%
of traffic was mobile.
Mobile readability set the priorities. The hierarchy had to work on every device.
An existing advantage
Bring Treadwell into the decision.
Treadwell evaluates Stopping & Traction, Tire Life & Cost, and Ride Quality. Bringing that expertise forward would help shoppers weigh recommendations alongside price and reviews.
01Prioritize decision-making information02Elevate the recommendation03Design for mobile scanning04Scale across product categories
A clearer hierarchy, backed by research.
Weeks 1–3
Understand
Research & synthesis
Weeks 4–8
Shape & validate
Design & stakeholder reviews
Weeks 9+
Standardize & ship
Refinement, Traction & handoff
Planned for 15 weeks: refinement continued through weeks 9–12; Traction integration and handoff began in week 13. Further refinement extended the schedule.
02 / The evidence
Start with how shoppers choose.
The research team studied 20 shoppers across four archetypes. I supported testing and synthesis. Interviews revealed how people chose tires; usability tasks tested whether they could find information and complete a purchase.
Discovery
Understand the decision.
Interviews identified pain points, trust signals and buying priorities.
Validation
Test the purchase journey.
Tasks tested purchase completion, information retrieval and time-on-task.
15/2001
Valued Treadwell recommendations
Give recommendation data a clear, recognizable place.
Finding and design implication
Treadwell evaluates Stopping & Traction, Tire Life & Cost, and Ride Quality. Participants valued a performance-based recommendation they could use alongside price.
13/2002
Prioritized price and savings
Make cost and savings easy to find.
Finding and design implication
Price transparency mattered more than load index and speed rating. Technical detail remained available, with a secondary visual role.
8/2003
Relied on customer reviews
Retain reviews as supporting evidence.
Finding and design implication
Reviews still mattered. In this study, more participants valued Treadwell than peer reviews, so the hierarchy gave both signals appropriate weight.
One card had to support four different ways of choosing tires. Explore how each shopper’s priorities shaped the hierarchy.
Four ways to approach the same purchase20 participants
Alex
The Deal Hunter
“I want to make sure I'm getting the best deal before I commit.”
Alex waits for promotions and checks the final price before committing.
Values a good dealPatient — waits for promotions
Friction
Unclear totals and complicated discount rules.
Design response
Transparent pricing, simple promotions and reassurance about value.
Lisa
The Researcher
“I want to make sure I've done my homework before I walk in.”
Lisa compares reviews, recommendations and reports before visiting the store.
Values information & transparencyComfortable with technology
Friction
Too little information to decide—or too much to navigate at the start.
Design response
Clear prices, trusted reviews and self-guided detail without pressure.
James
The Pragmatist
“I just need to know it's safe and get back to my day.”
James wants safe, reliable tires with minimal research and disruption.
Values convenienceValues guidance & flexibility
Friction
Time-consuming tasks and too many choices.
Design response
Simple options, expert guidance and a dependable purchase path.
Experienced tire shopper
The Expert
“I already know what I want — I just need the numbers to back it up.”
An experienced shopper arrives with a tire in mind and wants data to confirm the choice.
Watches and learns from automotive prosStrong brand & spec opinions
Friction
Missing specifications and buried Treadwell scores.
Design response
Scannable technical detail, visible scores and credible tire expertise.
Lisa
The Researcher
“I want to make sure I've done my homework before I walk in.”
Lisa compares reviews, recommendations and reports before visiting the store.
Values information & transparencyComfortable with technology
Friction
Too little information to decide—or too much to navigate at the start.
Design response
Clear prices, trusted reviews and self-guided detail without pressure.
Information priorities
Product identity
Customer reviews
Recommendation
010203040506
Scans Every Spec. Research-informed highlights, not a recorded sequence.
Full research profile / Researcher
Lisa is a single mother and senior sales manager. She drives a 2020 Lexus RX350 and takes tire research seriously — reading user reviews, manufacturer recommendations, consumer reports, and asking friends. She arrives at the store prepared and confident, determined not to feel taken advantage of.
Pain points
Not having enough information to make a confident purchase decision
Too much detailed information when first starting her research
Needs
Self-guided solutions they can trust independently
Price-forward and simple communications
Present but not pushy — there when needed, nothing more
Community-driven information and peer reviews
Competitive context
Use our depth of data to build confidence.
Six competitor references showed how trust, fitment and price influenced the card. SimpleScore and the EU Tyre Label offered useful parallels; Treadwell gave us richer recommendation data to surface.
Six references. One opportunity.Project-time audit
Original project artifact
Competitive audit / TireRack
Competitive audit / Goodyear
Competitive audit / SimpleTire
Competitive audit / Continental
Competitive audit / AutoZone
Competitive audit / Target
Competitive audit / TireRack
Competitive audit / TireRack, 1 of 6
03 / The design
Let the decision lead the card.
I set the early structure; my teammate carried the visual refinement forward. Recommendation, price and availability led the card, with technical detail still within reach.
A hierarchy with a purposeSelect a region to inspect
15/20 valued Treadwell
Recommendation
Give shoppers a clear starting point for comparison.
4 shopper mental models
Product identity
Keep brand, name and fitment clear; make specifications easy to scan.
13/20 prioritized price
Price & savings
Show cost and savings clearly before checkout.
8/20 relied on reviews
Customer reviews
Pair familiar reviews with performance-based recommendations.
Existing inventory states
Availability
Show whether, where and when the product is available.
64% mobile traffic
Purchase action
Make the next purchase step clear.
15/20 valued Treadwell
Recommendation
Give shoppers a clear starting point for comparison.
Original production card330 × 774 px · Lato
01 / Recommendation
Aligning the teams
The design had to work beyond the ideal card.
Reviews with product, research, UX architecture and engineering refined the layout, imagery and responsive comparison. They also exposed the states we needed to document before handoff.
Decision / partnerWhat changedOutcome
01Mobile-firstProduct
64% of shoppers are on mobile — responsive layout isn't optional, it's the primary experience.
Shipped
02Treadwell CalloutResearch
15 of 20 participants valued Treadwell recommendation data. We made it the card's structural backbone, not a buried badge.
Elevated
03Price HierarchyResearch
13 of 20 prioritized price over load index and speed rating — so price and savings lead, and technical specs sit secondary.
Shipped
04Card ProportionsUX Arch
Concerns about card length across different use cases. Some scenarios produce significantly taller cards.
Refined
05Category ScalingUX Arch
One card system had to flex across tires, wheels, wipers, and accessories — same interaction pattern, different data.
Shipped
06Tire ImageryResearch
Not all tire imagery is uniform. A quality audit was needed for half-tire product images.
Audited
07Audit MatrixEngineering
26+ card states mapped before the first line of code — staggered tires, signed-in pricing, backorder, Treadwell, vehicle-entered.
The compare tool needs further exploration — shoppers want it, but the interaction model is unresolved.
Deferred
From concept to production
Each iteration resolved a different question.
Follow the decisions from research concepts to validated variants, the state audit and the final Traction specification.
Original project artifact
Research concept / Treadwell card
Production card / Tire
Component audit matrix
Traction / Final product card specification
Research concept / Treadwell card
Stage 011 of 4
04 / The system
One structure. Every product.
I rebuilt the component set in Traction: 26+ states, both recommendation flows and eight production variants. A shared structure supported tires, wheels, wipers and accessories.
One architecture. Eight production examples.Original exports
Tire
Recommendation, price and performance data support the purchase decision.
Staggered tires
Front and rear fitments share a card, with distinct sizes and pricing.
Wheel
Wheel specifications and finish choices fit within the shared structure.
Staggered wheels
Paired fitments extend the wheel variant without creating a separate architecture.
Tire + wheel
A package brings product and availability information together.
Wiper
Fitment and product details adapt the same structure for wipers.
TPMS
A simpler accessory still uses the same purchase pattern.
Chain
Seasonal accessories inherit the same recognizable card structure.
Tire
Recommendation, price and performance data support the purchase decision.
Original production card · Tire Zoom in to inspect the original detail.
Shared structure
01Product identity
02Relevant specifications
03Price & savings
04Availability
05Purchase action
Recommendation and performance sections adapt to the product and user flow.
My key handoff decision
Make the combinations visible before development.
My audit matrix made combinations explicit—from staggered pricing to backorder with savings. It caught gaps early and gave engineering a clear implementation reference.
Sampled audit states. Open the original matrix for all 26+ states.
Designed around existing data
A visual system engineering could implement.
Availability helpers mapped to existing codebase enums, covering 15+ states without changing the data model. Try a combination to see how the card responds.
From conditions to card statesInteractive example
Build a card state.
Change a condition to see the card respond.
Card preview · Lato
010203040506
Changed areas are outlined. Helper changes are illustrative; purchase actions are reference only.
Card preview: Treadwell ranked recommendation, In stock at My Store, $80 savings.
Try six availability states across two recommendation flows. The original audit covers 26+ card states.
Original enum-to-helper mappings
IN_STOCK_MY_STOREIn stock at My Store
IN_STOCK_NEARBYIn stock at nearby store
BACKORDERProduct on backorder
DISCONTINUEDProduct discontinued
SPECIAL_ORDERSpecial order
AVAILABLE_BY_DATEAvailable by date
Additional availability messages in the original handoff
Order now, get in 1–5 days
Package availability
Available as soon as 2 days
Call store for availability
Multiple stores available
The integration covered 15+ availability states. These messages are documented in the original handoff; this demo does not simulate live inventory.
A component built for reuse
The same decisions, carried into Traction.
Reusable helpers handled availability, pricing, Treadwell ratings, quality badges, finish swatches and comparison. Filters, sorting and layout helpers completed the listing system.
I worked with the developer through implementation and edge cases. Traction connected the shared Figma components to Storybook for engineering review.
“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.”
Discount Tire Research Team
05 / The impact
Clearer choices. Stronger results.
The cards shipped across tires, wheels, wipers and accessories on discounttire.com. Reported results showed stronger conversion, mobile purchasing and engagement with Treadwell.
+27%
Listing-to-checkout conversion
Reported in Adobe Analytics
+18%
Mobile add-to-cart rate
Reported in Adobe Analytics
+10%
Treadwell score engagement
Reported positive engagement trend
Measurement context
Conversion and mobile add-to-cart results come from Adobe Analytics; variants were validated through AEM and Adobe Target. The +10% figure describes score engagement, not measured trust. Dates, experiment sample sizes and relative versus absolute lifts were not specified. The 20 shoppers were the qualitative research sample.
What worked
Research gave every review a shared reference.
Research kept reviews grounded in shopper needs. The hierarchy made price and recommendations easier to scan, while the architecture supported new categories and improvements after launch.
The developer called the matrix his cleanest handoff. Clear documentation was part of the design, not an afterthought.
What I would refine next
Keep improving the mobile tradeoff.
The card’s mobile length remained a tradeoff. A dedicated mobile layout and further exploration of comparison were the next opportunities.
The shared system gave the team a consistent foundation for those next steps.
