Case Study: Cigna Healthcare -
UI Design System & Rebranding

cigna-ui-design-system-thumbnail

Project Overview

Challenge

Cigna Healthcare is currently undergoing an overhaul in rebranding. Therefore, there was a need to develop a new and improved UI Design System in Figma since Adobe XD was being used prior to these changes.

The challenge lies in creating a comprehensive and adaptable UI design system that caters to Cigna’s diverse user base, aligns with their brand guidelines, and supports seamless collaboration between designers and developers.

Problem Statement

The current user interface (UI) design for Cigna’s digital product lacked consistency, leading to a disjointed user experience and increased development effort.

As a result, there is a need to develop a robust UI design system that provided a cohesive visual language, consistent design patterns, and reusable components to improve overall usability, efficiency, and brand representation.

Objectives

Establish the scalable and efficient UI Design System for Cigna’s digital products using the Atomic Design Methodology by Brand Frost:

  1. Define Atomic Design Principles – Establish guidelines and documentation to ensure consistent application of these principles throughout the design system.

  2. Identify atomic components – Categorize and define these atomic components based on their characteristics, functionalities, and visual properties.

  3. Create molecules and organisms – Assemble atomic components into higher-level molecules and organisms that represent common UI patterns.

  4. Develop templates and pages – Build templates and pages that utilize the assembled atomic components, molecules, and organisms.

  5. Establish UI design system documentation – This documentation should serve as a reference for designers and developers to ensure consistent implementation and maintenance.

  6. Collaborate and iterate – Foster collaboration between designers, developers, and stakeholders throughout the design system development process.

  7. Implement and maintain – Establish a maintenance plan to support ongoing updates, improvements, and expansion of the design system to accommodate future design and development needs.
 

Project Scope

UI Design System, Rebranding

Tools

Figma, React.js, Adobe Creative Suite

Overview

My role

As the Product Designer on the Design Systems team, my role was dedicated to creating and maintaining the Quantum Design Library for Cigna Healthcare and its B2B marketing analytics platform, Contour Insights.

The Quantum Design Library consisted of style guides, design components, design patterns, React code naming conventions, and documentation. As a Product Designer for Design Systems, this gives me a bird’s eye view of the different digital products that the organization is utilizing.

How my team utilized Figma for the UI Design System

My team determined that we would build the complexity of each component while working on rebranding projects simultaneously. Our B2B SaaS platforms consisted of Pega and AWS components which were incorporated into the Quantum Design Library.

For. the majority of the time, we were working on one component at a time. If you put all components in one file, it slows down Figma. By giving each component its own file, you have the whole history and documentation in one place.

how-my-team-used-figma

Rebranding

As part of ongoing growth and evolution at Cigna Healthcare, there was a high priority for rebranding initiatives. There was great significance in consistent and cohesive brand presence for digital and print products.

Our team has took great care in creating this library, ensuring that it is reflective of Cigna’s updated brand identity whilst also being user-friendly and intuitive. Every element, from color palettes to typography, has been meticulously considered to guarantee a polished and cohesive look across all digital touchpoints.

cigna-healthcare-guidelines
cigna-healthcare-guidelines
cigna-healthcare-guidelines

UI audit of the old UI design library

The key objective of the UI audit is to evaluate the current design system and identify areas for improvement while considering the industry’s unique demands. It involves examining the design’s visual elements, navigation techniques, interactive features, and content arrangement to ensure that they are intuitive, accessible, and engaging. Furthermore, the audit provides valuable insights into the design’s compliance with industry standards, best practices, and regulations.

For my particular role on the Quantum Design team, I did a thorough audit on the Contour Insights marketing analytics platform and went through the flow to get a rough idea of each use case.

Through this audit, I identified the following areas of improvement for Quantum Design Library:

  • Grid alignment is not consistent on the website app portal
  • Spacing feels cramped
  • There were inconsistencies in flows which makes the user doubtful
  • Lack of hierarchy as to where the patient files are and how to prioritize each category
  • Lack of clickable text that leads you to the next table
  • Breadcrumbs look redundant and menu is out of alignment
  • Overall lack of consistency, cluttered design, and lack of branding

