Product Designer
Unmetric
Unmetric design system
Build a scalable design system that reduced workload and accelerated product development.
UNDS website we launched in 2019
Overview
As the frontend lead at Unmetric, I worked closely with Amrinder Sandhu (Staff Designer at Postman) to build and scale UNDS (Unmetric Design System). I was responsible for translating design concepts into production-ready code, creating technical documentation, and establishing the development workflow that made the system usable across product and engineering teams.
Context
Timeline
2016–2019
Role
Frontend Lead
Tools
Frontify
Figma
Jira
Google Docs
Netlify
VS Code
Team
CTO & Co-Founder
Dev Team
The challenge
As Unmetric scaled its product offerings, the gap between design and development created significant bottlenecks:
- Designers had to write detailed specifications for every UI component.
- Developers spent time recreating similar patterns without a unified code library.
- Inconsistent implementations led to UI bugs and accessibility issues.
- No standardized workflow for design handoff and component usage.
- Engineering team needed clear, reusable code patterns to build features faster.
My approach
Joined the project when the design system was already hosted on Frontify with basic brand guidelines. My role was to transform design concepts into production-ready code:
UNDS was first hosted at Frontify
- Built reusable component library with clean, maintainable code.
- Created copy-paste ready code snippets for rapid implementation.
- Established naming conventions and file structure standards.
- Implemented responsive patterns and accessibility features.
We documented the styles, appearances, code and description explaining when to use which variant.
Unmetric brand guidelines for colors usage.
Unmetric brand guidelines for typography. Franklin Gothic was the only typeface we used.
Impact
For design team
- Faster design-to-code handoff: Eliminated need to write detailed technical specifications.
- Reliable implementation: Designs were implemented consistently across products.
- Better collaboration: Shared language between design and development.
For development team
- Faster implementation: Copy-paste ready, production-tested code.
- Reduced decision fatigue: Clear patterns for common UI challenges.
- Better code quality: Pre-built accessible, responsive components.
- Easier maintenance: Centralized updates propagated across products.
What I learned
- Close design-dev collaboration ensured feasible, optimal implementations.
- Clean code prevented technical debt over years.
- Regular sync with design prevented misalignment and improved solutions for everyone.
Contact
Let's connect
I work with companies that want to create better digital products. If you need a product designer who can also code and help bridge design and engineering, let's connect.