Quantum UI Design System

UI Design Team Project - 5 designers

Role: Product Designer 

Timeline: 4 months

cigna-green-leaf-motif Challenge

In tandem with Cigna’s rebranding initiatives, a new, comprehensive UI Design System was required to align with the branding consistency while adhering to modern accessibility guidelines.

The design system was needed to scale across multiple digital products with diverse user needs (D2C, B2B, and SaaS dashboards). This ensured a cohesive design language and cemented a new, clean aesthetic for Cigna moving forward.

The previous design of Cigna’s digital products contained technical and usability issues:

  • Inefficient development processes and technical debt with duplicated efforts

  • Disconnected components across multiple responsive devices (web, tablet, mobile)

  • Inconsistent/non-existent design language & UI design system

  • Failing WCAG/ADA accessibility standards, a big no-no for healthcare
cigna-green-leaf-motif Timeframe

The initial deadline for the basic component library design (over 200+ components) was 4 months, totaling 8 sprints. After that, there were ongoing efforts to be completed in subsequent timelines.

cigna-green-leaf-motif Solution: Quantum UI Design System Implementation
Foundation Design
Based on Atomic Design principles, we established foundational elements in Figma. This included color palettes, typography, grid systems, and iconography that adhered to WCAG 2.1 accessibility standards.
Component Hierarchy Construction
In continuation, we built a comprehensive component library starting with atoms (basic UI elements), and advancing them into molecules (simple components). Then, we construct the molecules into organisms (complex components) - all keeping in mind the responsiveness of different device sizes (laptop, tablet, mobile)
Cross-Platform Development
We translated the Figma components into reusable React.js code, adapting them for both Pega and AWS environments. At the same time, we ensured responsive behavior across all device types, resulting in a consistent user experience throughout Cigna's D2C, B2B and SaaS dashboard applications.

cigna-green-leaf-motif Outcome

The new Cigna Healthcare Quantum UI Design System revolutionized their digital presence while simultaneously unifying their user experience across all platforms.
View Cigna Healthcare Website

40%

Reduction in Development Time

90%

Increase in Design Consistency

35%

Decrease in Maintenance Costs

Wanna chat more? let's get in touch

Shoot me an email
Connect with me

Quantum UI Design System

UI Design Team Project - 5 designers

Role: Product Designer 

Timeline: 4 months

cigna-green-leaf-motif Challenge

In tandem with Cigna’s rebranding initiatives, a new, comprehensive UI Design System was required to align with the branding consistency while adhering to modern accessibility guidelines.

The design system was needed to scale across multiple digital products with diverse user needs (D2C, B2B, and SaaS dashboards). This ensured a cohesive design language and cemented a new, clean aesthetic for Cigna moving forward.

The previous design of Cigna’s digital products contained technical and usability issues:

  • Inefficient development processes and technical debt with duplicated efforts

  • Disconnected components across multiple responsive devices (web, tablet, mobile)

  • Inconsistent/non-existent design language & UI design system

  • Failing WCAG/ADA accessibility standards, a big no-no for healthcare
cigna-green-leaf-motif Timeframe

The initial deadline for the basic component library design (over 200+ components) was 4 months, totaling 8 sprints. After that, there were ongoing efforts to be completed in subsequent timelines.

cigna-green-leaf-motif Solution:
Quantum UI Design System Implementation

Foundation Design
Based on Atomic Design principles, we established foundational elements in Figma. This included color palettes, typography, grid systems, and iconography that adhered to WCAG 2.1 accessibility standards.
Component Hierarchy Construction
In continuation, we built a comprehensive component library starting with atoms (basic UI elements), and advancing them into molecules (simple components). Then, we construct the molecules into organisms (complex components) - all keeping in mind the responsiveness of different device sizes (laptop, tablet, mobile)
Cross-Platform Development
We translated the Figma components into reusable React.js code, adapting them for both Pega and AWS environments. At the same time, we ensured responsive behavior across all device types, resulting in a consistent user experience throughout Cigna's D2C, B2B and SaaS dashboard applications.

cigna-green-leaf-motif Outcome

The new Cigna Healthcare Quantum UI Design System revolutionized their digital presence while simultaneously unifying their user experience across all platforms.
View Cigna Healthcare Website

40%

Reduction in Development Time

90%

Increase in Design Consistency

35%

Decrease in Maintenance Costs

Wanna chat more? let's get in touch

Shoot me an email
Connect with me

Quantum UI Design System

cigna-green-leaf-motif UI Design Team Project

Role: Product Designer
Timeline: 4 months

cigna-green-leaf-motif Challenge

The previous design of Cigna’s digital products contained technical and usability issues:

  • Inefficient development processes and technical debt with duplicated efforts

  • Disconnected components across multiple responsive devices (web, tablet, mobile)

  • Inconsistent/non-existent design language & UI design system

  • Failing WCAG/ADA accessibility standards, a big no-no for healthcare
cigna-green-leaf-motif Timeframe

The initial deadline for the basic component library design (over 200+ components) was 4 months, totaling 8 sprints. 

cigna-green-leaf-motif Solution: Quantum Atomic UI Design System Implementation
Foundation Design
Based on Atomic Design principles, we established foundational elements in Figma. This included color palettes, typography, grid systems, and iconography that adhered to WCAG 2.1 accessibility standards.
Component Hierarchy Construction
In continuation, we built a comprehensive component library starting with atoms (basic UI elements), and advancing them into molecules (simple components). Then, we construct the molecules into organisms (complex components) - all keeping in mind the responsiveness of different device sizes (laptop, tablet, mobile)
Cross-Platform Development
We translated the Figma components into reusable React.js code, adapting them for both Pega and AWS environments. At the same time, we ensured responsive behavior across all device types, resulting in a consistent user experience throughout Cigna's D2C, B2B and SaaS dashboard applications.

cigna-green-leaf-motif Outcome

The new Cigna Healthcare Quantum UI Design System revolutionized their digital presence while simultaneously unifying their user experience across all platforms.

View Cigna Healthcare Website

40%

Reduction in Development Time

90%

Increase in Design Consistency

35%

Decrease in Maintenance Costs

Sound like a good fit? let's get in touch

Shoot me an email
Connect with me