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

Parker Simon

Lead Product Designer

Parker Simon

Lead Product Designer

Scott Mercer

CTO

Scott Mercer

CTO

Jeff Woldan

Sr. Staff Engineer

Jeff Woldan

Sr. Staff Engineer

Susan Falcone

Dir. of Product & Design

Susan Falcone

Dir. of Product & Design

Jack Murphy

Engineering Manager

Jack Murphy

Engineering Manager

Matt Evans

Staff Engineer

Matt Evans

Staff Engineer

Chloe Li

Sr. Product Designer

Chloe Li

Sr. Product Designer

Josh Cohen

Engineering Manager

Josh Cohen

Engineering Manager

Sai Kandula

Sr. QA Manager

Sai Kandula

Sr. QA Manager

Erik Taheri

Lead Front-End Engineer

Erik Taheri

Lead Front-End Engineer

Matt Creenan

Sr. Staff Engineer

Matt Creenan

Sr. Staff Engineer

Drashti Patel

Sr. QA 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.

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

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.