Overview
(click on any image to view full gallery)
When I joined ThoughtExchange, the product interface had grown organically without a formal design system. The experience felt more like an embedded tool than a cohesive SaaS platform, with inconsistent UI patterns and little visual structure.
While the marketing team had established brand elements such as colors and typography, those guidelines hadn’t been translated into the product itself. The result was an interface that lacked consistency, personality, and scalable design foundations.
Creating a design system became an important step toward modernizing the product and enabling the team to build more efficiently as the platform continued to grow.
The Problem
The early version of the platform had largely been designed by the marketing team during the company’s startup phase. As the product expanded, this approach created several challenges:
- Inconsistent UI styles and interaction patterns
- No centralized component library or documentation
- Difficulty maintaining visual consistency as new features were introduced
- Extra guesswork for developers when implementing UI elements
Without a design system in place, the interface became harder to scale and maintain as the product evolved.
What I Did
Collaboration & Audit
I partnered with the marketing team to gather brand assets, typography, color palettes, and existing guidelines. From there, I conducted a UI audit of the product to identify inconsistencies and opportunities to standardize patterns.
Establishing the Design System
Using Sketch and InVision at the time, I built the first version of the product’s design system. This included defining core UI foundations such as:
- Typography standards using the brand’s Lato typeface
- Primary and secondary color usage
- Button styles and interaction states
- Iconography and feedback messaging
- Error states and accessibility considerations
These components created a shared language between design and engineering, bringing consistency across the product.
Scaling & Maintaining the System
As the company and product grew, the design system evolved alongside it. When the team transitioned from Sketch to Figma, we used the opportunity to refine and expand the system.
Updates included:
- Improved component structure and variants
- Alignment with engineering on color values and tokens
- Migration from custom icons to MUI icons
- Additional guidelines for elevation, button hierarchy, links, and states
The design team continued maintaining and expanding the system as new features were introduced.
Impact
Introducing a design system brought much-needed consistency and structure to the product.
We:
- Established a unified visual language across the platform
- Reduced ambiguity for developers implementing UI components
- Created reusable patterns that sped up feature development
- Strengthened alignment between product design and the company’s brand
- The result was a more cohesive product experience and a scalable foundation that supported the platform as it continued to grow.
