
Cybersecurity
B2B SaaS
System thinking
Learn & Grow
🎯 Built from scratch under tight timeline → Delivered a usable system in 1–2 months
🚀 Atomic hierarchy & reusable components → Atoms → molecules → organisms → pages
📊 Hero components solving real UI problems → Multi-layer menu, cookie panel
⚡ Developer-ready documentation → Clear Figma guidelines for immediate adoption
🧠 Problem-solving mindset → Balanced learning, production, and client education

Design System Architect
Worked closely with Balasys’s in-house designer and my development team.
Figma
Atomic design system
Dev handoff & documentation
Back in 2021, Balasys needed consistency across landing pages and campaigns, but there was no shared structure to support it. Visual decisions were being made ad hoc, and each new page increased the risk of fragmentation.
The goal wasn’t just to create components, it was to stabilize the product visually while enabling faster delivery.
I designed and structured the design system from the ground up in Figma and worked closely with the internal designer and development team to make it usable in real projects.
Beyond building components, I acted as a translator between intent and implementation: aligning design logic, visual constraints, and developer reality into something that could actually be adopted.

I approached this project with one guiding question:
“What’s the smallest amount of structure that still meaningfully improves consistency?”
Because the internal designer was already producing visual designs, I couldn’t redesign everything from first principles. Instead, I focused on strategic intervention.
Where I saw unnecessary variation, I pushed for simplification. Where visuals couldn’t change, I looked for behavioral consistency: aligning spacing, states, and interactions so components still felt cohesive even when they looked different.
The navigation became the most complex problem. It was large, content-heavy, and central to almost every page. Rather than treating it as “just another component,” I treated it as a system inside the system. I mapped its states, depth, and scalability, then designed it so it could grow without becoming unusable.
I was constantly balancing tradeoffs:
- Reusability vs. visual fidelity
- Ideal structure vs. adoption risk
- Teaching vs. shipping
Documentation played a critical role. I used Figma not just to show components, but to explain decisions: why something existed, how it should be used, and where flexibility was intentional versus accidental.
The system held the brand together across multiple landing pages and campaigns and reduced visual drift over time. Developers could reuse components with confidence, which sped up delivery and reduced inconsistencies.
More importantly, the system introduced a shared mental model across design and development, even if the system itself was still evolving.

This project belongs in my portfolio because it’s where I learned what design systems really are: not libraries, but decision frameworks.
Balasys taught me how to introduce structure without freezing creativity, how to negotiate constraints without losing integrity, and how to design systems that people actually use, not just admire.
Everything I build today is more refined, but it’s built on the same mindset I developed here.