Building a design system to transform Aetna's digital experience

Project type

UX Design
Design system

Product type

Desktop

Timeline

Sep - Dec 2023

Team

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.

Pulse Design System Figma UI Kit

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?

Inconsistencies

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.

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.

Our process to address the current website issues and create a new design system

1

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.

2

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

3

Documentation

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.

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.

Applying Brad Frost's atomic design to create a component

We formed three principles for the new design system.

Accessibility

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.

Inclusivity

Crafted with empathy, the design embraces inclusivity, ensuring that all users feel seen and empowered through the design system.

Simplicity

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.

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.

Organisms such as cards, navigation were constructed from molecules.

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

Reflection

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