Project Summary
Most of us see design systems as a way to streamline workflows.
But for teams navigating complexity, they make
innovation possible.
This is the story of how I built Datama’s design system in Figma, solo, from scratch, in the fast-paced rhythm of a startup. With no base to start from, I took initiative: running a UI audit to uncover inconsistencies, referencing Material Design for structure, and adapting Angular Material to align with our devs’ stack.
This system became more than a visual guide, it enabled us to prototype faster, test ideas more efficiently, and hand off seamlessly, freeing up time to focus on new features instead of fixing the old ones.
Every decision I made, every token, layout, and rule, was designed to reduce friction so the team could experiment without chaos.
That’s how structure became our tool for innovation.
Problematic
Problem to solve
"As Datama revamped its brand, UI consistency became challenging. I implemented a token-based design system to unify components, cut rework, and save 25% of dev time."
Let’s fix that.
Why it Matters?
Without a shared system, every new feature introduced small inconsistencies, from button styles to layout decisions, that disrupted both the design flow and developer implementation.
It slowed down progress, caused unnecessary rework, and made the interface harder to maintain.
I introduced a scalable design system to streamline the UI and reduce friction between design and development.
Impact
UI Revolution
Examples of the design revolution
Table connect/Application
Challenges
From Chaos to Clarity
But That’s Just the Beginning!
1. Start with what works
I quickly studied best practices for button systems, I didn’t reinvent the wheel. I referenced Google’s Material Design; for the other parts of the design system ;clean, logical, dev-friendly, and user-friendly. Before the creation of the button by myself from scratch in Figma. Then I ran a UI audit to spot inconsistencies and get a baseline for what to fix.
Below are snapshots of my early research and UI audit; before referencing Google’s Material Design and analyzing existing component systems ; margins, paddings, etc. This helped me define patterns, spot inconsistencies, and plan how to structure Datama’s design system from a real, functional base.
2. Putting the affordance and signifiers to start with what works
Building on what worked, I focused on making key UI elements more intuitive. I used affordance and clear signifiers to make buttons easier to understand at a glance, improving usability without overcomplicating the system.
3. Provide 3 choices for the team to pick on
Building on what worked, I focused on making key UI elements more intuitive. I used affordance and clear signifiers to make buttons easier to understand at a glance, improving usability without overcomplicating the system.
P.S. This is a remake, for snippet, as I lost the previous one, which is much more detailed; primary, secondary, and tertiary
Impact
What's the outcome of this?
To future-proof the product and reduce repetitive work, I built a scalable design system from scratch:
Created reusable, modular components that now support 15+ screens.
Reduced UI inconsistencies across the platform.
Anticipated future needs by designing a system that could scale as the product evolved.
Simplified developer implementation through consistent rules, and structured logic.
Conclusion
What I learn from this?
Built Datama’s entire design system and UI kit in Figma from scratch, ensuring speed, consistency, and scalability.
Balanced a hybrid work rhythm (apprentice), staying punctual and fast without sacrificing quality.
Structured Figma files and documentation to be usable by non-designers and easily digestible for developers.
Proactively explored Angular Material and Python to better collaborate with dev and data teams.
Led the homepage redesign, elevating brand perception and strengthening client trust through a cleaner, more strategic visual identity.
What's next?
I’d love to take the system further, run usability tests, improve accessibility, and refine components based on real clients feedback. Ideally, I’d also want access to usage data to understand how the system impacts user engagement and overall product performance.
As an apprentice product designer, I didn’t have full access to platform metrics; but I focused on what I could control: building something scalable, usable, and efficient for the team. That experience pushed me to think more systematically, and it made me want to go deeper. I’ll be continuing this work by building a new design system for Datama starting this mid-July through the end of the month, if there is still time, an opportunity to apply everything I’ve learned, but with even more precision and intention.
