case study
case study
building a scalable design system
building a scalable design system
who: Kaiser permanente, healthcare
team: design systems & product
my role: ux designer
when: 2017-2021
who: aktana, early start-up
team: founders, PM, & eng
my role: design team of one
when: 2014-2017
the ask
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.
the ask
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.
the ask
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.
the challenges
the challenges
the challenges
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.
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.
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.
Pain points: DS components not robust enough to complete solve for requirements.
Opportunities: Train designers to become experts and advocates for the DS, to have in mind as they approach UX strategy
Pain points: DS components not robust enough to complete solve for requirements.
Opportunities: Train designers to become experts and advocates for the DS, to have in mind as they approach UX strategy
Pain points: DS components not robust enough to complete solve for requirements.
Opportunities: Train designers to become experts and advocates for the DS, to have in mind as they approach UX strategy
Pain points: Challenge to dig through a single, massive, design file for components.
Opportunities: Migrate to a different platform, one that includes ability to search components based on requirements.
Pain points: Challenge to dig through a single, massive, design file for components.
Opportunities: Migrate to a different platform, one that includes ability to search components based on requirements.
Pain points: Challenge to dig through a single, massive, design file for components.
Opportunities: Migrate to a different platform, one that includes ability to search components based on requirements.
Pain points: Use existing components that results in a poor user experience
Opportunities: Allowing designers to contribute net new components based on needs of the product.
Pain points: Use existing components that results in a poor user experience
Opportunities: Allowing designers to contribute net new components based on needs of the product.
Pain points: Use existing components that results in a poor user experience
Opportunities: Allowing designers to contribute net new components based on needs of the product.
Pain points: Eating sprints on developing net components; potential dupes.
Opportunities: Enforcing a policy of API-first development.
Pain points: Eating sprints on developing net components; potential dupes.
Opportunities: Enforcing a policy of API-first development.
Pain points: Eating sprints on developing net components; potential dupes.
Opportunities: Enforcing a policy of API-first development.
Pain points: Users get inconsistent experiences, along with usability issues.
Opportunities: Measuring completion rate/times for each component, deprecating under performing ones
Pain points: Users get inconsistent experiences, along with usability issues.
Opportunities: Measuring completion rate/times for each component, deprecating under performing ones
Pain points: Users get inconsistent experiences, along with usability issues.
Opportunities: Measuring completion rate/times for each component, deprecating under performing 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.
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.
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.
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.
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.
the process
the process
the process
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.
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.
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.
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.
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.
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.
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.
the impact
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.
the impact
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.
the impact
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.
AKTANA
AKTANA
improving sales & engagement
improving sales & engagement
Aktana’s products strengthen relationships between sales reps and clients by transforming market complexity into clear guidance, helping sales teams drive better results.
open to work!
Copyright © 2025 Jesse Bones. All Rights Reserved.
All content, designs, and images on this website are the property of Jesse Bones and respective clients. Unauthorized use, reproduction, or distribution of any materials without explicit permission is prohibited.
open to work!
Copyright © 2025 Jesse Bones. All Rights Reserved.
All content, designs, and images on this website are the property of Jesse Bones and respective clients. Unauthorized use, reproduction, or distribution of any materials without explicit permission is prohibited.
open to work!
Copyright © 2025 Jesse Bones. All Rights Reserved.
All content, designs, and images on this website are the property of Jesse Bones and respective clients. Unauthorized use, reproduction, or distribution of any materials without explicit permission is prohibited.