Noelle Ingrisano

Home

Selected work

Building a scalable design system for a growing financial platform

Primary Colors

secondary/dark

#0D4943

secondary/light

#126159

primary/default

#007A4C

primary/light

#1BA055

text/primary/darkest

#181A1D

text/primary/dark

#505E68

text/primary/medium

#788091

text/primary/defualt

#BCC0C8

text/primary/light

#D7D9DE

Miller Display

Semi-bold style

Roman

Aa

Aa

H1

Miller Display

Semibold

Insights Hero Title (L/M)

Body2Medium

Univers Next Variable

Medium

Core Body & Subtitle Style

Overview

Bessemer Trust, a 115-year-old financial institution, was modernizing its client dashboard to better serve next-generation users and support future growth. As the design and development teams expanded, inconsistent design patterns began causing inefficiencies and slowing delivery. We consolidated and restructured key parts of the design system, bringing clarity, consistency, and momentum to the team’s workflow.

The problem

With Bessemer's platform evolving and more teams contributing, our lack of a unified design system began to surface real friction — slowing down production, muddying communication, and creating inconsistencies across the product.

Design decisions were delayed.

Designers & developers wasted time recreating components & debating standards- not solving problems.

Developer handoffs were inefficient

Without documented components, engineering handoff was error-prone and required extra clarification or rework.

Visual and interaction inconsistencies

Without the design system, visual and interaction patterns became inconsistent across the product.

User experience degradation

Inconsistent UI patterns confused users and reduced trust our product’s reliability.

Approach

Auditing & simplifying the design foundation

We began with a cross-team audit to surface redundancies and opportunities to streamline the system. I helped guide this process to ensure the foundation would scale with the team. Using atomic design principles, we mapped components from atoms to organisms, streamlining and scaling the system to improve clarity and maintainability.

 

As the system matured, we began incorporating design tokens and Figma variables to introduce a more structured naming convention and better organization. We rolled this out in phases, allowing time to validate naming logic and ease of adoption across teams.

Example color used in component:

Button Example

Token process:

green / 500

The first pass involved grouping values into primitive-based color tokens, ensuring consistent usage across the product.

#007A4C

primary / default

green / 300

The system initially contained a mix of raw color values and inconsistent naming. We identified opportunities to centralize and simplify.

primary / default

During system buildout, we introduced structured naming conventions for tokens to support future scalability and clarity.

Work in progress: Figma variables

primary / default / surface / action-hover

We’re now expanding token structure using Figma variables to align design and development environments more seamlessly.

Resolving typographic debt

I led a cross-functional effort to address inconsistent font usage and technical friction caused by the existing typeface (Univers), which often required 2px manual adjustments for alignment. By partnering with engineering, we proposed a new type system that improved consistency, reduced visual bugs, and eliminated workarounds — balancing design quality with implementation ease.

While the branding team ultimately decided to retain Univers, the exploration surfaced critical issues and led to improved alignment strategies and documentation that minimized friction moving forward.

This effort wasn’t just about choosing a font — it was about aligning design and engineering teams around a shared solution.

 

This work highlights the collaborative exploration and leadership behind our typography evaluation, and how we advocated for meaningful improvements

Standardizing system pages for scale

To support adoption, a standardized page structure was established across the design system.

Each component page includes margin guidance, type specs, color tokens, usage rules, and in-context examples — enabling teams to apply components with confidence and accuracy.

 

This structure reduced ambiguity, sped up onboarding, and helped scale the system as it evolved.

Keeping the design system updated & organized

I established an outline for keeping the design system up to date. This included creating a shared chart for designers and developers to track updates and ensure consistency.

 

I also documented the process for updating the system, so future team members could maintain it and avoid future inconsistencies.

Foundations

Backgrounds & Logos

Breakpoints & Spacing

Color Palettes

Elevations

Iconography

Typefaces

Type Scale

MUI Components

Alert Banners

Buttons

Checkboxes

Data Visualizations

Date Picker

Dialogs

Generic Cards

Popovers & Menus

Progress Indicator

Radio Buttons

Search Fields & Filters

Skeleton Loader

Switches

