EX Program UI Components

EX Program UI Components

Documented and rebuilt missing UI components to align the design system with the newly launched brand.


After the EX Program’s visual rebrand went live, the design team wanted to ensure all components were fully documented and accessible within our Figma design library. While many components had been updated, a few key elements were still being added to the library to support ongoing consistency and streamline collaboration.

Company

Truth Initiative - EX Program

Date

2025

Industry

Digital Health

Scope of work

UX/UI

Product Design

Problem

Some key components were live on the rebranded site but hadn’t yet been created or documented in the Figma design library.

Opportunity

With the new branding live, it was a great chance to make the design system better by adding all the live components into Figma—giving the team an easy, organized way to work and keep things consistent going forward.


Research

To begin, I spoke with the product design team to better understand what information would be most valuable for users to view and update. These conversations also helped clarify what types of data we could collect to improve the user experience.


Afterward, I conducted preliminary research to identify best practices for gathering and organizing this type of user information effectively.

Process starts

To begin, I spoke with the product design team to better understand what information would be most valuable for users to view and update. These conversations also helped clarify what types of data we could collect to improve the user experience.


Afterward, I conducted preliminary research to identify best practices for gathering and organizing this type of user information effectively.

To accurately recreate these components at scale, I leveraged Chrome DevTools to:

  • Inspect styles and layout properties directly from the live site.

  • Reference computed styles like spacing, typography, and colors.

  • Ensure precise alignment with the rebrand’s updated standards.

Solution

To create the missing components into Figma, I inspected the live site using Chrome Dev Tools to grab exact styles—like spacing, font sizes, and colors. I used this info to rebuild each component in Figma to match what users actually see on the site.


Then I organized everything into a clean, scalable library using Auto Layout and Variants, so the team can easily find and reuse components that follow our updated design standards. The components are now found in the Design System Library.

It’s now a reliable go-to resource that keeps everyone on the same page.

Go Back to the Top

Go Back to the Top