Noelle Ingrisano
Home
Selected work
Building a scalable design system for
a growing financial platform
Miller Display
Semi-bold style
Roman
Aa
Aa
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
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.
scroll
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:
#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.
green / 500
The first pass involved grouping values into primitive-based color tokens, ensuring consistent usage across the product.
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.
scroll
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.
Learn more about me
Next project: Prospect experience
Reach out for collaboration,
consulting, or coffee.
n.ingrisano8@gmail.com
631 901 5556
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.
Learn more about me
Next project: Prospect experience
Reach out for collaboration,
consulting, or coffee.
n.ingrisano8@gmail.com
631 901 5556