My Role

I led the UX/UI design for this initiative, responsible for:

• UX audit of the current Accessories PLP

• Design of new product cards using Mondrian 6

• Definition of a dynamic badge architecture driven by catalog/business rules

• Integration of badges with filters and commercial strategies

• Alignment with design system and engineering teams

• Participation in KPI definition and validation post-launch

Discovery & Benchmarking

Together with Product and Analytics, I first built a clear picture of the current state:

• How accessories were performing vs devices

• Which attributes were most important for purchase decisions

• How users visually scanned and interpreted the PLP

Key activities:

• UX audit of the existing Accessories PLP (structure, visual hierarchy, responsiveness)

• Analysis of campaign and category performance data

• Mapping all existing business flags and catalog rules (e.g. new, offer, launch, last units)

• Alignment with design system and front-end teams on feasible patterns

This groundwork allowed us to define:

• Which badges mattered most for both users and commercial teams

• Where badges should live within the card

• How the model would scale across breakpoints and categories

Solution Overview

1. Mondrian 6 Product Cards

We redesigned the Accessories cards using Mondrian 6, Claro’s internal design system:

• Clear visual hierarchy between image, title, price, and actions

• Improved spacing and scannability for dense catalogs

• Strong affordances for campaign states and product status

• Fully responsive behavior across desktop and mobile

• Reuse of core design system components for consistency and maintainability

2. Dynamic Badge System

We introduced a dynamic badge architecture to highlight:

• New

• Launch

• Last units

• Offer

Key characteristics:

• Badges driven entirely by existing catalog and campaign rules

• Real-time updates with no manual intervention

• Centralized logic to ensure consistency across squads and surfaces

• Space and priority rules to avoid badge overcrowding

Badges turned product cards into high-signal units, helping users quickly understand:

• What’s new

• What’s on offer

• What’s scarce

3. Integration with Commercial Filters

To connect visual storytelling with interaction, we:

• Integrated badges with the commercial filter system

• Allowed users to filter by campaigns or product status

• Enabled faster discovery of offers and strategic items

This shifted the PLP from being “just a list” to a performance surface that supports both user goals and commercial strategy.

Design Process

Design Exploration

I explored:

• Card anatomy variations and content density

• Badge hierarchy and placement (what shows first, what coexists)

• Contrast and accessibility for badge states

• Mobile-first layouts and tap targets

• Edge cases (multiple badges, long titles, complex pricing)

Deliverables included:

• Component specs and variants

• Responsive behavior definitions

• Documentation of states (default, promo, low-stock, etc.)

• Token usage aligned to Mondrian 6

Design System Alignment

I worked closely with the design system team to ensure:

• Full component compliance with Mondrian 6

• Reusable badge logic that could extend beyond accessories

• Scalable documentation for future squads and surfaces

• Patterns that could support new campaign types without redesigning cards

Stakeholder & C-Level Alignment

I presented the solution to:

• Product leadership

• E-commerce & Commercial stakeholders

• UX leadership

The narrative focused on:

• Business impact: CTR, conversion, campaign visibility

• Design system scalability and long-term efficiency

• The PLP as a performance and storytelling surface

This alignment secured prioritization and clarity around KPIs for post-release evaluation.

Collaboration with Engineering

Working closely with front-end and back-end teams, we:

• Ran feasibility workshops to map catalog rules to UI behaviors

• Defined badge logic, priorities, and fallbacks (e.g. what happens if multiple rules apply)

• Documented responsive behaviors and breakpoints

• Collaborated on implementation details to minimize regressions

This co-creation approach reduced rework and improved delivery speed and quality.

QA, Validation & Post-Launch Iteration

Post-development, I led design validation for:

• All major breakpoints

• Different campaign types and rule combinations

• Catalog edge cases (missing data, long names, etc.)

• Performance and loading states

We performed:

• Design QA sessions

• Visual regression checks

• Catalog consistency testing

This led to targeted micro-optimizations:

• Badge contrast tuning

• Card density and spacing adjustments

• Touch-target refinements for mobile

• Overflow and truncation rules for titles and labels

Images: before and after redesign: