case

Macy’s launched an effort to create a design system that would align repeatable coded components for developers, product designers and business stakeholders to maintain visual consistency across the site. 

customer pain point

Macy’s UI elements were being coded by engineers using wireframes and visual comps but lacked branding, behavior and visual consistency. Many components had up to 50+ interpretations varying in color value, height, width, stroke and radius, which caused pages to look radically different and distorted site alignment from end to end.

solution

Create a UI library developers to use as the single source of truth to shorten development time and shift QA resources from vetted repeatable components to net new experiences. In addition, as changes are approved and committed to the coded style guide, all CSG components will inherit the changes automatically without making direct code changes.

website: http://ui-styleguide.macys.com/