Cara header image

Building a design system to transform Aetna's digital experience

Project type
UX Design
Design system
Product type
Sep - Dec 2023
Hailee Hoa Luong (me)
Srishti Dokras
Yiying Zhou
My role
Project Lead
UX Designer
UI Designer
Project Overview
Founded in 1853, Aetna is one of the largest health insurance providers in the United States that offers a range of health insurance products and services. Despite being acquired by CVS Health in 2018, Aetna operates their own website, which
provides tools and resources to help users explore and choose health insurance plans that suit their needs.

Our team of designers created a design system that leverages the brand identity, improves the consistency & accessibility on Aetna Individuals and Families website, ensuring users navigate it more easily, and instinctively trust the business.
Image of the team
Our team pitching the design system to the hypothetical audience of Aetna designers, developers, product managers (Left to right: Yiying, Hailee (me), Srishti)
Why does Aetna need a design system?
Our research shows that Aetna has developed their own design system called Anatomy before, and now in the process of transitioning to the new Enterprise Design System. However, their latest was from 2021, and there is no evidence of a comprehensive design system implemented on the current Aetna's Individuals and Families website.

Our UI audit identifies numerous inconsistencies in design and accessibility issues. Users may find it challenging to have a smooth journey, or align the website with a cohesive brand identity, which negatively affect their trust for the company.
Image pointing out inconsistencies on Aetna website
Accessibility issues
Specifically, the existing website does not comply with WCAG guidelines in terms of colors, icon designs, and layout, which potentially excluding users with disabilities from accessing vital health information and services. Moreover, the lack of adherence to a unified design system makes UI development time-consuming, as teams often recreate similar components and features for each page. This lack of reusability could affect team efficiency and potentially lengthen development process.
Image pointing out accessibility issues and inconsistencies on Aetna website
Our process to address the current website issues and create a new design system
UI Inventory
Deconstruct the current Aetna's Individuals and Families website.

Catalog a comprehensive collection of all the elements, styles, and components that make up an interface.

Look for patterns and inconsistencies in how those elements are used.
Components Library
Create a library of usable and accessible UI components, and design styles in Figma based on the UI inventory.

Publish the UI kit.

Test the UI kit with users

Create a document site that articulate design guidelines, styles, and how to apply each component to elevate accessibility on the Aetna Individuals and Families website.
We identified patterns and inconsistencies on the current site by conducting an interface inventory.
Follow Brad Frost's basic steps for creating an interface inventory, we go through the original interface and take screenshots of  UI component, including headings, text fields, forms, carousels, tabs, images, icons, etc. These screenshots were categorized so that we could see all the various treatments of each component side-by-side and ultimately look for patterns and inconsistencies.

An evaluation was also performed to find out the accessibility issues on the website.
UI inventory
We created a comprehensive collection of usable and accessible UI components and publish as a Figma UI kit.
The Atomic Design Methodology was used as our main approach for creating components.

This method of gradually breaking down an interface into smaller building blocks: page, template, organisms, molecules, atoms was very helpful for us to form a system thinking, and eventually construct a system in a systematically way.
process of creating a component
Applying Brad Frost's atomic design to create a component
We formed three principles for the new design system.
accessibility icon
Adhering to the WCAG 2.2 guidelines to ensure the accessibility of each element.

Catering to users with diverse needs ensuring the creation of a digitally accessible environment.
inclusive community icon
Crafted with empathy, the design embraces inclusivity, ensuring that all users feel seen and empowered through the design system.
light bulb icon
Focus on the core functions of each design element, and ensure the design meet its intended goals and resonate with its target audience.
The foundational styles were established to served as atom in the design system.
We got started on the foundational blocks of a design system: color, typography, grid systems, spacing.
foundational elements of the design system
New iconography created for all users
Our icon set was created to address the accessibility issues caused by the original icons. The new icons are more simplified in terms of colors, and details, and adhere to the WCAG guidelines of color contrast.
icon set
Molecules were created from atom, forming the component library.
From the foundational atoms, more complex components were created, including buttons, form elements, interactive elements such as search bar, tabs, accordion, dropdown, pagination, etc.
molecules created from atoms
Organisms such as cards, navigation were constructed from molecules.
card design and navigation
Finally, a webpage created from the new components in the design system with a clean, cohesive look, and become more accessible for users
a webpage before and after applying the design system
A design system is not complete without a proper documentation.
Documenting the system is a key step to make sure what we created is usable and understandable. Using zeroheight as the platform to publish the documentation, we explain in detail the principles, guidelines, and usage of each component. The ultimate goal is to help users understand the system and apply it to their design faster.

The site also provides helpful resources to ensure your customized designs meet accessibility standards, and a contact for users to provide feedback, or contribute to the design system.
screenshot of the design system documentation
Our documentation site, which articulates design guidelines, styles, and how to apply each component, is a great start for any users who want to utilize Pulse
What I learnt
This project introduced me to atomic design and system thinking, which enhances my ability to construct a mental model for design and approach user problems more methodically.
I also learnt the method and process of constructing design system,  the key role of a design system in creating inclusive, accessible design. Most importantly, I understand now that documentation is an essential part that contributes to the success of a design system.

Teamwork makes the dream work

Crafting a design system is a complicated task that demands multitude of skills and diligent effort. Pulse design system is an outcome of a collective effort. I am grateful for having teammates who were dedicated and committed to the project. Our clear communication and shared objectives created a seamless collaboration and helped the team deliver a high quality result.

If I have another chance
If I had more time and resources to start this project, I would implement "variables" in the design system, and collaborate with a developer to gain their insights, and create a design system that support the work of both designers and developers.
team members discussing while using laptop
Our group work together to build the Pulse design system