Creating the Design System

Step #1: Create a Design Foundation

Creating a UI Design System involves establishing the visual elements and principles that will guide the overall look and feel of a digital product. Here’s a breakdown of the process for each of the elements of the design foundation:

Color

  • Research color theory and psychology to understand the impact of colors on emotions and perceptions
  • Choose a color palette that aligns with the Cigna Healthcare’s target audience
  • Create a primary color scheme and consider additional accent colors
  • Define color values (hex codes, RGB, etc.) for consistency across different design assets
cigna-healthcare-color

Typography

  • Select appropriate fonts that complement the project’s branding and convey the desired tone
  • Establish hierarchy by assigning different font weights, sizes, and styles (such as bold or italic) for headings, subheadings, body text, and other elements
  • Ensure readability and legibility by testing font combinations and optimizing line spacing, letter spacing, and paragraph length
cigna-healthcare-typography

Grids

  • Set up a grid system that provides structure and alignment for your design
  • Determine the number of the columns and their widths to establish consistent layouts
  • Consider responsive design principles by adapting the grid for different screen sizes
  • Use the grid as a guide to position elements, maintain visual harmony, and create balanced compositions
cigna-healthcare-grid
cigna-healthcare-grid

Logos

  • Integrate Cigna Healthcare’s logo and ensure its consistent use throughout the design process
  • Determine appropriate placement and size of the logo across different design elements
  • Ensure the logo maintains its visual integrity by adhering to brand guidelines
cigna-healthcare-logo
contour-logo-variant

Icons

  • Create the style of icons that match Cigna Healthcare’s minimalistic aesthetic
  • Create and source a library of icons that serve as a visual representation of actions, objects, or concepts within the design
  • Ensure consistency in iconography style, size and alignment across different screens and components
cigna-healthcare-icons

Images

  • Identify the types of images required for the Cigna Healthcare brand, such as lifestyle photos, illustrations, or stock images
  • Optimize image quality, size and format for web or print, considering loading times and display capabilities
  • Align images with the overall design aesthetic, ensuring they enhance the user experience and convey the intended message
Previous slide
Next slide

Throughout the design process, it’s important to regularly review and refine these foundational elements to maintain consistency, cohesiveness, and a strong visual identity across different design assets.

Step #2: Create Components Using the Atomic Design Methodology

The Atomic Design Methodology divides the design process into smaller stages, starting with basic building blocks, like buttons, headings, and form elements, and ending with more complex designs like headers, footers, and entire web pages.

 

This approach ensures consistency, scalability, and efficiency in creating websites. The concept, proposed by Brad Frost, is analogous to the structure of atoms forming larger molecules. Breaking down the process to smaller components helps facilitate collaboration among team members and serves as a helpful guide for managing design systems.

 

Overall, it is a popular approach for web development and design that aims to streamline the process.

Atoms

atom-purple

To create a component using any element, you want to create an atom.

Molecule

molecule-purple

To create another component and group it with an atom, it will create a molecule.

Organism

organism-purple

An organism is a combination of all the molecules and atoms.

It’s important to note that this methodology promotes a systematic and modular approach to UI design, where elements at lower levels (atoms, molecules) are combined to create higher-level components (organisms, pages). This approach enables consistency, reusability, and scalability in the design system.

Atoms - UI elements that can't be broken down any further and serve as the elemental building blocks of an interface.

  • Individual UI elements such as buttons, inputs, icons, labels, and form fields
  • These are the smallest and most fundamental building blocks of the design system
cigna-healthcare-atoms

Molecules - Collections of atoms that form relatively simple UI components

  • Combinations of atoms that form small, reusable UI components
  • Examples include search bars, navigation menus, dropdowns, and input groups
  • Molecules provide more complex functionality and can be composed of multiple atoms
cigna-healthcare-molecules

Organisms - Relatively complex components that form discrete sections of an interface

  • Groups of molecules and atoms that form more significant components or sections of a user interface
  • Examples include headers, footers, product cards, and feature panels
  • Organisms represent distinct sections or functional units within a page
cigna-healthcare-organisms

