Building a design system
at Kaiser Permanente
Implementing a cohesive design system poses significant challenges, but the benefits are worth all the effort. Creating numerous components that both reflect the brand and remain intuitive while meeting the highest accessibility standards (fully WCAG compliant) is no small feat. Questions arise: Will all patterns cater to the diverse needs of users across various channels and platforms? Does adopting a design system limit individual designers in crafting unique solutions? Initially, I served as the sole UX designer on the system, supporting numerous designers across different product teams. As the design system team expanded, we successfully developed solutions that gained support within the organization. Today, these design patterns seamlessly integrate into the brand ecosystem, effectively meeting the diverse needs of users.
no design system—the cost for users
Without a robust design system in place, not only does branding and identity suffer inconsistencies across products, but so do usability and accessibility. Across various KP products, primary calls to action, forms, promotional items, and more were approached with inconsistency. Picture this: using one form to request a prescription refill, only to encounter a completely different form when trying to pay your bill. This not only disrupts the user experience but also adds unnecessary cognitive load as users navigate disparate UXs within the product ecosystem.
Having inconsistent design elements increases cognitive load as users struggle to find meaning
the cost for the company
Working without a design system isn't just a challenge for users; it also exacts a significant toll on the organization. At Kaiser, we invested a considerable amount of time and resources in designing and developing identical patterns. The absence of a design system meant that various product teams operated in silos, often unaware that others were concurrently working on the same UX solutions.
When I assumed responsibility for the design system, my initial action was to conduct a comprehensive pattern audit. I enlisted designers from different teams to collaborate in identifying the usage and context of specific components, compiling this information into a table. With this information, we could decide which components should be kept or enhanced and which to cut out.
Variations of a step-indicator pattern as used in a form.
the atomic workflow
After completing a pattern audit, I delved into the structural considerations for the design system. Opting for the atomic pattern methodology, I envisioned the design system library to begin with atoms or foundational elements—colors, typography, spacing, etc.—anything which could be represented as tokens. These smaller units would then construct more complex components such as forms, carousels, step indicators, and the like. Moving up the hierarchy, these components would comprise versatile layouts, essentially page templates that could be easily reused.
To streamline the workflow, all these design artifacts found a home in a symbol library within Sketch (pre-Figma). From this symbol library, we crafted the UX Style Guide—an exhaustive documentation outlining not only how to use (and not to use) the design elements but also providing a code implementation.
A living design system
After months of dedicated effort, the UX Style Guide emerged as an indispensable asset within the designer toolkit at Kaiser. Designers not only gained access to a robust sticker sheet but also received comprehensive guidance on the implementation of every design element, ensuring adherence to the brand guidelines. Each design element was developed with accessibility in mind, considering factors such as color contrast and compatibility with screen readers, all while keeping the diverse needs of users in focus. Rigorous usability testing was conducted on individual components, refining their quality. Designers actively participated in this iterative process, offering valuable feedback during their own testing. This feedback became integral to the ongoing refinement of the system, prompting updates or deprecation of components and even the introduction of new elements.
Impact of a full fledged design system
strategy, not pixels
No one loves pixel-pushing more than I do. However, the bigger concern for most designers is UX strategy: how to align user needs with business goals in a meaningful way. With pixels out of the way and accessibility built into each element, designers can focus high-level thinking.
built to scale
When updates to entire flows are needed, components can be readily moved around, since they are built as independent modular pieces. To boot, components are built once and shared across teams, toes are safe from being stepped on.
sweet harmony
Users benefit greatly since experiences are presented consistently. Design hierarchy is clear, layouts are well understood, and accessibility is built-in.
Below: two different domains (Pharmacy and Bill Pay), owned by different products team, sharing templates and components. True cohesion means not “shipping org charts”.