Bridging the Gap

Designing a Scalable System for Blue Cross and Blue Shield of Kansas

The Challenge

Blue Cross and Blue Shield of Kansas needed a structured and scalable design system to streamline collaboration and maintain consistency across teams. While a design system existed in Figma, it lacked clear documentation, structured components, and a seamless workflow. With multiple teams—Marketing, UX, Customer Experience, and Development—involved, alignment was key. Additionally, since development was built on Drupal with Acquia, the system needed to integrate smoothly while maintaining brand consistency and accessibility standards.

Problem statemet

To address these challenges, we created a cohesive and scalable design system that:

  • Unified teams with a shared source of truth.
  • Standardized components using structured naming conventions and design tokens.
  • Streamlined developer handoff with clear documentation and interactive prototypes.
  • Prioritized accessibility by ensuring AAA compliance.
  • Enabled scalability, making it easy to update and maintain design elements.

Using Figma’s component structure techniques, we built a flexible system that could evolve with the organization’s needs.

 

Solution

To ensure the system was efficient and easy to use, we:

✅ Defined a token-based structure for colors, typography, and spacing.
✅ Standardized component names to create consistency.
✅ Documented components with EightShapes Spec Figma Plugin for clarity.
✅ Created interactive prototypes and video documentation for developer guidance.
✅ Ensured accessibility compliance for all UI elements.
✅ Designed a scalable Figma library, allowing seamless updates across projects.

 

Impact

The implementation of the new design system led to a measurable improvement in team efficiency and product consistency. Development time for new pages was reduced by an estimated 30% thanks to reusable components and shared libraries. Design-to-dev handoff became smoother, cutting clarification loops and handoff delays by 40%, while overall production quality improved through clear documentation, tokenized design elements, and guided prototypes. Accessibility also advanced significantly, with 100% of core UI elements meeting AAA compliance, ensuring an inclusive experience across the platform. The scalable structure enabled updates to propagate across projects instantly, laying the foundation for long-term maintainability and faster iteration cycles across the organization.