Kaiser Permanente

Kaiser Permente

Overview
As the UX Design Lead for Kaiser Permanente’s expanding Design System, with a background in both design and development and extensive experience at the enterprise level, my focus was on improving the system to ensure design consistency and accessibility across digital healthcare products built on platforms like AEM and other frameworks for affiliates. In healthcare, it’s essential that usability and accessibility are seamlessly integrated into every design component. The challenge was managing a broad range of components, accommodating diverse product specifications, and addressing the unique needs of various affiliates. Drawing on my technical expertise and design experience, I successfully coordinated these elements within AEM and other frameworks, delivering a cohesive and streamlined user experience across the entire digital ecosystem.

The launch of the Design System marked a significant turning point, dramatically reducing the fragmented experiences that previously existed across Kaiser Permanente’s digital ecosystem. By providing a unified set of design components, guidelines, and patterns, the system ensured consistency in both functionality and visual language, regardless of platform or product. This shift not only improved efficiency in the design and development processes but also led to a more cohesive and intuitive user experience across the board. Affiliates and internal teams could now build and scale products with confidence, knowing they were contributing to a seamless, unified experience for users, significantly enhancing the overall user journey across the entire ecosystem.

My Role

Position: Lead Senior UX Designer

Primary Responsibilities:

• Led the Design Systems Team in developing a robust, scalable system that could be utilized across Kaiser Permanente’s digital platforms.

• Provided specialized consultation to 8 experience groups, ensuring that each group’s unique needs were integrated into the design system while maintaining consistency across the entire organization.

• Collaborated closely with front-end engineers, content architects, CMS teams, and the mobile app team to ensure seamless integration of design solutions into live products.

• Worked in an agile environment to iterate quickly and deliver solutions that met business objectives and user needs.

• Conducted usability testing, design audits, and stakeholder workshops to gather feedback and continuously improve the system.

Team & Collaboration

• Design Systems Team: Responsible for the creation and maintenance of reusable design components that enhanced efficiency across all digital products.

• Experience Groups: Provided specialized consultation and support for 8 experience groups, including web, mobile, and member portal teams, ensuring their requirements were met within the system.

• Front-End Engineers: Collaborated to ensure the design system was implemented with high fidelity, supporting responsive design, accessibility, and performance.

• Content Architects & CMS Team: Integrated content structures that aligned with user expectations and ensured consistency across digital touchpoints.

• Mobile App Team: Extended the design system’s reach to mobile platforms, ensuring a responsive and intuitive user experience across all devices.

Key Accomplishments

• Built a Comprehensive Figma Design System with an Atomic Design Approach:

  • Developed the design system using an atomic design methodology, starting with fundamental elements such as colors, typography, icons, and spacing.

  • Created atoms (basic components like buttons, input fields, and labels), molecules (combinations of atoms such as form fields or dropdown menus), and organisms (more complex UI components like navigation bars or cards).

  • Ensured the design system was modular and reusable by defining clear design tokens, guidelines, and patterns that could be easily scaled across multiple products and platforms.

  • Documented design principles and usage rules directly in Figma, enabling designers and developers to quickly reference and apply the system consistently across the ecosystem.

• Strategically Guided Cross-Functional Collaboration:

  • Held two design reviews weekly, bringing together design teams, product owners, content writers, and developers to review, discuss, and refine the scope of ongoing work.

  • Acted as a strategic advisor during reviews, providing feedback to ensure design decisions aligned with the broader vision of the design system while maintaining flexibility to accommodate product-specific needs.

  • Facilitated clear communication between designers and developers, ensuring the design system components translated seamlessly into code and maintained visual consistency across AEM and affiliate frameworks.

• Increased Team Efficiency and Output:

  • Introduced structured workflows in Figma, ensuring that the design system was not only accessible but also easily updateable by team members, increasing collaboration and reducing duplication of effort.

  • Streamlined feedback loops through the weekly design reviews, allowing for iterative improvements and faster decision-making.

• Unified Experience Across the Ecosystem:

  • The atomic approach within the Figma design system allowed the team to deliver a cohesive user experience across multiple products and platforms, significantly reducing fragmented experiences.

  • Ensured that product owners, developers, and content teams were aligned on the design system's vision and how to implement it, resulting in a more consistent, intuitive experience across Kaiser Permanente’s digital touchpoints.

• Reduction in Time to Market: Implementing the design system reduced the time to launch new digital products and features by 30%, enabling faster delivery of services to Kaiser Permanente members.

• Increased Consistency: Achieved a 90% consistency rate across all digital touchpoints by utilizing the design system’s reusable components, improving brand cohesion and user experience.

• Agile Adoption: Successfully transitioned the design team to an agile workflow, resulting in 40% faster iteration cycles and increased collaboration between designers and engineers.

• User Satisfaction: Post-launch analytics showed a 15% increase in user satisfaction, particularly in the areas of ease of navigation and mobile accessibility.

Design System Metrics

• 60+ Reusable Components: Developed over 60 reusable UI components, including buttons, forms, navigation menus, and templates that could be easily adapted by different teams.

• 8 Experience Groups: Provided tailored consultation and support for 8 unique experience groups across Kaiser Permanente’s digital ecosystem, including the patient portal, healthcare provider interface, and marketing platforms.

• 90% Consistency Rate: Achieved a high consistency rate across all digital channels through the implementation of the design system, significantly improving brand cohesion.

Highlights

1. Leading the Design Systems Team I led a multidisciplinary team of designers, front-end developers, and content strategists to create a comprehensive design system that could be adopted across Kaiser Permanente’s platforms. This system was designed to be scalable and adaptable, supporting the organization’s complex ecosystem of healthcare services.

2. Consulting 8 Experience Groups I provided specialized consultation to 8 experience groups, helping them align their unique needs with the overall design system. This collaboration ensured that each group’s specific challenges—whether mobile, web, or portal-based—were addressed, while maintaining a cohesive user experience across the board.

3. Cross-Functional Collaboration Close collaboration with engineers was key to the success of the design system. I worked with the front-end and mobile development teams to ensure that the design solutions were technically feasible, responsive, and accessible across all devices. Regular touchpoints with engineers and agile team leads ensured that the design system was implemented correctly and efficiently.

4. Agile Design & Development By adopting agile methodologies, we were able to rapidly iterate on designs based on stakeholder and user feedback. This allowed the design system to evolve organically, meeting both user needs and business objectives in a timely manner. Sprint cycles and regular cross-functional reviews allowed us to stay aligned and agile.

Building the Vessel Design System.

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.

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.

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.

Outcome

The implementation of the design system had a profound impact on Kaiser Permanente’s ability to deliver digital products quickly and consistently. The use of reusable components and standardized guidelines enabled teams to launch new features 30% faster, significantly reducing the time to market. The high 90% consistency rate across platforms improved brand cohesion, while the 15% increase in user satisfaction post-launch underscored the system’s success in enhancing the overall user experience.

This project demonstrated the power of a well-structured design system in a large-scale healthcare organization, where efficiency, agility, and user satisfaction are critical to success. By aligning design, engineering, and content teams under a unified vision, Kaiser Permanente now has a scalable foundation that supports ongoing digital innovation and improved patient care delivery.