Step #3 Tailor the Contour Insights Dashboard to the AWS Design System

Contour Insights is a marketing analytics platform for Cigna Healthcare that aims to empower marketing teams with actionable insights. The use cases for Contour Insights is to drive data-driven decision-making, optimize marketing campaigns, and improve overall marketing effectiveness. It plays a crucial role in understanding the impact marketing efforts on business objectives for Cigna Healthcare.

Templates- Place components within a layout and demonstrate the design's underlying content structure

  • Establish overall structure and layout of a page or screen
  • They provide a framework for arranging and positioning components, such as organisms, molecules and atoms
  • Templates ensure consistency and coherence throughout the design system by defining the placement and relationship of UI elements
  • These structures can be reused across multiple pages, allowing for efficient design and development
cigna-healthcare-templates

Pages - Apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system

  • Pages represent specific content or functionality that a user interacts with
  • They are complete layouts or screens composed of various components, including organisms, molecules, and atoms
  • Pages provide context and demonstrate how the UI elements fit together in real-world scenarios
  • Each page serves a unique purpose and showcases the design system’s components in action
  • Designers can create variations of pages to accommodate different content and. user flows while maintaining a consistent design language
cigna-healthcare-pages

Contour Insights uses the Amazon Web Services (AWS) platform for design and development. Although AWS doesn’t have an official Figma format for its design system, it provides a comprehensive set of design resources and guidelines called the “AWS Design System” that assists designers and developers in creating user interfaces consistent with the AWS brand.

My team and I accessed the AWS design resources and recreated the guidelines as part of our Cigna Healthcare Quantum Design Library. The PNG and SVG assets were the point of reference to create a specific section within our own design system.

Contour Insights - Marketing Analytics Prototype

What Next?

The UI design system for Cigna Healthcare is a digital encyclopedia that is always being updated. There are going to be times when designers have to go back and edit the features and/or add new components. That is why we named the design system the Quantum Design Library.

Next Steps

  • Make each component section more refined and with variety
  • Expand on the AWS and Pega design systems
  • Label each item in Figma with React.js code naming conventions
  • Continuing to update Quantum Design Library as needed

Case Study: Cigna Healthcare -
UI Design System & Rebranding

cigna-ui-design-system-thumbnail

Project Overview

Challenge

Cigna Healthcare is currently undergoing an overhaul in rebranding. Therefore, there was a need to develop a new and improved UI Design System in Figma since Adobe XD was being used prior to these changes.

The challenge lies in creating a comprehensive and adaptable UI design system that caters to Cigna’s diverse user base, aligns with their brand guidelines, and supports seamless collaboration between designers and developers.

Problem Statement

The current user interface (UI) design for Cigna’s digital product lacked consistency, leading to a disjointed user experience and increased development effort.

As a result, there is a need to develop a robust UI design system that provided a cohesive visual language, consistent design patterns, and reusable components to improve overall usability, efficiency, and brand representation.

Objectives

Establish the scalable and efficient UI Design System for Cigna’s digital products using the Atomic Design Methodology by Brand Frost:

  1. Define Atomic Design Principles – Establish guidelines and documentation to ensure consistent application of these principles throughout the design system.

  2. Identify atomic components – Categorize and define these atomic components based on their characteristics, functionalities, and visual properties.

  3. Create molecules and organisms – Assemble atomic components into higher-level molecules and organisms that represent common UI patterns.

  4. Develop templates and pages – Build templates and pages that utilize the assembled atomic components, molecules, and organisms.

  5. Establish UI design system documentation – This documentation should serve as a reference for designers and developers to ensure consistent implementation and maintenance.

  6. Collaborate and iterate – Foster collaboration between designers, developers, and stakeholders throughout the design system development process.

  7. Implement and maintain – Establish a maintenance plan to support ongoing updates, improvements, and expansion of the design system to accommodate future design and development needs.

Project Scope

UI Design System, Rebranding

Tools

Figma, React.js, Adobe Creative Suite

Overview

My role

As the Product Designer on the Design Systems team, my role was dedicated to creating and maintaining the Quantum Design Library for Cigna Healthcare and its B2B marketing analytics platform, Contour Insights.

