Design System
Role
Product Design
/
Company
Vividly
/
Industry
Enterprise Financial Analytics
/
Duration
Ongoing
/
Year
2023
Overview
(00)
As Vividly grew from startup to scale-up, inconsistent patterns across the product created friction for users and slowed feature development. Teams lacked shared components, documentation, and principles.
I led the creation of Vividly's design system to establish consistency, improve usability, and accelerate product development. This included defining design principles, building a component library, establishing governance, and creating adoption pathways.
Samples from an early component audit.
Component library usage was minimal prior to launching Prism (Vividly Design System)
What We Built
(01)
Component Library
Built and documented 1,500+ components in Figma
46,855 component instances added across product files in first year (~3,900 monthly)
Organized by patterns: navigation, forms, data display, feedback, layout
Documentation & Governance
Centralized documentation with automated Slack updates
Design system guild for cross-functional collaboration
Contribution guidelines for designers and engineers
Token system for colors, typography, spacing
Design Principles
Established core principles to guide product decisions:
Accessibility-first: Ensure inclusive experiences through WCAG compliance
Efficient workflows: Reduce cognitive load for complex financial operations
Consistent patterns: Users learn once, apply everywhere
Scalable architecture: Support growing feature complexity
Adoption Strartegy
Refactored existing components to establish baseline patterns
Training and support for design system usage
Monitored implementation across product teams
Iterative refinement based on team feedback
2023 Iterative Improvements
Initially, there wasn't enough bandwidth to address large-scale design system needs. Instead, we focused on addressing high impact elements we could then propagate further into the system. It meant that while Budget didn't get updates initially, we were able to address the tabel and filter components for eventual implementaiton into the budget feature.
2024 Major Enhancements
We gradually aligned the platform functionality, introducing larger changes by easing users into the new layouts. This let us successfully address pain points in components such as filtering, relieving long-standing pain points.
Filter Improvements
Layout and Style Overhauls
Before
After
Impact
(02)
Team Efficiency
Reduced design redundancy across product files
Enabled faster feature development with reusable patterns
Improved designer-developer handoff through shared language
User Experience
Consistent interactions reduced learning curve
Accessibility improvements ensured inclusive design
Pattern reuse improved reliability and reduced edge-case bugs
Organizational
Established foundation for multi-product expansion
Created collaboration framework between design and engineering
Documentation enabled onboarding of new team members
"One thing that's always been an issue is that the elements in Figma don't necessarily correlate to our design system. I noticed with your Auto Assign mockups, they have been. So if that's something you are doing good job lol
Before it was hard for me to tell if, a header was an h4, h5, a caption etc. Your designs tend to have that when I focus on individual elements, which helps me choose what components to use"
—Engineering Lead
Role & Leadership
(04)
Data Management Platform
Led design system strategy and roadmap
Collaborated with engineering to align Figma components with codebase
Facilitated design system guild meetings
Created contribution guidelines and governance processes
Evangelized design system adoption across product teams
Reflections
(05)
The solution reduced cognitive load through familiar patterns and focused workflows
Building a design system at a startup requires balancing documentation with momentum. We prioritized documenting existing patterns first rather than designing ideal-state components, which enabled faster adoption and iteration based on real product needs.
The system became most valuable when it enabled teams to move faster, not when it enforced rigid rules. Treating it as a living system—continuously refined based on product evolution—made it sustainable.
Design System
Role
Product Design
/
Company
Vividly
/
Industry
Enterprise Financial Analytics
/
Duration
Ongoing
/
Year
2023
Overview
(00)
As Vividly grew from startup to scale-up, inconsistent patterns across the product created friction for users and slowed feature development. Teams lacked shared components, documentation, and principles.
I led the creation of Vividly's design system to establish consistency, improve usability, and accelerate product development. This included defining design principles, building a component library, establishing governance, and creating adoption pathways.
Samples from an early component audit.
Component library usage was minimal prior to launching Prism (Vividly Design System)
What We Built
(01)
Component Library
Built and documented 1,500+ components in Figma
46,855 component instances added across product files in first year (~3,900 monthly)
Organized by patterns: navigation, forms, data display, feedback, layout
Documentation & Governance
Centralized documentation with automated Slack updates
Design system guild for cross-functional collaboration
Contribution guidelines for designers and engineers
Token system for colors, typography, spacing
Design Principles
Established core principles to guide product decisions:
Accessibility-first: Ensure inclusive experiences through WCAG compliance
Efficient workflows: Reduce cognitive load for complex financial operations
Consistent patterns: Users learn once, apply everywhere
Scalable architecture: Support growing feature complexity
Adoption Strartegy
Refactored existing components to establish baseline patterns
Training and support for design system usage
Monitored implementation across product teams
Iterative refinement based on team feedback
Initially, there wasn't enough bandwidth to address large-scale design system needs. Instead, we focused on addressing high impact elements we could then propagate further into the system. It meant that while Budget didn't get updates initially, we were able to address the tabel and filter components for eventual implementaiton into the budget feature.
2023 Iterative Improvements
2024 Major Enhancements
Before
After
Filter Improvements
We gradually aligned the platform functionality, introducing larger changes by easing users into the new layouts. This let us successfully address pain points in components such as filtering, relieving long-standing pain points.
Layout and Style Overhauls
Impact
(02)
Team Efficiency
Reduced design redundancy across product files
Enabled faster feature development with reusable patterns
Improved designer-developer handoff through shared language
User Experience
Consistent interactions reduced learning curve
Accessibility improvements ensured inclusive design
Pattern reuse improved reliability and reduced edge-case bugs
Organizational
Established foundation for multi-product expansion
Created collaboration framework between design and engineering
Documentation enabled onboarding of new team members
"One thing that's always been an issue is that the elements in Figma don't necessarily correlate to our design system. I noticed with your Auto Assign mockups, they have been. So if that's something you are doing good job lol
Before it was hard for me to tell if, a header was an h4, h5, a caption etc. Your designs tend to have that when I focus on individual elements, which helps me choose what components to use"
—Engineering Lead
Role & Leadership
(04)
Data Management Platform
Led design system strategy and roadmap
Collaborated with engineering to align Figma components with codebase
Facilitated design system guild meetings
Created contribution guidelines and governance processes
Evangelized design system adoption across product teams
Reflections
(05)
The solution reduced cognitive load through familiar patterns and focused workflows
Building a design system at a startup requires balancing documentation with momentum. We prioritized documenting existing patterns first rather than designing ideal-state components, which enabled faster adoption and iteration based on real product needs.
The system became most valuable when it enabled teams to move faster, not when it enforced rigid rules. Treating it as a living system—continuously refined based on product evolution—made it sustainable.
Overview
(00)
As Vividly grew from startup to scale-up, inconsistent patterns across the product created friction for users and slowed feature development. Teams lacked shared components, documentation, and principles.
I led the creation of Vividly's design system to establish consistency, improve usability, and accelerate product development. This included defining design principles, building a component library, establishing governance, and creating adoption pathways.
Samples from an early component audit.
Component library usage was minimal prior to launching Prism (Vividly Design System)
Impact
(02)
Team Efficiency
Reduced design redundancy across product files
Enabled faster feature development with reusable patterns
Improved designer-developer handoff through shared language
User Experience
Consistent interactions reduced learning curve
Accessibility improvements ensured inclusive design
Pattern reuse improved reliability and reduced edge-case bugs
Organizational
Established foundation for multi-product expansion
Created collaboration framework between design and engineering
Documentation enabled onboarding of new team members
"One thing that's always been an issue is that the elements in Figma don't necessarily correlate to our design system. I noticed with your Auto Assign mockups, they have been. So if that's something you are doing good job lol
Before it was hard for me to tell if, a header was an h4, h5, a caption etc. Your designs tend to have that when I focus on individual elements, which helps me choose what components to use"
—Engineering Lead
Role & Leadership
(04)
Data Management Platform
Led design system strategy and roadmap
Collaborated with engineering to align Figma components with codebase
Facilitated design system guild meetings
Created contribution guidelines and governance processes
Evangelized design system adoption across product teams
Reflections
(05)
The solution reduced cognitive load through familiar patterns and focused workflows
Building a design system at a startup requires balancing documentation with momentum. We prioritized documenting existing patterns first rather than designing ideal-state components, which enabled faster adoption and iteration based on real product needs.
The system became most valuable when it enabled teams to move faster, not when it enforced rigid rules. Treating it as a living system—continuously refined based on product evolution—made it sustainable.
What We Built
(01)
Component Library
Built and documented 1,500+ components in Figma
46,855 component instances added across product files in first year (~3,900 monthly)
Organized by patterns: navigation, forms, data display, feedback, layout
Design Principles
Established core principles to guide product decisions:
Accessibility-first: Ensure inclusive experiences through WCAG compliance
Efficient workflows: Reduce cognitive load for complex financial operations
Consistent patterns: Users learn once, apply everywhere
Scalable architecture: Support growing feature complexity
Documentation & Governance
Centralized documentation with automated Slack updates
Design system guild for cross-functional collaboration
Contribution guidelines for designers and engineers
Token system for colors, typography, spacing
Adoption Strartegy
Refactored existing components to establish baseline patterns
Training and support for design system usage
Monitored implementation across product teams
Iterative refinement based on team feedback
Initially, there wasn't enough bandwidth to address large-scale design system needs. Instead, we focused on addressing high impact elements we could then propagate further into the system. It meant that while Budget didn't get updates initially, we were able to address the tabel and filter components for eventual implementaiton into the budget feature.
2023 Iterative Improvements
2024 Major Enhancements
Layout and Style Overhauls
Before
After
Filter Improvements
We gradually aligned the platform functionality, introducing larger changes by easing users into the new layouts. This let us successfully address pain points in components such as filtering, relieving long-standing pain points.
Design System
Role
Product Design
/
Company
Vividly
/
Industry
Enterprise Financial Analytics
/
Duration
Ongoing
/
Year
2023