Tabs & Tab Groups

Tables

Time Picker

Text Fields & Pin Entry

Toggle Buttons

Tooltips

Unique Components

Account Navigation

Article Previews

Insight Page Elements

Notification Popovers

Left Rail

Site Header + Mobile Menu

Site Footer

Total Assets Cards

ALERT BANNERS

LAST UPDATED:

04/04/2024

....

Results & team impact

The design system became the centralized source of truth and a shared foundation for product teams.

The design system became a shared foundation for both design and engineering.

I led the rollout and alignment strategy, resulting in 100% adoption.

It improved design consistency and reduced redundant pattern creation.

Design QA issues related to inconsistent UI dropped significantly across core flows.

It reduced friction in design-to-dev handoff and sped up implementation.

Engineering leads reported a 30% decrease in back-and-forth during component implementation.

It created a foundation for scaling design efficiently across teams and products.

The system reduced duplication and made it easier to introduce new features without reinventing patterns.

Key learnings

What stood out most in this work wasn’t just the system we built — it was how we built it. Working closely with engineers, designers, and partners reminded me that the real impact comes from shared understanding and trust. Clear structure helped teams move with more confidence, and even when we hit constraints, the act of aligning around a common goal made the work stronger and more meaningful.

Next project: Prospect experience

Reach out for collaboration,
consulting, or coffee.

n.ingrisano8@gmail.com

Noelle Ingrisano

Home

Selected work

Building a scalable design system for a growing financial platform

Primary Colors

secondary/dark

#0D4943

secondary/light

#126159

primary/default

#007A4C

primary/light

#1BA055

text/primary/darkest

#181A1D

text/primary/dark

#505E68

text/primary/medium

#788091

text/primary/defualt

#BCC0C8

text/primary/light

#D7D9DE

Miller Display

Semi-bold style

Roman

Aa

Aa

H1

Miller Display

Semibold

Insights Hero Title (L/M)

Body2Medium

Univers Next Variable

Medium

Core Body & Subtitle Style

Overview

Bessemer Trust, a 115-year-old financial institution, was modernizing its client dashboard to better serve next-generation users and support future growth. As the design and development teams expanded, inconsistent design patterns began causing inefficiencies and slowing delivery. We consolidated and restructured key parts of the design system, bringing clarity, consistency, and momentum to the team’s workflow.

The problem

With Bessemer's platform evolving and more teams contributing, our lack of a unified design system began to surface real friction — slowing down production, muddying communication, and creating inconsistencies across the product.

Design decisions were delayed.

Designers & developers wasted time recreating components & debating standards- not solving problems.

Developer handoffs were inefficient

Without documented components, engineering handoff was error-prone and required extra clarification or rework.

Visual and interaction inconsistencies

Without the design system, visual and interaction patterns became inconsistent across the product.

User experience degradation

Inconsistent UI patterns confused users and reduced trust our product’s reliability.

Approach

Auditing & simplifying the design foundation

We began with a cross-team audit to surface redundancies and opportunities to streamline the system. I helped guide this process to ensure the foundation would scale with the team. Using atomic design principles, we mapped components from atoms to organisms, streamlining and scaling the system to improve clarity and maintainability.

 

As the system matured, we began incorporating design tokens and Figma variables to introduce a more structured naming convention and better organization. We rolled this out in phases, allowing time to validate naming logic and ease of adoption across teams.

Example color used in component:

Button Example

Token process:

green / 500

The first pass involved grouping values into primitive-based color tokens, ensuring consistent usage across the product.

#007A4C

primary / default

green / 300

The system initially contained a mix of raw color values and inconsistent naming. We identified opportunities to centralize and simplify.

primary / default

During system buildout, we introduced structured naming conventions for tokens to support future scalability and clarity.

Work in progress: Figma variables

primary / default / surface / action-hover

We’re now expanding token structure using Figma variables to align design and development environments more seamlessly.

Resolving typographic debt

I led a cross-functional effort to address inconsistent font usage and technical friction caused by the existing typeface (Univers), which often required 2px manual adjustments for alignment. By partnering with engineering, we proposed a new type system that improved consistency, reduced visual bugs, and eliminated workarounds — balancing design quality with implementation ease.

