Design System: Scaling Consistency Across Design & Dev

My Problem: When I started working on design solutions for Cannondale, there wasn't an established global type scale in use. There were also accessibility issues around color contrast on the site, the site's global breakpoints weren't clearly defined in the design system, and spacing used in wireframes was inconsistent.

I approached leadership with the idea to improve the design system, since it would ultimately speed design and development. I started establishing global styles and led workshops to audit each component in our Sitecore system to improve documentation and usage.

The Result: Creating global styling with the development team had a significant impact on workflow. Development time was cut by 40% by eliminating repetitive tasks such as manually applying custom CSS properties to individual elements and blocks of text. Developers could simply apply the appropriate classes referenced in the designs, ensuring a consistent, pixel-perfect implementation. Having a type scale to work with, accessible color pairings, and clear rules around breakpoints and margins reduced time designing as well.

Design System Typescale Improvements: I led a workshop with the UX team to audit the current site type styles and create a type scale that we could use across desktop, tablet and mobile viewports. I also led meetings with development to ensure we were using the new styles in all new designs going forward. Previously we only had desktop and mobile type styles in the design system and they didn’t always match what was being used on the site. Development was coding new styles and didn’t have a global system to draw from. The type scale unified the way designers used type in designs and sped up development by 40%.

Accessibility and the Global Color System: I audited the color styles with the UX team to align them with what was actually in use on the site, then developed accessible color pairings so designers could quickly choose combinations that would pass accessibility contrast standards.

Design System Documentation: I led monthly workshops to audit our Sitecore components to document what each component was used for, how they functioned, the current issues and fixes needed, character counts for content, proper file formats and image sizes.