The Quantum Design Library consisted of style guides, design components, design patterns, React code naming conventions, and documentation. As a Product Designer for Design Systems, this gives me a bird’s eye view of the different digital products that the organization is utilizing.

How my team utilized Figma for the UI Design System

My team determined that we would build the complexity of each component while working on rebranding projects simultaneously. Our B2B SaaS platforms consisted of Pega and AWS components which were incorporated into the Quantum Design Library.

For. the majority of the time, we were working on one component at a time. If you put all components in one file, it slows down Figma. By giving each component its own file, you have the whole history and documentation in one place.

how-my-team-used-figma

How my team utilized Figma for the UI Design System

My team determined that we would build the complexity of each component while working on rebranding projects simultaneously. Our B2B SaaS platforms consisted of Pega and AWS components which were incorporated into the Quantum Design Library.

For. the majority of the time, we were working on one component at a time. If you put all components in one file, it slows down Figma. By giving each component its own file, you have the whole history and documentation in one place.

Rebranding

As part of ongoing growth and evolution at Cigna Healthcare, there was a high priority for rebranding initiatives. There was great significance in consistent and cohesive brand presence for digital and print products.

Our team has took great care in creating this library, ensuring that it is reflective of Cigna’s updated brand identity whilst also being user-friendly and intuitive. Every element, from color palettes to typography, has been meticulously considered to guarantee a polished and cohesive look across all digital touchpoints.

cigna-healthcare-guidelines
cigna-healthcare-guidelines
cigna-healthcare-guidelines

UI audit of the old UI design library

The key objective of the UI audit is to evaluate the current design system and identify areas for improvement while considering the industry’s unique demands. It involves examining the design’s visual elements, navigation techniques, interactive features, and content arrangement to ensure that they are intuitive, accessible, and engaging. Furthermore, the audit provides valuable insights into the design’s compliance with industry standards, best practices, and regulations.

For my particular role on the Quantum Design team, I did a thorough audit on the Contour Insights marketing analytics platform and went through the flow to get a rough idea of each use case.

Through this audit, I identified the following areas of improvement for Quantum Design Library:

  • Grid alignment is not consistent on the website app portal
  • Spacing feels cramped
  • There were inconsistencies in flows which makes the user doubtful
  • Lack of hierarchy as to where the patient files are and how to prioritize each category
  • Lack of clickable text that leads you to the next table
  • Breadcrumbs look redundant and menu is out of alignment
  • Overall lack of consistency, cluttered design, and lack of branding

Creating the Design System

Step #1: Create a Design Foundation

Creating a UI Design System involves establishing the visual elements and principles that will guide the overall look and feel of a digital product. Here’s a breakdown of the process for each of the elements of the design foundation:

Color

  • Research color theory and psychology to understand the impact of colors on emotions and perceptions
  • Choose a color palette that aligns with the Cigna Healthcare’s target audience
  • Create a primary color scheme and consider additional accent colors
  • Define color values (hex codes, RGB, etc.) for consistency across different design assets
cigna-healthcare-color

Typography

  • Select appropriate fonts that complement the project’s branding and convey the desired tone
  • Establish hierarchy by assigning different font weights, sizes, and styles (such as bold or italic) for headings, subheadings, body text, and other elements
  • Ensure readability and legibility by testing font combinations and optimizing line spacing, letter spacing, and paragraph length
cigna-healthcare-typography

Grids

  • Set up a grid system that provides structure and alignment for your design
  • Determine the number of the columns and their widths to establish consistent layouts
  • Consider responsive design principles by adapting the grid for different screen sizes
  • Use the grid as a guide to position elements, maintain visual harmony, and create balanced compositions
cigna-healthcare-grid
cigna-healthcare-grid

Logos

  • Integrate Cigna Healthcare’s logo and ensure its consistent use throughout the design process
  • Determine appropriate placement and size of the logo across different design elements
  • Ensure the logo maintains its visual integrity by adhering to brand guidelines
cigna-healthcare-logo
contour-logo-variant

