Defining and designing enterprise product tiles for high-traffic B2C ecommerce
2–3 minutes
·
Challenge
AT&T’s high-traffic B2C product tiles were underperforming in a subtle but costly way. The existing layout failed to clearly surface available color options for popular devices and did not scale effectively on larger screens. These gaps increased cognitive load during product comparison and contributed to cart abandonment, product exchanges, and unnecessary call center volume.
Because the component appeared across millions of sessions and supported dense merchandising requirements, any redesign needed to improve clarity without increasing footprint, remain accessible, and scale cleanly across breakpoints. The challenge was not visual refresh—it was restoring user confidence at the moment of decision.
Project profile
My role
Lead Visual / Interaction Designer
Duration
~3 mos
Team Composition
I owned this work end-to-end, from system audit through final documentation. I partnered daily with the client’s principal stakeholder and facilitated bi-weekly cross-functional reviews with design systems, accessibility, and engineering teams to validate decisions, mitigate risk, and ensure the component could ship and scale.
Reference
Role and responsibilities
Lead Visual / IxD Designer
I audited the existing product tile ecosystem across breakpoints, states, and merchandising scenarios to establish a complete content and behavior inventory. This surfaced structural failures in hierarchy, variant disclosure, and information density that directly affected user comprehension and purchase confidence.
I translated these findings into future-state functional specifications, layout rules, and content priorities that balancing business requirements with accessibility standards and engineering constraints. The outcome was a flexible, system-ready component that could support scale without introducing inconsistency or ambiguity.
What this work demonstrates
- Systems-level thinking applied to conversion-critical UI at enterprise scale
- The ability to simplify dense, constraint-heavy interfaces without sacrificing clarity or accessibility
- Strong command of typographic hierarchy and logical grouping to support rapid scanning behavior
- Experience translating ambiguous problems into documented, scalable design-system components
- Effective cross-functional leadership across design, engineering, and accessibility partners
Approach
I began by working autonomously to audit the existing product tile patterns and hypothesize future-state solutions. As proposals matured, I progressively partnered with engineering and accessibility to validate feasibility, performance, and compliance.
Given the component’s reach and downstream dependencies, design decisions were intentionally conservative, testable, and reversible. This approach ensured improvements could be adopted confidently within the broader design system without disrupting existing product flows.
Current state audit
I conducted an exhaustive product tile review.
Future-state proposals
The future-state product tiles established a flexible, responsive framework capable of supporting a wide range of products, promotions, and merchandising strategies. Layout rules and content priorities were defined to ensure consistent behavior across screen sizes while allowing for controlled variation where business needs required it. This approach enabled the component to scale confidently as part of the broader design system.
Outcomes
After multiple design iterations, the final product tile patterns were adopted and documented within the DS2 design system as the authoritative source of truth. The updated component improved product comprehension earlier in the purchase journey, enabling faster decision-making and more confident product selection.
As a result, the redesign contributed to stronger conversion performance, reduced inbound product-related support inquiries, and fewer customer complaints tied to color selection and expectation mismatches. Ultimately, my contributions demonstrated the business impact of clear, system-level UX decisions.
