Sharp.com Design System
"As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages."
— Brad Frost
Over the past several years, I’ve led the strategic design and evolution of the Sharp.com design system—transforming it from a solo effort into a cross-functional, scalable framework that powers consistent, accessible, and efficient digital experiences across our ecosystem.
At its inception, I was the only designer supporting our digital products. I partnered 1:1 with our Senior Software & Web Architect to build the system from the ground up, intentionally aligning it with Atomic Design principles and modern UX/UI best practices.
Today, it’s a collaborative, ever-evolving system managed by a team of designers—and continues to scale as Sharp’s digital footprint grows.
Our design system was born from a clear strategic need:
To create a single source of truth for both designers and developers that enhances cross-functional collaboration, reduces design/development debt, and ensures visual and functional consistency.
Key objectives:
-
Streamline workflows by aligning design and development around shared components
-
Improve content governance and scalability across multiple digital platforms
-
Support WCAG 2.1 AA accessibility compliance from the component level up
-
Reinforce brand integrity while enabling flexibility for product-specific needs
A critical component of our UX strategy was robust documentation. Our Design System Manager (DSM)—built in Notion—became the backbone of our successful CMS migration from CommonSpot to Contentful.
We use it to:
-
Document all components (atoms, molecules, organisms) and their use cases
-
Define content model relationships, input guidance, and standardized interface language
-
Align UX, content strategy, and development around reusable patterns
I co-led this effort with another designer, focusing on scalable documentation that informed our design and dev handoffs, while enabling content strategists and engineers to make informed, consistent decisions.
Figma Component Library
We maintain a comprehensive Figma library that serves as the interactive layer of our design system. All reusable components and brand styles are built and stored in the cloud, allowing our designers to work with live, up-to-date assets. This not only ensures fidelity and consistency but also reduces duplicate work and manual updates.
Storybook Integration
Storybook serves as the living reference for our components in code, giving developers an isolated environment to build, preview, and test UI patterns outside of production. Paired with Chromatic for automated visual regression, it ensures consistency between design and development, accelerates QA, and provides a clear, documented source of truth for engineers implementing components across applications.
.png)
Looking Ahead: Designing for Ecosystem Growth
As Sharp HealthCare’s digital landscape expands—now including a mobile app, patient portal, affiliate sites, and internal tools—our system needs to adapt. We're currently reshaping our strategy to create a centralized Sharp HealthCare Design Systems Hub, enabling tailored sub-systems under a unified design language.
This next phase is about governance, modularity, and scalability—ensuring our design system can support the needs of diverse teams and products without sacrificing consistency or accessibility.
From Idea to Impact
A design system is more than a style guide—it’s a multiplier. By turning patterns into reusable components, we accelerated design and development, ensured accessibility, and gave teams a single source of truth. Paired with a headless Contentful CMS, it empowered content authors and developers alike to deliver faster, more consistent experiences that scale.
Impact at a glance
-
40% faster design & development through reusable components
-
95–98% accessibility compliance achieved across sites
-
80% reduction in publishing time — updates in hours instead of weeks
-
Higher engagement as users experienced a more intuitive, seamless interface
From a single-designer initiative to an enterprise-level design strategy, this system has become a core part of how we scale UX across Sharp HealthCare. It’s not just a library—it’s a living strategy that enables better decision-making, fosters collaboration, and improves the patient and provider experience through intentional, accessible design.
This is an ongoing, thoughtful and meticulous collaboration between:
Samantha Jacob, Creative Director, UX/UI
Cory Silva, Software & Web Architect
Chloe Lopez, Content modeling, UX
Katherine Wu, UX/UI
Tiffany Ching, UX/UI
Eunice Kim, UX/UI
Laura Weg, Information Architect, UX
Aaron Hoskins, Manager of digital operations
and a fully stacked development team