While the branding team ultimately decided to retain Univers, the exploration surfaced critical issues and led to improved alignment strategies and documentation that minimized friction moving forward.

This effort wasn’t just about choosing a font — it was about aligning design and engineering teams around a shared solution.

 

This work highlights the collaborative exploration and leadership behind our typography evaluation, and how we advocated for meaningful improvements

Standardizing system pages for scale

To support adoption, a standardized page structure was established across the design system.

Each component page includes margin guidance, type specs, color tokens, usage rules, and in-context examples — enabling teams to apply components with confidence and accuracy.

 

This structure reduced ambiguity, sped up onboarding, and helped scale the system as it evolved.

Keeping the design system updated & organized

I established an outline for keeping the design system up to date. This included creating a shared chart for designers and developers to track updates and ensure consistency.

 

I also documented the process for updating the system, so future team members could maintain it and avoid future inconsistencies.

Foundations

Backgrounds & Logos

Breakpoints & Spacing

Color Palettes

Elevations

Iconography

Typefaces

Type Scale

MUI Components

Alert Banners

Buttons

Checkboxes

Data Visualizations

Date Picker

Dialogs

Generic Cards

Popovers & Menus

Progress Indicator

Radio Buttons

Search Fields & Filters

Skeleton Loader

Switches

Tabs & Tab Groups

Tables

Time Picker

Text Fields & Pin Entry

Toggle Buttons

Tooltips

Unique Components

Account Navigation

Article Previews

Insight Page Elements

Notification Popovers

Left Rail

Site Header + Mobile Menu

Site Footer

Total Assets Cards

ALERT BANNERS

LAST UPDATED:

04/04/2024

....

Results & team impact

The design system became the centralized source of truth and a shared foundation for product teams.

The design system became a shared foundation for both design and engineering.

I led the rollout and alignment strategy, resulting in 100% adoption.

It improved design consistency and reduced redundant pattern creation.

Design QA issues related to inconsistent UI dropped significantly across core flows.

It reduced friction in design-to-dev handoff and sped up implementation.

Engineering leads reported a 30% decrease in back-and-forth during component implementation.

It created a foundation for scaling design efficiently across teams and products.

The system reduced duplication and made it easier to introduce new features without reinventing patterns.

Key learnings

What stood out most in this work wasn’t just the system we built — it was how we built it. Working closely with engineers, designers, and partners reminded me that the real impact comes from shared understanding and trust. Clear structure helped teams move with more confidence, and even when we hit constraints, the act of aligning around a common goal made the work stronger and more meaningful.

Next project: Prospect experience

Reach out for collaboration,
consulting, or coffee.

n.ingrisano8@gmail.com

Noelle Ingrisano

Home

Selected work

Building a scalable design system for
a growing financial platform

Primary Colors

secondary/dark

#0D4943

secondary/light

#126159

primary/default

#007A4C

primary/light

#1BA055

text/primary/darkest

#181A1D

text/primary/dark

#505E68

text/primary/medium

#788091

text/primary/defualt

#BCC0C8

text/primary/light

#D7D9DE

Miller Display

Semi-bold style

Roman

Aa

Aa

H1

Miller Display

Semibold

Insights Hero Title (L/M)

Body2Medium

Univers Next Variable

Medium

Core Body & Subtitle Style

Overview

Bessemer Trust, a 115-year-old financial institution, was modernizing its client dashboard to better serve next-generation users and support future growth. As the design and development teams expanded, inconsistent design patterns began causing inefficiencies and slowing delivery. We consolidated and restructured key parts of the design system, bringing clarity, consistency, and momentum to the team’s workflow.

The problem

With Bessemer's platform evolving and more teams contributing, our lack of a unified design system began to surface real friction — slowing down production, muddying communication, and creating inconsistencies across the product.

Design decisions were delayed.

Designers & developers wasted time recreating components & debating standards- not solving problems.

Developer handoffs were inefficient

Without documented components, engineering handoff was error-prone and required extra clarification or rework.

Visual and interaction inconsistencies

