At the time, Kaiser Permanente’s digital team was made up of 10 product groups, including mobile. Each group relied on a robust design system to create experiences that stayed true to the brand while ensuring top-notch usability and accessibility.
Library distribution issues
Designers struggled to find the right elements that met both business and user needs. The massive 200MB design file, stored on a shared drive, had scattered components across unnamed layers and multiple pages. Searching and zooming to locate assets was tedious, leading to outdated or detached components and frequent recreation of new ones.
Not built to scale
The chart below highlights key KP product experiences that depended on design system support. While the system provided core components like typography, colors, and forms, it often failed to meet user needs due to product complexity. For instance, Pharmacy required tools for prescription lookup and orders, while Medical Records needed data visualizations to help patients track their health.
Process bottleneck
Pre-development reviews with the design system team helped align product teams but often came too late. Since teams had already secured stakeholder approval, last-minute usability and accessibility issues caused frustration and delays. While these reviews ensured quality, they also became a bottleneck, adding friction between teams.
Component audit
To improve the design system, we first took inventory of all components in the shared library and CMS. I worked with product designers to review usage, identifying opportunities to simplify, consolidate, and replace legacy components instead of creating one-off instances.
Heuristic Evaluation of Components
I conducted a heuristic evaluation of each component using usability benchmarks, while our accessibility expert provided ratings. This helped us decide whether to refine or remove unused components. Combined with our audit, it streamlined the library, making it easier to navigate. Finally, migrating to Figma resolved distribution issues.
Process refinement
After doing research and evaluating of other design systems, we drew inspiration from Spotify’s Glue for its flexibility in supporting multiple channels, products, and experiences. We decided to take a similar approach.
1.1 Core Design System – This system includes atomic elements (color, typography, spacing, etc.) and core components that have been verified for broad usability and adhere to the highest accessibility standards.
2.1 Product-Specific Systems – Each product maintains its own design system, extending the core system to meet its unique needs.
3.1 Mobile-Specific System – Mobile further extends product UI, creating an additional layer of design consistency and refinement.
This structure provided scalability while maintaining coherence across experiences.
Design system governance requires balance. We prioritized consistency in usability, branding, and accessibility while allowing designers to work efficiently and adapt to their users' needs. The system wasn’t meant to micromanage every product, nor was that feasible. This approach ensured quality while enabling teams to meet deadlines.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 103 16" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 103 0 L 103 16 L 0 16 Z M 33.478 0.05 L 33.477 0.052 L 33.477 0.052 Z M 33.477 0.052 L 28.95 0.052 L 23.7 7.231 L 23.7 0.051 L 19.584 0.051 L 19.584 15.998 L 23.7 15.998 L 23.7 8.521 L 30.25 16 L 35.393 16 L 28.098 7.55 Z M 50.484 0.051 L 34.402 0.051 L 34.402 2.973 L 40.386 2.973 L 40.386 16 L 44.5 16 L 44.5 2.973 L 50.484 2.973 Z M 6.56 10.466 L 12.933 12.689 L 14.353 15.999 L 18.778 15.999 L 11.441 0.051 L 6.673 0.051 L 0 16 L 4.361 16 L 9.111 3.863 L 11.362 9.075 Z M 58.57 9.075 L 53.767 10.466 L 60.14 12.689 L 61.56 15.999 L 65.987 15.999 L 58.65 0.051 L 53.882 0.051 L 47.21 16 L 51.57 16 L 56.319 3.863 L 58.571 9.075 Z M 90.275 10.466 L 96.648 12.689 L 98.069 15.999 L 102.493 15.999 L 95.157 0.051 L 90.388 0.051 L 83.714 16 L 88.076 16 L 92.827 3.863 L 95.077 9.075 Z M 79.308 0.05 L 79.308 9.8 L 70.488 0.051 L 66.715 0.051 L 66.715 16 L 70.83 16 L 70.83 5.781 L 79.948 16 L 83.423 16 L 83.423 0.05 Z" fill="transparent" height="16px" id="hpWge_5Ro" width="103px"><path d="M 0 0 L 103 0 L 103 16 L 0 16 Z" fill="transparent" height="16px" id="ONfEZdoBw" width="103px"/><path d="M 33.478 0 L 33.477 0.002 L 33.477 0.002 Z M 33.477 0.002 L 28.95 0.002 L 23.7 7.181 L 23.7 0.001 L 19.584 0.001 L 19.584 15.948 L 23.7 15.948 L 23.7 8.471 L 30.25 15.95 L 35.393 15.95 L 28.098 7.5 Z M 50.484 0.001 L 34.402 0.001 L 34.402 2.923 L 40.386 2.923 L 40.386 15.95 L 44.5 15.95 L 44.5 2.923 L 50.484 2.923 Z M 6.56 10.416 L 12.933 12.639 L 14.353 15.949 L 18.778 15.949 L 11.441 0.001 L 6.673 0.001 L 0 15.95 L 4.361 15.95 L 9.111 3.813 L 11.362 9.025 Z M 58.57 9.025 L 53.767 10.416 L 60.14 12.639 L 61.56 15.949 L 65.987 15.949 L 58.65 0.001 L 53.882 0.001 L 47.21 15.95 L 51.57 15.95 L 56.319 3.813 L 58.571 9.025 Z M 90.275 10.416 L 96.648 12.639 L 98.069 15.949 L 102.493 15.949 L 95.157 0.001 L 90.388 0.001 L 83.714 15.95 L 88.076 15.95 L 92.827 3.813 L 95.077 9.025 Z M 79.308 0 L 79.308 9.75 L 70.488 0.001 L 66.715 0.001 L 66.715 15.95 L 70.83 15.95 L 70.83 5.731 L 79.948 15.95 L 83.423 15.95 L 83.423 0 Z" fill="rgb(31, 86, 165)" height="15.950000000047497px" id="wTa5Pgb6t" transform="translate(0 0.05)" width="102.49299688720704px"/></g></svg>)
