Kinetic Design System
In-house design system development
Kinetic Design System
In-house design system development
Kinetic Design System
In-house design system development
Cardinal Financial
Multi-channel Mortgage Company
UX Product Designer
with 3 Product Designers, 4 Front-end Engineers, and 3 Product Managers
UI Design
Figma, GitLab, Storybook
Sep 2022 - Mar 2024
Cardinal Financial
Multi-channel Mortgage Company
UX Product Designer
with 3 Product Designers, 4 Front-end Engineers, and 3 Product Managers
UI Design
Figma, GitLab, Storybook
Sep 2022 - Mar 2024
Cardinal Financial
Multi-channel Mortgage Company
UX Product Designer
with 3 Product Designers, 4 Front-end Engineers, and 3 Product Managers
UI Design
Figma, GitLab, Storybook
Sep 2022 - Mar 2024
Background
Cardinal Financial aimed to make its loan origination software, Octane, easy to rebrand for other companies and sell as a SaaS product.
However, Octane’s front-end lacked components and design tokens, making even simple color palette changes difficult.
The company had outsourced designers but faced challenges in communication, organization, and implementation. I was hired to develop the design system and serve as an internal UX consultant for product analysts.
Kinetic Design System Overview
Cardinal Financial aimed to make its loan origination software, Octane, easy to rebrand for other companies and sell as a SaaS product.
However, Octane’s front-end lacked components and design tokens, making even simple color palette changes difficult.
The company had outsourced designers but faced challenges in communication, organization, and implementation. I was hired to develop the design system and serve as an internal UX consultant for product analysts.
Kinetic Design System Overview
Background
Cardinal Financial aimed to make its loan origination software, Octane, easy to rebrand for other companies and sell as a SaaS product.
However, Octane’s front-end lacked components and design tokens, making even simple color palette changes difficult.
The company had outsourced designers but faced challenges in communication, organization, and implementation. I was hired to develop the design system and serve as an internal UX consultant for product analysts.
Kinetic Design System Overview
Background
Challenges & Approach
Accessibility Issues
The outsourced team produced visually appealing designs, but accessibility was not considered, especially in colors. For example, text elements did not meet the required contrast ratios, occasionally falling below the 7.0 standard and sometimes even below 4.5. Image 1.1
Fragmented Design Elements
Despite the cohesive visual style the outsourced team had created, the design lacked a structured component library and was not optimized for development. Design elements were positioned manually with either absolute position or wrong constraints. Most of the "finished designs" were not connected to the library, making it hard to update whenever there's a design system update. Video 1.1
Presenting Solutions
I created WCAG 2.1-compliant color palettes, component-based design structures, and a Figma demo file. I presented it to senior management, highlighting:
The importance of accessibility in financial services and SaaS.
Future cost risks if the design system remained overlooking accessbility (e.g., a possible scenario of using the design system in customer-facing websites and getting CFPB audits).
A low-cost, structured approach to fixing these issues with the demos I prepared, showing how much time each task would cost to complete.
Image 1.1 - Existing Components
Video 1.1 - Accessible Color Showcase
Accessibility Issues
The outsourced team produced visually appealing designs, but accessibility was not considered, especially in colors. For example, text elements did not meet the required contrast ratios, occasionally falling below the 7.0 standard and sometimes even below 4.5. Image 1.1
Fragmented Design Elements
Despite the cohesive visual style the outsourced team had created, the design lacked a structured component library and was not optimized for development. Design elements were positioned manually with either absolute position or wrong constraints. Most of the "finished designs" were not connected to the library, making it hard to update whenever there's a design system update. Video 1.1
Presenting Solutions
I created WCAG 2.1-compliant color palettes, component-based design structures, and a Figma demo file. I presented it to senior management, highlighting:
The importance of accessibility in financial services and SaaS.
Future cost risks if the design system remained overlooking accessbility (e.g., a possible scenario of using the design system in customer-facing websites and getting CFPB audits).
A low-cost, structured approach to fixing these issues with the demos I prepared, showing how much time each task would cost to complete.
Image 1.1 - Existing Components
Video 1.1 - Accessible Color Showcase
Challenges & Approach
Accessibility Issues
The outsourced team produced visually appealing designs, but accessibility was not considered, especially in colors. For example, text elements did not meet the required contrast ratios, occasionally falling below the 7.0 standard and sometimes even below 4.5. Image 1.1
Fragmented Design Elements
Despite the cohesive visual style the outsourced team had created, the design lacked a structured component library and was not optimized for development. Design elements were positioned manually with either absolute position or wrong constraints. Most of the "finished designs" were not connected to the library, making it hard to update whenever there's a design system update. Video 1.1
Presenting Solutions
I created WCAG 2.1-compliant color palettes, component-based design structures, and a Figma demo file. I presented it to senior management, highlighting:
The importance of accessibility in financial services and SaaS.
Future cost risks if the design system remained overlooking accessbility (e.g., a possible scenario of using the design system in customer-facing websites and getting CFPB audits).
A low-cost, structured approach to fixing these issues with the demos I prepared, showing how much time each task would cost to complete.
Image 1.1 - Existing Components
Video 1.1 - Accessible Color Showcase
Challenges & Approach
Process & Execution
Laying the Foundation
Before developing components, the lead front-end engineer and I defined key principles:
Audit the product’s existing components and specifications.
Prioritize small components before assembling complex components.
Record why we made the decisions and how we created the components.
Auditing the Existing Product
The goal of auditing was to map all use cases and prepare for future UX improvements. I categorized and documented existing components, layouts, and patterns. After each component's auditing is done, our team gathered and decided on the name and function of the component. Image 2.1
Building the Atomic Design System
With Atomic Design principles, I created tokens and atom components first, atom components were used to create bigger components, molecule and organism components. In Figma, smaller components inside of bigger components are all connected, making design updates easy.
Structured token hierarchy
The token naming convention was set for scalability, preparing future updates in components and in token structures. Initially, we used primitive tokens and two different component token types. Later, I advocated for semantic tokens to enable easier control over the components, making theming across brands faster and more precise. Image 2.2, Image 2.3
Documentation with the team
At the beginning of the project, to maintain the momentum of early development and make work process better for front-end engineers, I prioritized designing. However, I documented UX considerations behind, use-cases in existing products, token values, and component structures. Image 2.4, Image 2.5
We expanded the documentation as the UX/Product designer team grew, refining it collaboratively. Later, I created checklists for documentation, accessibility, usability, and Figma component setup.
Image 2.1 - Component Audit Sample
Image 2.2 - Token Naming Convention and Example
Image 2.3 - Prototype (HTML/CSS, ASP)
Image 2.4 - Documentation Sample
Image 2.5 - Handoff Sample
Laying the Foundation
Before developing components, the lead front-end engineer and I defined key principles:
Audit the product’s existing components and specifications.
Prioritize small components before assembling complex components.
Record why we made the decisions and how we created the components.
Auditing the Existing Product
The goal of auditing was to map all use cases and prepare for future UX improvements. I categorized and documented existing components, layouts, and patterns. After each component's auditing is done, our team gathered and decided on the name and function of the component. Image 2.1
Building the Atomic Design System
With Atomic Design principles, I created tokens and atom components first, atom components were used to create bigger components, molecule and organism components. In Figma, smaller components inside of bigger components are all connected, making design updates easy.
Structured token hierarchy
The token naming convention was set for scalability, preparing future updates in components and in token structures. Initially, we used primitive tokens and two different component token types. Later, I advocated for semantic tokens to enable easier control over the components, making theming across brands faster and more precise. Image 2.2, Image 2.3
Documentation with the team
At the beginning of the project, to maintain the momentum of early development and make work process better for front-end engineers, I prioritized designing. However, I documented UX considerations behind, use-cases in existing products, token values, and component structures. Image 2.4, Image 2.5
We expanded the documentation as the UX/Product designer team grew, refining it collaboratively. Later, I created checklists for documentation, accessibility, usability, and Figma component setup.
Image 2.1 - Component Audit Sample
Image 2.2 - Token Naming Convention and Example
Image 2.3 - Prototype (HTML/CSS, ASP)
Image 2.4 - Documentation Sample
Image 2.5 - Handoff Sample
Process & Execution
Laying the Foundation
Before developing components, the lead front-end engineer and I defined key principles:
Audit the product’s existing components and specifications.
Prioritize small components before assembling complex components.
Record why we made the decisions and how we created the components.
Auditing the Existing Product
The goal of auditing was to map all use cases and prepare for future UX improvements. I categorized and documented existing components, layouts, and patterns. After each component's auditing is done, our team gathered and decided on the name and function of the component. Image 2.1
Building the Atomic Design System
With Atomic Design principles, I created tokens and atom components first, atom components were used to create bigger components, molecule and organism components. In Figma, smaller components inside of bigger components are all connected, making design updates easy.
Structured token hierarchy
The token naming convention was set for scalability, preparing future updates in components and in token structures. Initially, we used primitive tokens and two different component token types. Later, I advocated for semantic tokens to enable easier control over the components, making theming across brands faster and more precise. Image 2.2, Image 2.3
Documentation with the team
At the beginning of the project, to maintain the momentum of early development and make work process better for front-end engineers, I prioritized designing. However, I documented UX considerations behind, use-cases in existing products, token values, and component structures. Image 2.4, Image 2.5
We expanded the documentation as the UX/Product designer team grew, refining it collaboratively. Later, I created checklists for documentation, accessibility, usability, and Figma component setup.
Image 2.1 - Component Audit Sample
Image 2.2 - Token Naming Convention and Example
Image 2.3 - Prototype (HTML/CSS, ASP)
Image 2.4 - Documentation Sample
Image 2.5 - Handoff Sample
Process & Execution
More Than Just Components
Organized Design File Management
I structured Figma files to serve as the single source of truth:
Feature design files used the Figma library.
Once finalized, updates in the design files were pushed to the master design file.
And each design files have Asana task links as its thumbnail, visualize its status.
I wanted to utilize the branch feature in Figma, however, at the time, it had too many bugs and caused issues, slowing down and frustrating designers. Image 3.1
Advanced Figma Utilization
For rich-content components (e.g., popovers), I implemented a “slot” approach inspired by Salesforce’s Lightning Design System, allowing content swapping without detaching components.
Once Figma Variables were introduced, I quickly reorganized components and collaborated with engineers to enable JSON token exports, making design updates seamless.
Every component and layout pattern was built with auto-layout for scalability.
Token values were applied precisely, ensuring seamless Figma library updates.
I enforced a consistent naming convention for component properties.
Video 3.1
Mentoring Designers & Guiding Engineers
When the team got expanded to have 3 UX/Product designers and 4 front-end engineers, I started a bi-weekly UX workshop covering UX principles, Figma techniques, and tools like ProtoPie & After Effects for designers. I created a one-page Figma guide to improve product design implementation and communication. Image 3.2
Image 3.1 - Organizing Designs in Figma
Image 3.2 - Figma Handbook for non-Designers
Video 3.1 - Table Component Sample
Organized Design File Management
I structured Figma files to serve as the single source of truth:
Feature design files used the Figma library.
Once finalized, updates in the design files were pushed to the master design file.
And each design files have Asana task links as its thumbnail, visualize its status.
I wanted to utilize the branch feature in Figma, however, at the time, it had too many bugs and caused issues, slowing down and frustrating designers. Image 3.1
Advanced Figma Utilization
For rich-content components (e.g., popovers), I implemented a “slot” approach inspired by Salesforce’s Lightning Design System, allowing content swapping without detaching components.
Once Figma Variables were introduced, I quickly reorganized components and collaborated with engineers to enable JSON token exports, making design updates seamless.
Every component and layout pattern was built with auto-layout for scalability.
Token values were applied precisely, ensuring seamless Figma library updates.
I enforced a consistent naming convention for component properties.
Video 3.1
Mentoring Designers & Guiding Engineers
When the team got expanded to have 3 UX/Product designers and 4 front-end engineers, I started a bi-weekly UX workshop covering UX principles, Figma techniques, and tools like ProtoPie & After Effects for designers. I created a one-page Figma guide to improve product design implementation and communication. Image 3.2
Image 3.1 - Organizing Designs in Figma
Image 3.2 - Figma Handbook for non-Designers
Video 3.1 - Table Component Sample
More Than Just Components
Organized Design File Management
I structured Figma files to serve as the single source of truth:
Feature design files used the Figma library.
Once finalized, updates in the design files were pushed to the master design file.
And each design files have Asana task links as its thumbnail, visualize its status.
I wanted to utilize the branch feature in Figma, however, at the time, it had too many bugs and caused issues, slowing down and frustrating designers. Image 3.1
Advanced Figma Utilization
For rich-content components (e.g., popovers), I implemented a “slot” approach inspired by Salesforce’s Lightning Design System, allowing content swapping without detaching components.
Once Figma Variables were introduced, I quickly reorganized components and collaborated with engineers to enable JSON token exports, making design updates seamless.
Every component and layout pattern was built with auto-layout for scalability.
Token values were applied precisely, ensuring seamless Figma library updates.
I enforced a consistent naming convention for component properties.
Video 3.1
Mentoring Designers & Guiding Engineers
When the team got expanded to have 3 UX/Product designers and 4 front-end engineers, I started a bi-weekly UX workshop covering UX principles, Figma techniques, and tools like ProtoPie & After Effects for designers. I created a one-page Figma guide to improve product design implementation and communication. Image 3.2
Image 3.1 - Organizing Designs in Figma
Image 3.2 - Figma Handbook for non-Designers
Video 3.1 - Table Component Sample
More Than Just Components
Design Process
By February 2024, the design system was adopted across four products and three brands. The design team had become proficient in utilizing the system and Figma. Most importantly, we achieved our original goal: creating an environment optimized for white-labeling.
Applied to 4 Products and 3 Brands
Feb 2024
Easier Theming through Figma Design
2 products were completely designed with Kinetic
Design Process
By February 2024, the design system was adopted across four products and three brands. The design team had become proficient in utilizing the system and Figma. Most importantly, we achieved our original goal: creating an environment optimized for white-labeling.
Applied to 4 Products and 3 Brands
Feb 2024
Easier Theming through Figma Design
2 products were completely designed with Kinetic
Applied to 4 Products and 3 Brands
Feb 2024
Easier Theming through Figma Design
2 products were completely designed with Kinetic
Results
Products with Kinetic
Borrower Dashboard / Application
-
Internal CRM
-
Borrower Dashboard
Borrower Dashboard
Internal CRM
Internal CRM
Borrower Dashboard / Application
-
Internal CRM
-
Borrower Dashboard
Borrower Dashboard
Internal CRM
Internal CRM
Products with Kinetic
Borrower Dashboard / Application
-
Internal CRM
-
Borrower Dashboard
Borrower Dashboard
Internal CRM
Internal CRM
Products with Kinetic