Without the design system, visual and interaction patterns became inconsistent across the product.

User experience degradation

Inconsistent UI patterns confused users and reduced trust our product’s reliability.

Approach

Auditing & simplifying the design foundation

We began with a cross-team audit to surface redundancies and opportunities to streamline the system. I helped guide this process to ensure the foundation would scale with the team. Using atomic design principles, we mapped components from atoms to organisms, streamlining and scaling the system to improve clarity and maintainability.

 

As the system matured, we began incorporating design tokens and Figma variables to introduce a more structured naming convention and better organization. We rolled this out in phases, allowing time to validate naming logic and ease of adoption across teams.

Example color used in component:

Button Example

Token process:

green / 500

The first pass involved grouping values into primitive-based color tokens, ensuring consistent usage across the product.

#007A4C

primary / default

green / 300

The system initially contained a mix of raw color values and inconsistent naming. We identified opportunities to centralize and simplify.

primary / default

During system buildout, we introduced structured naming conventions for tokens to support future scalability and clarity.

Work in progress: Figma variables

primary / default / surface / action-hover

We’re now expanding token structure using Figma variables to align design and development environments more seamlessly.

Resolving typographic debt

I led a cross-functional effort to address inconsistent font usage and technical friction caused by the existing typeface (Univers), which often required 2px manual adjustments for alignment. By partnering with engineering, we proposed a new type system that improved consistency, reduced visual bugs, and eliminated workarounds — balancing design quality with implementation ease.

While the branding team ultimately decided to retain Univers, the exploration surfaced critical issues and led to improved alignment strategies and documentation that minimized friction moving forward.

This effort wasn’t just about choosing a font — it was about aligning design and engineering teams around a shared solution.

 

This work highlights the collaborative exploration and leadership behind our typography evaluation, and how we advocated for meaningful improvements

Standardizing system pages for scale

To support adoption, a standardized page structure was established across the design system.

Each component page includes margin guidance, type specs, color tokens, usage rules, and in-context examples — enabling teams to apply components with confidence and accuracy.

 

This structure reduced ambiguity, sped up onboarding, and helped scale the system as it evolved.

Keeping the design system updated & organized

I established an outline for keeping the design system up to date. This included creating a shared chart for designers and developers to track updates and ensure consistency.

 

I also documented the process for updating the system, so future team members could maintain it and avoid future inconsistencies.

Foundations

Backgrounds & Logos

Breakpoints & Spacing

Color Palettes

Elevations

Iconography

Typefaces

Type Scale

MUI Components

Alert Banners

Buttons

Checkboxes

Data Visualizations

Date Picker

Dialogs

Generic Cards

Popovers & Menus

Progress Indicator

Radio Buttons

Search Fields & Filters

Skeleton Loader

Switches

Tabs & Tab Groups

Tables

Time Picker

Text Fields & Pin Entry

Toggle Buttons

Tooltips

Unique Components

Account Navigation

Article Previews

Insight Page Elements

Notification Popovers

Left Rail

Site Header + Mobile Menu

Site Footer

Total Assets Cards

ALERT BANNERS

LAST UPDATED:

04/04/2024

....

Results & team impact

The design system became the centralized source of truth and a shared foundation for product teams.

The design system became a shared foundation for both design and engineering.

I led the rollout and alignment strategy, resulting in 100% adoption.

It improved design consistency and reduced redundant pattern creation.

Design QA issues related to inconsistent UI dropped significantly across core flows.

It reduced friction in design-to-dev handoff and sped up implementation.

Engineering leads reported a 30% decrease in back-and-forth during component implementation.

It created a foundation for scaling design efficiently across teams and products.

The system reduced duplication and made it easier to introduce new features without reinventing patterns.

Key learnings

What stood out most in this work wasn’t just the system we built — it was how we built it. Working closely with engineers, designers, and partners reminded me that the real impact comes from shared understanding and trust. Clear structure helped teams move with more confidence, and even when we hit constraints, the act of aligning around a common goal made the work stronger and more meaningful.

Next project: Prospect experience

Reach out for collaboration,
consulting, or coffee.

n.ingrisano8@gmail.com