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
This design system has been a labor of love over the course of a few years. It's taken several iterations to get to where it is today, and even still, it is an ever-evolving process. At its inception, I was the only designer around to create or utilize it. I worked 1:1 with our Sr. Software & Web Architect to build our design system from the ground up.
Our design system is:
-
Based on Atomic Design principles
-
Built in Figma
-
Follows UX/UI best practices
-
Meets WCAG 2.0 AA accessibility requirements
-
Has an accompanying DSM (design system manager) built in Notion.
Today, a small but mighty team of 5 UX designers contribute to and maintain our design system, and it continues to evolve everyday.
Goals
To create a single source of truth for both designers and developers, that allows us to all work using the exact same components. The purpose of this design system is to create efficiency and to ensure consistency.
DSM documentation
DSM documentation played a huge role in our CMS migration effort from CommonSpot to Contentful. Not only was it the source of truth for the redesign/rebuild, but the new CMS/DXP allowed us to create content models, define labels and help text, and to outline design options that connected directly to the components in the design system.
I collaborated with another UX designer, who was responsible for extensively and meticulously documenting each of these blocks (organisms) and components (atoms and molecules).
Figma library
The latest version of our design system is created and maintained in Figma. It contains all of our brand styles and reusable components, and feeds into our DSM. Designers can pull these components down from Figma's cloud space and into their working files. This way, everyone is using the exact same components, not recreating them.
The future of our design system
With the addition of a mobile app, a web portal, affiliate sites and internal-facing digital products, our DSM needs have grown far beyond just Sharp.com. We are currently working on restructuring our design system to accommodate our growing needs.
The future state of our design system is an all-encompassing Sharp HealthCare Design Systems Hub. From here, you can jump into specific subversions of our overarching design system.
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
Laura Weg, Information Architect, UX
​
and a fully stacked development team