Project Summary
Impact
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 incohérences, 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
"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.
Redesign the visual hierarchy
Examples of the design revolution
Table connect/Application
Challenges
Outcome
From Chaos to Clarity
But That’s Just the Beginning!
Method Used
With limited time,
I prioritized efficiency.
1. Start with what works
I quickly studied best practices instead of reinventing the wheel, referenced Google’s Material Design for a clean, dev-friendly foundation. I added links so devs could easily access the sources. Then, I audited the UI to spot inconsistencies and built the button system from scratch in Figma, based on real patterns and spacing logic.
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 wanted to take the system further by running usability tests, refining components, and improving accessibility with real client feedback. Although I didn’t have access to metrics, I concentrated on building something scalable and efficient, which strengthened my systems thinking. Unfortunately, in mid-July, I couldn’t continue improving the design system as I was reassigned to video editing, producing six deliverables in DaVinci Resolve.
