Product Designer
T*****
Design System
DRAG TO MOVE
Role:
Sole Product Designer
Company:
IoT83
Timeline:
April 30, 2024 - Ongoing
Platform:
B2B Web Applications (5+ web apps)
Focus Areas:
Design System, Consistency, Prototyping, Developer Handoff
The Task:
I had to bring design consistency and scalability across all of the client's web applications by creating and implementing a unified design system without disrupting active development sprints.
Table of Contents
THE CHALLENGE
When I joined the team, the UI across the client's web apps were chaotic; different font sizes, conflicting button styles, and no clear hierarchy. As the only designer, I knew I couldn’t just pause everything to build a design system from scratch. So I found a workaround..
THE SOLUTION
To avoid slowing down delivery, I started building the design system incrementally in parallel with the product work. I broke the system into modular layers: foundation, atoms, molecules, and organisms, and built each part while actively designing and handing off features for each web app.
After every handoff, while developers began their sprint, I shifted into a support role, answering implementation questions and clarifying interactions. At the same time, I would extract the reusable patterns and components that I had created for that project and integrate them into the design system.
This agile, phased approach allowed me to deliver on deadlines, maintain momentum, and slowly introduce a scalable design language across all applications, without disrupting the flow of work.
Here’s a little peek at what I’ve accomplished so far —
Foundation —
THE IMPACT
With every handoff, the design system grew stronger, and the web apps started to feel like part of the same product family. Developers had fewer questions, handoffs became smoother, and I stopped redesigning the same button five different ways. As a result:
5+ client web applications were aligned under one evolving design language
Developer handoff became faster and clearer, thanks to the reusable components and patterns
Future features took less time to design, because I wasn’t starting from scratch every time
Users benefited from consistency, familiar patterns meant less confusion and smoother navigation
The design system laid the foundation for faster scaling across future apps
Before and After compaison —
THE LESSON
I didn’t set out to build a design system at first, I just wanted to make the mess manageable. But as I started piecing things together, I realized I was doing more than just fixing UI inconsistenciess. I was setting a foundation that others could build on.
I learned how to switch gears quickly, from designing to supporting devs, from solving visual problems to solving addressing deeper product and workflow challenges.
And most of all, I learned that good design isn’t just about how things look, but how well they scale, how clearly they communicate, and should feel invisible.
Prototype of a "search" component to help developer understand how it should work —
NEXT STEPS
While the system isn’t fully complete yet, I’ve laid down a strong foundation with clearly defined Atoms, Molecules, and Organisms.
The next phase is all about refinement, documenting edge cases, building out templates, and validating components against edge cases.
I’m also looking to involve developers more directly in evolving the system, making it easier for them to contribute and scale it beyond what I can do alone.
The goal isn’t just to finish a design system, it’s to build something that grows with the product and continues to reduce friction for everyone who touches it.
Thanks for reading 🙌
If you'd like to see more of my work, feel free to head back to the homepage and check out my other projects.
Reach out to me anytime via
or
Made in Framer by kritarth 2025©