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.
Team
I worked on this initiative at Torch from Dec 2022–Aug 2024 with
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.
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.
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.
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.
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.
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.
Continue exploring
Product strategy at Torch