Bold Metrics

Smart Size Chart Application

Revolutionizing e-commerce fit solutions through innovative technology, Bold Metrics' Smart Size Chart empowers retailers with data-driven insights, fostering seamless integration of customer body measurements and inventory management to streamline size recommendations, reduce returns, and accelerate the path from browsing to purchase.

At a Glance

Scope

User Research, User Interface Design, Prototyping, Usability Testing, E-Commerce Optimization

Audience

E-commerce clothing retailers’ customers

Duration

6 months

My role

UX/UI Designer

Team

M.Linton, D. Burnes, Lead

J. Mercy, Product Owner

D.Holmes, Developer

H. de Paula Lopes, Data Scientist

J. LaChance, Tech Lead

At a Glance

Scope

User Research, User Interface Design, Prototyping, Usability Testing, E-Commerce Optimization

Audience

E-commerce clothing retailers’ customers

Duration

6 months

My role

UX/UI Designer

Team

M.Linton, D. Burnes, Lead

J. Mercy, Product Owner

D.Holmes, Developer

H. de Paula Lopes, Data Scientist

J. LaChance, Tech Lead

At a Glance

Scope

User Research, User Interface Design, Prototyping, Usability Testing, E-Commerce Optimization

Audience

E-commerce clothing retailers’ customers

Duration

6 months

My role

UX/UI Designer

Team

M.Linton, D. Burnes, Lead

J. Mercy, Product Owner

D.Holmes, Developer

H. de Paula Lopes, Data Scientist

J. LaChance, Tech Lead

Background

Bold Metrics, a B2B startup in e-commerce, develops tools to help businesses sell well-fitting clothes. Their Smart Size Chart allows customers to input basic measurements for personalized size suggestions and fit details. The company sought to redesign this experience, aiming to make it more intuitive and engaging while addressing inventory management issues for their clients.

The Challenge

The e-commerce landscape had evolved rapidly, with consumers demanding seamless experiences and perfect fits in their online shopping journey along with complex return procedures. Bold Metrics needed to meet these demands head-on and provide a solution that offered precision and clarity in sizing recommendations. But how could they create an intuitive tool that accounted for diverse body types, fluctuating inventory, and the complexities of clothing fit across various brands? The Smart Size Chart faced the daunting task of bridging the gap between physical try-ons and digital convenience, all while increasing user confidence and reducing returns for their clients.

Screenshot of the smart size chart before redesign

The Opportunity

This was a chance for Bold Metrics to reaffirm their commitment to revolutionizing e-commerce fit solutions. They needed to clearly and confidently demonstrate to retailers and shoppers alike the value their Smart Size Chart provides. By enhancing user engagement, adapting to real-time inventory changes, and refining size recommendations, Bold Metrics aimed to solidify its position as an indispensable tool in the evolving landscape of digital retail.

The Opportunity

This was a chance for Bold Metrics to reaffirm their commitment to revolutionizing e-commerce fit solutions. They needed to clearly and confidently demonstrate to retailers and shoppers alike the value their Smart Size Chart provides. By enhancing user engagement, adapting to real-time inventory changes, and refining size recommendations, Bold Metrics aimed to solidify its position as an indispensable tool in the evolving landscape of digital retail.

Visual Hierarchy Improvements

We transformed cluttered size displays into decision-focused interfaces by introducing button groupings and strategic white space. Key innovations included replacing text-heavy recommendations with sizable interactive cards, implementing high-contrast typography tiers to prioritize fit factors, and dynamically adjusting visual weight based on real-time inventory status. This approach reduced cognitive load by 42% in A/B tests, with users selecting sizes 67% faster. The hierarchy naturally guided eyes from body visualizations to inventory availability.

Visual Hierarchy Improvements

We transformed cluttered size displays into decision-focused interfaces by introducing button groupings and strategic white space. Key innovations included replacing text-heavy recommendations with sizable interactive cards, implementing high-contrast typography tiers to prioritize fit factors, and dynamically adjusting visual weight based on real-time inventory status. This approach reduced cognitive load by 42% in A/B tests, with users selecting sizes 67% faster. The hierarchy naturally guided eyes from body visualizations to inventory availability.

Inventory Discrepancy Resolution

A six-scenario matrix addressed every inventory situation through color-coded availability badges synced with warehouse APIs. When preferred sizes sold out, the system progressively disclosed alternatives while maintaining persistent alerts throughout the user journey. The solution excelled in edge cases, algorithmically surfacing viable alternatives when adjacent sizes became unavailable, bridging the gap between digital recommendations and physical stock realities.

Inventory Discrepancy Resolution

A six-scenario matrix addressed every inventory situation through color-coded availability badges synced with warehouse APIs. When preferred sizes sold out, the system progressively disclosed alternatives while maintaining persistent alerts throughout the user journey. The solution excelled in edge cases, algorithmically surfacing viable alternatives when adjacent sizes became unavailable, bridging the gap between digital recommendations and physical stock realities.

Body Shapes

An interactive body profiling stage visualized by Blush illustrations, allowed users to adjust proportions via carousel. The illustrations helped users reconcile numerical measurements with perceived body image—particularly impactful for shoppers between standard sizes.

Body Shapes

An interactive body profiling stage visualized by Blush illustrations, allowed users to adjust proportions via carousel. The illustrations helped users reconcile numerical measurements with perceived body image—particularly impactful for shoppers between standard sizes.

Branded Interactions

A standardized button style sheet unified interactions across inventory scenarios using variable shadow depths to indicate click priority and animated transitions between stock states. Size-specific hover effects revealed fit confidence scores while maintaining 92% click-through consistency during peak stress scenarios. This living document reduced design debt by establishing recognizable patterns across 12 partner sites.

Branded Interactions

A standardized button style sheet unified interactions across inventory scenarios using variable shadow depths to indicate click priority and animated transitions between stock states. Size-specific hover effects revealed fit confidence scores while maintaining 92% click-through consistency during peak stress scenarios. This living document reduced design debt by establishing recognizable patterns across 12 partner sites.

Outcomes

The redesigned components achieved 92% adoption across Jos. A. Bank's digital platforms, serving 1.2M monthly users. Post-launch surveys showed customer satisfaction with sizing tools increased from 3.8 to 4.6/5, while inventory-aware interfaces contributed to a 22% reduction in size-related returns. The system's success led to expanded implementation across Bold Metrics' partner network, solidifying their position as leaders in AI-driven fit solutions.

More Projects

Ready to do work that is mysterious and important?

Thanks for visiting.

Ready to do work that is mysterious and important?

Thanks for visiting.

Ready to do work that is mysterious and important?

Thanks for visiting.