Creating a scalable design system that helped Hirevox ship faster
Creating a scalable design system that helped Hirevox ship faster
Creating a scalable design system that helped Hirevox ship faster
Design System
Design System
/
/
2025
2025
As the product grew, different designers introduced their own patterns while developers recreated similar components in different ways. The UI looked functional, but every new feature required extra decisions, extra reviews, and extra implementation effort.
As the product grew, different designers introduced their own patterns while developers recreated similar components in different ways. The UI looked functional, but every new feature required extra decisions, extra reviews, and extra implementation effort.
As the product grew, different designers introduced their own patterns while developers recreated similar components in different ways. The UI looked functional, but every new feature required extra decisions, extra reviews, and extra implementation effort.
Small inconsistencies started adding up. Design slowed down. Handoffs became harder. Developers spent time solving UI problems that should have already been solved.
Small inconsistencies started adding up. Design slowed down. Handoffs became harder. Developers spent time solving UI problems that should have already been solved.
Small inconsistencies started adding up. Design slowed down. Handoffs became harder. Developers spent time solving UI problems that should have already been solved.
Behind the scenes
Behind the scenes
The UI wasn't broken. Users could complete tasks and the product continued to evolve. The challenge was happening when we tried to build new features over the time.
The UI wasn't broken. Users could complete tasks and the product continued to evolve. The challenge was happening when we tried to build new features over the time.
The UI wasn't broken. Users could complete tasks and the product continued to evolve. The challenge was happening when we tried to build new features over the time.
As more features were added, designers approached similar problems differently. Developers often had to interpret design decisions and recreate components across screens. A button created for one workflow behaved differently in another. Spacing patterns varied. Similar interactions looked unrelated. None of these issues were severe individually. Together, they slowed the team down.
As more features were added, designers approached similar problems differently. Developers often had to interpret design decisions and recreate components across screens. A button created for one workflow behaved differently in another. Spacing patterns varied. Similar interactions looked unrelated. None of these issues were severe individually. Together, they slowed the team down.
As more features were added, designers approached similar problems differently. Developers often had to interpret design decisions and recreate components across screens. A button created for one workflow behaved differently in another. Spacing patterns varied. Similar interactions looked unrelated. None of these issues were severe individually. Together, they slowed the team down.
It became clear that scaling the product would require a stronger foundation.
It became clear that scaling the product would require a stronger foundation.
It became clear that scaling the product would require a stronger foundation.
Constraints
Constraints
Hirevox was actively shipping product features, and dedicating months to creating a custom system wasn't realistic.
Hirevox was actively shipping product features, and dedicating months to creating a custom system wasn't realistic.
Hirevox was actively shipping product features, and dedicating months to creating a custom system wasn't realistic.
The goal wasn't perfection. The goal was adoption.
The goal wasn't perfection. The goal was adoption.
The goal wasn't perfection. The goal was adoption.
Instead of building every foundation and component ourselves, we decided to leverage Untitled UI and customize it to fit HireVox's needs. This approach allowed us to focus our effort where it mattered most: creating consistency without slowing delivery.
Instead of building every foundation and component ourselves, we decided to leverage Untitled UI and customize it to fit HireVox's needs. This approach allowed us to focus our effort where it mattered most: creating consistency without slowing delivery.
Instead of building every foundation and component ourselves, we decided to leverage Untitled UI and customize it to fit HireVox's needs. This approach allowed us to focus our effort where it mattered most: creating consistency without slowing delivery.
The decision traded complete control for speed and practicality. Looking back, it was the right tradeoff.
The decision traded complete control for speed and practicality. Looking back, it was the right tradeoff.
The decision traded complete control for speed and practicality. Looking back, it was the right tradeoff.
Foundations
Foundations
Before building components, I focused on foundations. The system started with design tokens that established consistency across design and development.
Before building components, I focused on foundations. The system started with design tokens that established consistency across design and development.
Before building components, I focused on foundations. The system started with design tokens that established consistency across design and development.
I defined standards for: Color, Typography, Spacing, Grid and Iconography.
I defined standards for: Color, Typography, Spacing, Grid and Iconography.
I defined standards for: Color, Typography, Spacing, Grid and Iconography.
These decisions became the shared language used across the product. Rather than redefining values screen by screen, designers and developers could rely on a common foundation.
These decisions became the shared language used across the product. Rather than redefining values screen by screen, designers and developers could rely on a common foundation.
These decisions became the shared language used across the product. Rather than redefining values screen by screen, designers and developers could rely on a common foundation.
Components
Components
Once the foundations were in place, I moved into reusable components. Instead of designing components around individual screens, I focused on recurring product needs.
Once the foundations were in place, I moved into reusable components. Instead of designing components around individual screens, I focused on recurring product needs.
Once the foundations were in place, I moved into reusable components. Instead of designing components around individual screens, I focused on recurring product needs.
The system included: Buttons, Inputs, Tables, Cards, Dialogs, Navigation, Badges, Status indicators.
The system included: Buttons, Inputs, Tables, Cards, Dialogs, Navigation, Badges, Status indicators.
The system included: Buttons, Inputs, Tables, Cards, Dialogs, Navigation, Badges, Status indicators.
The objective was Design once, Reuse everywhere.
The objective was Design once, Reuse everywhere.
The objective was Design once, Reuse everywhere.
Design patterns
Design patterns
Components solved consistency at the UI level. Patterns solved consistency at the experience level.
Components solved consistency at the UI level. Patterns solved consistency at the experience level.
Components solved consistency at the UI level. Patterns solved consistency at the experience level.
I defined reusable approaches for common interactions that appeared throughout Hirevox. That included form structure, Validation behavior, Table interactions, Status communication and empty states.
I defined reusable approaches for common interactions that appeared throughout Hirevox. That included form structure, Validation behavior, Table interactions, Status communication and empty states.
I defined reusable approaches for common interactions that appeared throughout Hirevox. That included form structure, Validation behavior, Table interactions, Status communication and empty states.
By documenting these decisions, teams no longer had to debate common UX problems repeatedly.
By documenting these decisions, teams no longer had to debate common UX problems repeatedly.
By documenting these decisions, teams no longer had to debate common UX problems repeatedly.
From Design to Development
From Design to Development
A major focus of the project was ensuring the system extended beyond Figma.
A major focus of the project was ensuring the system extended beyond Figma.
A major focus of the project was ensuring the system extended beyond Figma.
I worked closely with frontend engineers to review implementation and align design decisions with production components. This collaboration reduced ambiguity during handoff and helped ensure that reusable components remained consistent across both design and code.
I worked closely with frontend engineers to review implementation and align design decisions with production components. This collaboration reduced ambiguity during handoff and helped ensure that reusable components remained consistent across both design and code.
I worked closely with frontend engineers to review implementation and align design decisions with production components. This collaboration reduced ambiguity during handoff and helped ensure that reusable components remained consistent across both design and code.
The goal wasn't simply to create a component library. It was to create a shared source of truth.
The goal wasn't simply to create a component library. It was to create a shared source of truth.
The goal wasn't simply to create a component library. It was to create a shared source of truth.
What I Learned
What I Learned
The biggest lesson from this project was that successful design systems are not defined by the number of components they contain. They're defined by whether people actually use them.
The biggest lesson from this project was that successful design systems are not defined by the number of components they contain. They're defined by whether people actually use them.
The biggest lesson from this project was that successful design systems are not defined by the number of components they contain. They're defined by whether people actually use them.
Choosing an existing foundation over building everything from scratch allowed us to deliver value quickly and earn trust across the team. The system succeeded because it reduced friction for both designers and developers while creating a foundation the product could continue to grow on.
Choosing an existing foundation over building everything from scratch allowed us to deliver value quickly and earn trust across the team. The system succeeded because it reduced friction for both designers and developers while creating a foundation the product could continue to grow on.
Choosing an existing foundation over building everything from scratch allowed us to deliver value quickly and earn trust across the team. The system succeeded because it reduced friction for both designers and developers while creating a foundation the product could continue to grow on.
40+
40+
Reusable Components
Reusable Components
Built and standardized a growing library of reusable components used across the product.
Built and standardized a growing library of reusable components used across the product.
Built and standardized a growing library of reusable components used across the product.
90%
90%
Faster Design Exploration
Faster Design Exploration
Designers spent less time recreating UI patterns and more time solving product problems.
Designers spent less time recreating UI patterns and more time solving product problems.
Designers spent less time recreating UI patterns and more time solving product problems.
Reduced Design-to-Development Time
Reduced Design-to-Development Time
Reusable components and clear standards made implementation more predictable.
Reusable components and clear standards made implementation more predictable.
Reusable components and clear standards made implementation more predictable.
Improved Consistency
Improved Consistency
A shared foundation reduced visual and interaction inconsistencies across the product.
A shared foundation reduced visual and interaction inconsistencies across the product.
A shared foundation reduced visual and interaction inconsistencies across the product.
// More work
// More work
Product Design
Product Design
/
/
0 → 1 feature
0 → 1 feature
/
/
2026
2026
Helping Businesses Scale Conversations on WhatsApp
Helping Businesses Scale Conversations on WhatsApp
Helping Businesses Scale Conversations on WhatsApp
Mobile App
Mobile App
/
/
Revamp
Revamp
/
/
2023
2023
Transforming diabetes care for 1M+ users
Transforming diabetes care for 1M+ users
Transforming diabetes care for 1M+ users
oh hello, I’d love to get in touch with you!
Vishal • ALL RIGHTS RESERVED
oh hello, I’d love to get in touch with you!
Vishal • ALL RIGHTS RESERVED
oh hello, I’d love to get in touch with you!
Vishal • ALL RIGHTS RESERVED