Icons

  • Create the style of icons that match Cigna Healthcare’s minimalistic aesthetic
  • Create and source a library of icons that serve as a visual representation of actions, objects, or concepts within the design
  • Ensure consistency in iconography style, size and alignment across different screens and components
cigna-healthcare-icons

Images

  • Identify the types of images required for the Cigna Healthcare brand, such as lifestyle photos, illustrations, or stock images
  • Optimize image quality, size and format for web or print, considering loading times and display capabilities
  • Align images with the overall design aesthetic, ensuring they enhance the user experience and convey the intended message
Previous slide
Next slide

Throughout the design process, it’s important to regularly review and refine these foundational elements to maintain consistency, cohesiveness, and a strong visual identity across different design assets.

Step #2: Create Components Using the
Atomic Design Methodology

The Atomic Design Methodology divides the design process into smaller stages, starting with basic building blocks, like buttons, headings, and form elements, and ending with more complex designs like headers, footers, and entire web pages.

 

This approach ensures consistency, scalability, and efficiency in creating websites. The concept, proposed by Brad Frost, is analogous to the structure of atoms forming larger molecules. Breaking down the process to smaller components helps facilitate collaboration among team members and serves as a helpful guide for managing design systems.

 

Overall, it is a popular approach for web development and design that aims to streamline the process.

Atoms

atom-purple

To create a component using any element, you want to create an atom.

Molecule

molecule-purple

To create another component and group it with an atom, it will create a molecule.

Organism

organism-purple

An organism is a combination of all the molecules and atoms.

It’s important to note that this methodology promotes a systematic and modular approach to UI design, where elements at lower levels (atoms, molecules) are combined to create higher-level components (organisms, pages). This approach enables consistency, reusability, and scalability in the design system.

Atoms - UI elements that can't be broken down any further and serve as the elemental building blocks of an interface.

  • Individual UI elements such as buttons, inputs, icons, labels, and form fields
  • These are the smallest and most fundamental building blocks of the design system
cigna-healthcare-atoms

Molecules - Collections of atoms that form relatively simple UI components

  • Combinations of atoms that form small, reusable UI components
  • Examples include search bars, navigation menus, dropdowns, and input groups
  • Molecules provide more complex functionality and can be composed of multiple atoms
cigna-healthcare-molecules

Organisms - Relatively complex components that form discrete sections of an interface

  • Groups of molecules and atoms that form more significant components or sections of a user interface
  • Examples include headers, footers, product cards, and feature panels
  • Organisms represent distinct sections or functional units within a page
cigna-healthcare-organisms

Step #3 Tailor the Contour Insights Dashboard to the AWS Design System

Contour Insights is a marketing analytics platform for Cigna Healthcare that aims to empower marketing teams with actionable insights. The use cases for Contour Insights is to drive data-driven decision-making, optimize marketing campaigns, and improve overall marketing effectiveness. It plays a crucial role in understanding the impact marketing efforts on business objectives for Cigna Healthcare.

Templates - Place components within a layout and demonstrate the design's underlying content structure

  • Establish overall structure and layout of a page or screen
  • They provide a framework for arranging and positioning components, such as organisms, molecules and atoms
  • Templates ensure consistency and coherence throughout the design system by defining the placement and relationship of UI elements
  • These structures can be reused across multiple pages, allowing for efficient design and development
cigna-healthcare-templates

Pages - Apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system

  • Pages represent specific content or functionality that a user interacts with
  • They are complete layouts or screens composed of various components, including organisms, molecules, and atoms
  • Pages provide context and demonstrate how the UI elements fit together in real-world scenarios
  • Each page serves a unique purpose and showcases the design system’s components in action
  • Designers can create variations of pages to accommodate different content and. user flows while maintaining a consistent design language
cigna-healthcare-pages

Contour Insights uses the Amazon Web Services (AWS) platform for design and development. Although AWS doesn’t have an official Figma format for its design system, it provides a comprehensive set of design resources and guidelines called the “AWS Design System” that assists designers and developers in creating user interfaces consistent with the AWS brand.

My team and I accessed the AWS design resources and recreated the guidelines as part of our Cigna Healthcare Quantum Design Library. The PNG and SVG assets were the point of reference to create a specific section within our own design system.

