Plan
The complexity of the product landscape required a unique approach to the design system. Henry Schein One's platform supported two types of products: on-premises solutions built for Windows and cloud-hosted offerings. To accommodate both, I led the creation of a unified design system, named Resin, with two specialized interfaces—Veneer and Lumineer. Resin established consistent principles, content, and aesthetics across products, while Veneer and Lumineer translated these fundamentals into patterns and components tailored to their respective environments.
Ultimately we broke the process up into three phases:
- Phase 1: lay the foundations of the Resin Design System.
- Phase 2: audit & standardize the core patterns & components for the two interfaces.
- Phase 3: scale the design system by adding custom patterns & components specific to the dental industry.
Phase 1: Laying the Foundations
With the plan in place, we established clear design system principles and crafted a cohesive vision for the new interfaces' look and feel.
Values & Principles
Before moving forward, our team defined core values and principles by asking two key questions:
- How do we want our users to feel when interacting with our products?
- What guiding touchpoints can anchor our design decisions consistently?
Through extensive brainstorming, we aligned on the product values and foundational design system principles that would drive our vision.
Look & Feel
Considering the purpose of our products—supporting dental practices and patient care coordination—our goal was to create a visual identity that felt refreshing yet understated. Conveniently, Henry Schein One’s branding team was finalizing a brand refresh at the same time, allowing us to collaborate closely and swiftly align on fonts, colors, and visual elements.
Phase 2: Standardizing Library Components
Within approximately two months, we developed most of the essential standardized form elements, along with several key molecules and organisms, for the pilot project of the design system implementation.
Building A Design System in Figma
The Resin design system team used a combination of variables, styles, and nested libraries to organize and create the Resin Design System in Figma.
Variables & Styles
By creating multiple base variable collections that feed into a usage variables and styles, we were able to create a clean, scalable system of colors, typography, shapes, & sizes.
Libraries
In order to achieve a unified design system with two branching interfaces, we created a four-tiered system of libraries.
Tier 1: Helpers Library
This library had all the organizational tools used by designers to help them in the creation and organization of their mockups.
Tier 2: Variables, Styles, and Assets Library
Provides the necessary building blocks for the component library.
Tier 3: Resin Design System Component Library
Home to any components that are shared across the two interfaces
Tier 4: Veneer UI Component Library & Lumineer UI Component Library
Holds all components needed for designers to do their work, including custom components as well as nested shared components