Design system at Torch
Hello, design system
After merging two legacy platforms, Torch’s UI and front-end toolkit became a messy mix of assets and systems. This led to mismatched product branding, inconsistent in-app features, and an inefficient design and development environment that slowed down internal teams.
Design system at Torch
Hello, design system
After merging two legacy platforms, Torch’s UI and front-end toolkit became a messy mix of assets and systems. This led to mismatched product branding, inconsistent in-app features, and an inefficient design and development environment that slowed down internal teams.
Problem space
Mismatch of design languages
Customers encountered inconsistent design styles and interaction patterns, leading to confusion.
Lack of accessibility compliance
In-app features were not fully accessible, limiting usability and posing risks for enterprise and government contracts.
Disorganized developer tools
Legacy design patterns and component libraries were inherited in poor condition, and the technical team lacked effective cross-functional collaboration practices.
Problem space
Mismatch of design languages
Customers encountered inconsistent design styles and interaction patterns, leading to confusion.
Lack of accessibility compliance
In-app features were not fully accessible, limiting usability and posing risks for enterprise and government contracts.
Disorganized developer tools
Legacy design patterns and component libraries were inherited in poor condition, and the technical team lacked effective cross-functional collaboration practices.
Team
I worked on this initiative at Torch from Dec 2022–Aug 2024 with
Parker Simon
Lead Product Designer
Scott Mercer
CTO
Jeff Woldan
Sr. Staff Engineer
Susan Falcone
Dir. of Product & Design
Jack Murphy
Engineering Manager
Matt Evans
Staff Engineer
Chloe Li
Sr. Product Designer
Josh Cohen
Engineering Manager
Sai Kandula
Sr. QA Manager
Erik Taheri
Lead Front-End Engineer
Matt Creenan
Sr. Staff Engineer
Drashti Patel
Sr. QA Engineer
Team
I worked on this initiative at Torch from Dec 2022–Aug 2024 with
Parker Simon
Lead Product Designer
Scott Mercer
CTO
Jeff Woldan
Sr. Staff Engineer
Susan Falcone
Dir. of Product & Design
Jack Murphy
Engineering Manager
Matt Evans
Staff Engineer
Chloe Li
Sr. Product Designer
Josh Cohen
Engineering Manager
Sai Kandula
Sr. QA Manager
Erik Taheri
Lead Front-End Engineer
Matt Creenan
Sr. Staff Engineer
Drashti Patel
Sr. QA Engineer
Solution
A new design system & collaboration model
Consistent design language
New software development used consistent design elements inspired by Torch’s branding. New experience principles inspired more thoughtful UX.
Accessibility compliance
New features were designed, developed, and reviewed to meet WCAG standards.
More productivity from streamlined tools
Scalable components and processes improved productivity by reducing manual work for designers and engineers. Teams experienced less cognitive overhead with fewer systems to manage.
Solution
A new design system & collaboration model
Consistent design language
New software development used consistent design elements inspired by Torch’s branding. New experience principles inspired more thoughtful UX.
Accessibility compliance
New features were designed, developed, and reviewed to meet WCAG standards.
More productivity from streamlined tools
Scalable components and processes improved productivity by reducing manual work for designers and engineers. Teams experienced less cognitive overhead with fewer systems to manage.
The design system work has helped drive visual cohesion of our designs and positively impacted our development team’s velocity.
Jack Murphy, Engineering Manager at Torch
The design system work has helped drive visual cohesion of our designs and positively impacted our development team’s velocity.
Jack Murphy, Engineering Manager at Torch
The new design system has massively improved the look & feel of our platform, and has helped me a lot in becoming a stronger and more efficient designer.
Chloe Li, Senior Product Designer at Torch
The new design system has massively improved the look & feel of our platform, and has helped me a lot in becoming a stronger and more efficient designer.
Chloe Li, Senior Product Designer at Torch
The new design system code is night and day compared to what we were doing with our old services. And our contractors can be way more productive.
Matt Evans, Senior Software Engineer at Torch
The new design system code is night and day compared to what we were doing with our old services. And our contractors can be way more productive.
Matt Evans, Senior Software Engineer at Torch
I love the new design! It’s so much easier to navigate and gets rid of all the clutter.
Coaching end user
I love the new design! It’s so much easier to navigate and gets rid of all the clutter.
Coaching end user
My approach
My approach
Prioritized the initiative with a clear plan
After gaining executive support, I evaluated technical strategies and organized a cross-functional roadmap with Engineering. To speed up results, we started with a 3rd-party framework and scaled it to a custom library with 60+ components.
Prioritized the initiative with a clear plan
After gaining executive support, I evaluated technical strategies and organized a cross-functional roadmap with Engineering. To speed up results, we started with a 3rd-party framework and scaled it to a custom library with 60+ components.
Evaluating technical infrastructure strategies with engineers
Evaluating technical infrastructure strategies with engineers
Led a new product design direction
I introduced new branding-inspired colors, UI patterns, content guidelines, and user experience principles for different user types.
Led a new product design direction
I introduced new branding-inspired colors, UI patterns, content guidelines, and user experience principles for different user types.
Design assets included in the new system
Design assets included in the new system
Improved cross-functional coordination
New hand-off documentation and design reviews enhanced communication and development accuracy. WCAG-compliant accessibility criteria were established across Design, Engineering, and QA teams.
Improved cross-functional coordination
New hand-off documentation and design reviews enhanced communication and development accuracy. WCAG-compliant accessibility criteria were established across Design, Engineering, and QA teams.
Planning cross-functional process improvements across Design and Engineering
Planning cross-functional process improvements across Design and Engineering
Impact
Improved usability and UX consistency
The design system reduced user confusion from the product merger mashup and increased usability with more consistent and thoughtful UX.
Business value
Compliance with industry accessibility standards increased, resolving previous violations and avoiding future risks for enterprise and government deals.
Organizational value
The product development workflow streamlined, enabling Design and Engineering teams to use more efficient tools moving forward.
Impact
Improved usability and UX consistency
The design system reduced user confusion from the product merger mashup and increased usability with more consistent and thoughtful UX.
Business value
Compliance with industry accessibility standards increased, resolving previous violations and avoiding future risks for enterprise and government deals.
Organizational value
The product development workflow streamlined, enabling Design and Engineering teams to use more efficient tools moving forward.
Challenges and lessons
Complex, incremental implementation
The new design system had to be phased in through individual features across separate microservices. This created short-term inconsistencies but set the stage for long-term product transformation.
Shifting Engineering leadership
Throughout the initiative, Engineering teams changed and key partners left. I consistently socialized our progress and helped onboard new staff.
Balancing infrastructure and feature work
Without a dedicated design system team, I had to lead this infrastructure transformation while teams were primarily focused on new feature development. I helped our teams find ways to make progress on both fronts.
Challenges and lessons
Complex, incremental implementation
The new design system had to be phased in through individual features across separate microservices. This created short-term inconsistencies but set the stage for long-term product transformation.
Shifting Engineering leadership
Throughout the initiative, Engineering teams changed and key partners left. I consistently socialized our progress and helped onboard new staff.
Balancing infrastructure and feature work
Without a dedicated design system team, I had to lead this infrastructure transformation while teams were primarily focused on new feature development. I helped our teams find ways to make progress on both fronts.