The impact

By aligning design and engineering through shared standards, we've accelerated delivery, reduced redundancy, and improved overall quality.

40%
Faster hand-offs between design and developement

60%
decrease in design-related bugs across first quarter of roll-out

95%
accessibility compliance according to WGAG 2.1 AA standards

The challenge

When I first joined Sharp, it was widely known there was inconsistency across Sharp's many products. As the system has grown over the years, there emerged different teams, tools, and workflows that created fragmented user experiences. Some challenges from a design perspective included:
‍
• Components were duplicated across products (and inconsistent)
• Design decisions were often made page-by-page rather than system-wide
• Spacing, typography, and color usage varied significantly
• Accessibility standards were not prioritized
• Designers and developers lacked a shared source of truth

The result was visual inconsistency as well as operational inefficiencies that slowed delivery, increased QA/UAT time, and made scaling difficult across our various teams.
‍
At the same time, Sharp wanted to modernize its digital infrastructure. This all led to us migrating from Sketch and CommonSpot toward a more scalable ecosystem. The goal became much larger than creating reusable components. We needed to build a scalable design system that could align design, engineering, accessibility, and content workflows across the organization.

Establishing a shared foundation

As lead designer on the initiative, my role centered on helping define:

• The system architecture
• Component strategy
• Documentation approach
• Design-to-development workflows
• Long-term scalability and governance

We approached the system through an atomic design methodology, starting from the atoms all the way to blocks and templates. Some details we defined included:
‍
• Design tokens
• Typography
• Color
• Buttons and form elements
• Components
• Patterns
• Larger content blocks and page structures

This process allowed us to create consistency at scale while still supporting flexibility across different products and teams.

Designing the system for accessibility and scale

In close partnership with senior design leadership, I began by laying down the foundation of our new ecosystem through a refreshed style guide. We also took this opportunity to make in accessibility and made sure to adhere to WCAG 2.1 AA accessibility standards particularly around contrast, typography sizing, and touch targets.

Building the component ecosystem

To create the initial component library, I conducted an audit of existing legacy Sketch symbols and UI patterns already in use across products and largely redesigned each pattern into reusable components in Figma in order to improve consistency, accessibility, and overall support our goals of a scalable design system. This was also the time to redesign and upgrade our components for a fresh look.
‍
The goal was not simply to standardize existing patterns, but to evolve the system into something more scalable and future-friendly.

Documentation as part of the product

We prioritized documentation as as a core part of the workflow itself using notion. This kept track of the correct usage of all our components and was our single source of truth for all developers, content managers and others using this design system. Each component and block was documented with:

• Purpose and intended usage
• Accessibility considerations
• Interaction guidelines
• Figma embeds
‍
This significantly improved onboarding, collaboration, and implementation consistency across teams.

Aligning design and engineering workflows

At this point in time, our team and the development team had chosen to move forward with Contentful as our new CMS. The new design system greatly helped to inform the new CMS architecture and implementation strategy. The flexibility of Contentful allowed us more freedom than previously in page creating and provided scalable editing experiences for our content managers. This set us up for an overall reduced reliance on engineering for routine content updates after initial set-up.

Storybook integration

To further strengthen alignment between design and engineering, we introduced Storybook as a shared front-end component library and code database. It provided us a centralized development environment for reusable UI components and better consistency across products. It also provided a shared design language between designers and engineers which became key in our workflow.

We also integrated Chromatic for automated visual regression testing, helping both design and engineering teams to approve changes and bug fixes. This dramatically improved confidence during implementation and reduced manual QA overhead.

Impact

A design system is more than just reusable components - it's about scalability, efficiency, and consistency. By aligning design and engineering through shared standards, we've accelerated delivery, reduced redundancy, and improved overall quality. These metrics capture the impact of that alignment across teams and products.

• 40% quicker design-to-dev hand-offs thanks to tokenized styles and resuable patterns
• Design QA/UAT rounds cut in half with fewer consistencies between Figma and production
• 60% fewer design-related bugs across the first quarter of roll-out
• 95% accessibility compliance as flagged my Lighthouse and other QA accessibility tools

Beyond the numbers, the system created stronger alignment between design and engineering teams and enabled faster, more scalable product development across the organization. We continue to iterate and expand our design system to this day.

Reflection

This project reinforced that design systems are ultimately organizational systems and not just UI libraries. So much value came from creating shared language, shared standards, and shared workflows across teams that previously operated in silos.

By investing in accessibility, documentation, scalability, and developer collaboration from the beginning, we built a foundation that continues to evolve alongside Sharp’s growing digital ecosystem.

View our design system