Contour Insights -
Marketing Analytics Prototype

What Next?

The UI design system for Cigna Healthcare is a digital encyclopedia that is always being updated. There are going to be times when designers have to go back and edit the features and/or add new components. That is why we named the design system the Quantum Design Library.

Next Steps

  • Make each component section more refined and with variety
  • Expand on the AWS and Pega design systems
  • Label each item in Figma with React.js code naming conventions
  • Continuing to update Quantum Design Library as needed

Case Study: Cigna Healthcare -
UI Design System & Rebranding

cigna-ui-design-system-thumbnail

Project Overview

Challenge

The challenge lies in creating a comprehensive and adaptable UI design system that caters to Cigna’s diverse user base, aligns with their brand guidelines, and supports seamless collaboration between designers and developers.

Problem Statement

The current user interface (UI) design for Cigna’s digital product lacked consistency, leading to a disjointed user experience and increased development effort.

As a result, there is a need to develop a robust UI design system that provided a cohesive visual language, consistent design patterns, and reusable components to improve overall usability, efficiency, and brand representation.

Objectives

Establish the scalable and efficient UI Design System for Cigna’s digital products using the Atomic Design Methodology by Brand Frost:

  1. Define Atomic Design Principles

  2. Identify atomic components –

  3. Create molecules and organisms

  4. Develop templates and pages

  5. Establish UI design system documentation

  6. Collaborate and iterate

  7. Implement and maintain

Project Scope

UI Design System, Rebranding

Tools

Figma, React.js, Adobe Creative Suite

Overview

As the Product Designer on the Design Systems team, my role was dedicated to creating and maintaining the Quantum Design Library for Cigna Healthcare and its B2B marketing analytics platform, Contour Insights.

The Quantum Design Library consisted of style guides, design components, design patterns, React code naming conventions, and documentation. As a Product Designer for Design Systems, this gives me a bird’s eye view of the different digital products that the organization is utilizing.

My team determined that we would build the complexity of each component while working on rebranding projects simultaneously. Our B2B SaaS platforms consisted of Pega and AWS components which were incorporated into the Quantum Design Library.

For the majority of the time, we were working on one component at a time. If you put all components in one file, it slows down Figma. By giving each component its own file, you have the whole history and documentation in one place.

figma-ui-design-system

Rebranding

As part of ongoing growth and evolution at Cigna Healthcare, there was a high priority for rebranding initiatives. There was great significance in consistent and cohesive brand presence for digital and print products.

cigna-healthcare-guidelines
cigna-healthcare-guidelines
cigna-healthcare-guidelines

UI audit of the old UI design library

Through this audit, I identified the following areas of improvement for Quantum Design Library:

  • Grid alignment is not consistent on the website app portal

  • Spacing feels cramped

  • There were inconsistencies in flows which makes the user doubtful

  • Lack of hierarchy as to where the patient files are and how to prioritize each category

  • Lack of clickable text that leads you to the next table

  • Breadcrumbs look redundant and menu is out of alignment

  • Overall lack of consistency, cluttered design, and lack of branding

Creating the Design System

Step #1: Create a Design Foundation

  • Research color theory and psychology to understand the impact of colors on emotions and perceptions
  • Choose a color palette that aligns with the Cigna Healthcare’s target audience
  • Create a primary color scheme and consider additional accent colors
  • Define color values (hex codes, RGB, etc.) for consistency across different design assets
figma-ui-design-system
  • Select appropriate fonts that complement the project’s branding and convey the desired tone
  • Establish hierarchy by assigning different font weights, sizes, and styles (such as bold or italic) for headings, subheadings, body text, and other elements
  • Ensure readability and legibility by testing font combinations and optimizing line spacing, letter spacing, and paragraph length
figma-ui-design-system
  • Set up a grid system that provides structure and alignment for your design
  • Determine the number of the columns and their widths to establish consistent layouts
  • Consider responsive design principles by adapting the grid for different screen sizes
  • Use the grid as a guide to position elements, maintain visual harmony, and create balanced compositions
figma-ui-design-system

