Design system templates that speed up SaaS design handoff by 50%.
At Eulerity, I developed templates for the design system that significantly improved the product design workflow by 50%. This project provides a breakdown of the process and its potential to enhance the global design system workflow.
Workflow Efficiency Project
Eulerity — Marketing Ad Infrastructure
UX Strategy, 2024, NYC
Challenges
(A) Design Handoff Took Too Much Time
Locating source design files consumed 60% of any project time. Many files contained outdated components or broken flows, leading to delays in drafting initial project designs.
(B) UI Components Lacked Consistency
Designs created by different designers showed inconsistencies due to misaligned source files and a lack of adherence to a unified design system.
How we identified areas for improvement
We created a time map (see below) to analyze how time was distributed across each phase of the design process. By calculating the average time taken to deliver designs to the product team, we identified areas where improvements were needed. This analysis helped us optimize the design system and streamline the overall workflow.
Implementation
The implementation heavily relies on the extensive use of Figma design system properties to create scalable interface patterns.
These patterns function like dynamic templates, tightly linked to the design system and composed of components with individual nested properties.
So for any ticket or enhancement, product/design team would select the most recently updated template, make quick modifications or add new components and that updated file then becomes the new source of truth.
Framework
While studying Operational Excellence strategies at Northeastern University’s Advanced Business Processing course, I learned about Lean (waste elimination) and Six Sigma (process improvement).
My solution aligned with Lean principles as we aimed to enhance existing processes and not eliminate and key steps, so I executed this project with the most commonly used lean methodology — The PDCA Cycle
Work Breakdown
I used the same atomic design arrangement to structure the templates — defined atom components, atoms together formed molecules and eventually molecules together formed templates.
Atoms
Grids, Graphs, Lists, Forms
Molecules
Atoms + Dropdowns + CTAs + Headers + Footer
Organisms
Molecules + Main Navigation + Web Frame
Sub-templates
Grids, Graphs, Lists, Forms
Final Template
Combination of Sub-templates
fig, Atoms and their variants
1. Collection
I first conducted an in-depth audit of the product’s interfaces, gathering all pages and components to identify recurring patterns and inconsistencies.
2. Segregation
I then grouped similar UI patterns to form distinct layout categories, mapping out the required templates.
3. Arranging Templates
Each template was designed with multiple variations to accommodate different use cases.
Goal
(a) Reduce time taken in “locating design source files”
(b) Eliminate redundant “design reviews”
Action
Structured dynamic templates for key pages of the portal
Result
Improved product-dev handoff time by 50%, reducing redundant design reviews and faster design cycles.
Impact & Feedback
After implementing the new templates, I tested them within the team on small projects and gathered feedback from design leads.
Using these templates in my own projects reduced my project completion time by nearly 50%, streamlining the workflow and boosting productivity.
Peer Feedback
“…one project I was particularly impressed with was their intern project, where Kalsi collaborated with another intern to design robust, reusable templates for our design system—templates we still rely on today.”
Maya, Lead Product Designer
”For me I’ve been finding it really helpful and it’s been streamlining how I work on the screens so I can focus more on the ux / how the feature works rather than on ui so I appreciate it”
Margarita, Lead Product Designer
”I think the templates were generally easy to use, practical and scalable”
Nathan, Product Designer