Overview
Setting the Scene
This UI kit (Design system) contributed to:
25%
Developement Time
Improved account growth and application adoption
Most of us see design systems as a way to streamline workflows.
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
The challenge uncovered
"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.
Redesign the visual hierarchy
How the Design Evolved
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.
My Process, Simply Put
Every phase starts with empathy and ends with clarity.
Before
After
Before
After
Challenges
At Prisma Media, I briefly worked under Ismaïl Hamila and got my first look at what a well-structured design system really feels like. Later, at Datama, I had the opportunity to build one entirely from scratch.
Instead of overcomplicating it, I grounded the system in what I already understood well:
How I tackled this problem
Built on Material Design
Chose Google’s Material Design and angular for its logical structure and developer-friendliness, ensuring a solid foundation.
Scalable & Dev-Ready System
Designed a button system across 5–15 screens under tight deadlines, ensuring it was easy to implement, consistent, and growth-ready.
UI Audit & Button Kit.
Unified steps and component styles.
From Chaos to Clarity
But That’s Just the Beginning!
Method Used
Principles that used for best practice
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.
Don Norman's principle and signifiers and affordance
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.
I initiated a new approach: presenting three options to invite better feedback.
When I realized the team struggled to give clear feedback with just 1 option provided, I started creating option 1, 2, and 3 for every iteration.
Building on what worked, I then focused on making key UI elements more intuitive; using affordances and clear signifiers so buttons were easier to understand at a glance, improving usability without adding complexity.
Note
I lost my original data in mid-July last year, so this is a remake, a simplified snippet of what was once a more detailed system, including primary, secondary, and tertiary components.
Other works
Latest works
Reflection
What I will do in the next project
Despite juggling multiple responsibilities at Datama, I built the UI kit buttons from scratch while also fixing over 20+ screens, learning how to balance speed, consistency, and scalability in real projects.
Through the process, I learned to:
• Work in a hybrid rhythm, staying efficient.
• Structure Figma files for both designers and developers.
• Collaborate with dev and data teams using Angular Material and Google Material Design.
• Lead a homepage redesign that improved brand trust and visual clarity.
Looking back, I realized what I built was a foundation, not a complete design system, it served our immediate needs but lacked the structure to scale independently.
If I could continue, I’d focus on usability testing, accessibility, and ensuring the system’s long-term sustainability.