figma-ui-design-system
  • Integrate Cigna Healthcare’s logo and ensure its consistent use throughout the design process
  • Determine appropriate placement and size of the logo across different design elements
  • Ensure the logo maintains its visual integrity by adhering to brand guidelines
figma-ui-design-system

figma-ui-design-system

figma-ui-design-system

figma-ui-design-system
  • Create the style of icons that match Cigna Healthcare’s minimalistic aesthetic
  • Create and source a library of icons that serve as a visual representation of actions, objects, or concepts within the design
  • Ensure consistency in iconography style, size and alignment across different screens and components
figma-ui-design-system
  • Identify the types of images required for the Cigna Healthcare brand, such as lifestyle photos, illustrations, or stock images
  • Optimize image quality, size and format for web or print, considering loading times and display capabilities
  • Align images with the overall design aesthetic, ensuring they enhance the user experience and convey the intended message
figma-ui-design-system

figma-ui-design-system

figma-ui-design-system

Throughout the design process, it’s important to regularly review and refine these foundational elements to maintain consistency, cohesiveness, and a strong visual identity across different design assets.

Step #2: Create Components Using the Atomic Design Methodology

The Atomic Design Methodology divides the design process into smaller stages, starting with basic building blocks, like buttons, headings, and form elements, and ending with more complex designs like headers, footers, and entire web pages.

   

Overall, it is a popular approach for web development and design that aims to streamline the process.

Atoms

atom-purple

To create a component using any element, you want to create an atom.

Molecule

molecule-purple

To create another component and group it with an atom, it will create a molecule.

Organism

organism-purple

An organism is a combination of all the molecules and atoms.

It’s important to note that this methodology promotes a systematic and modular approach to UI design, where elements at lower levels (atoms, molecules) are combined to create higher-level components (organisms, pages). This approach enables consistency, reusability, and scalability in the design system.

UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
  • Individual UI elements such as buttons, inputs, icons, labels, and form fields
  • These are the smallest and most fundamental building blocks of the design system
figma-ui-design-system
Collections of atoms that form relatively simple UI components
  • Combinations of atoms that form small, reusable UI components
  • Examples include search bars, navigation menus, dropdowns, and input groups
  • Molecules provide more complex functionality and can be composed of multiple atoms
figma-ui-design-system
Relatively complex components that form discrete sections of an interface
  • Groups of molecules and atoms that form more significant components or sections of a user interface
  • Examples include headers, footers, product cards, and feature panels
  • Organisms represent distinct sections or functional units within a page
figma-ui-design-system

Step #3 Tailor the Contour Insights Dashboard to the AWS Design System

Contour Insights is a marketing analytics platform for Cigna Healthcare that aims to empower marketing teams with actionable insights.

Place components within a layout and demonstrate the design’s underlying content structure
  • Establish overall structure and layout of a page or screen
  • They provide a framework for arranging and positioning components, such as organisms, molecules and atoms
  • Templates ensure consistency and coherence throughout the design system by defining the placement and relationship of UI elements
  • These structures can be reused across multiple pages, allowing for efficient design and development
figma-ui-design-system
Apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system
  • Pages represent specific content or functionality that a user interacts with
  • They are complete layouts or screens composed of various components, including organisms, molecules, and atoms
  • Pages provide context and demonstrate how the UI elements fit together in real-world scenarios
  • Each page serves a unique purpose and showcases the design system’s components in action
  • Designers can create variations of pages to accommodate different content and. user flows while maintaining a consistent design language
figma-ui-design-system

My team and I accessed the AWS design resources and recreated the guidelines as part of our Cigna Healthcare Quantum Design Library. The PNG and SVG assets were the point of reference to create a specific section within our own design system.

Contour Insights -
Marketing Analytics Prototype

What Next?

The UI design system for Cigna Healthcare is a digital encyclopedia that is always being updated. There are going to be times when designers have to go back and edit the features and/or add new components. That is why we named the design system the Quantum Design Library.

Next Steps

  • Make each component section more refined and with variety
  • Expand on the AWS and Pega design systems
  • Label each item in Figma with React.js code naming conventions
  • Continuing to update Quantum Design Library as needed