Building Agoro AI’s Scalable Design System
Enhancing design Consistency, Efficiency, and Developer Collaboration
Team Structure
Eve - Design, Matthew - Dev Lead, Peter - Frontend Dev
Tool
Figma
Time Frame
Aug - Dec 2024
Responsibilty
Design System & Documentation
✦ Context
Why does our team need a Design System?
As the sole designer at Agoro AI, I reached a stage where design and development started to slow down due to constant back-and-forth QA. I also noticed inefficiencies in my own design workflow—elements were being recreated rather than reused, and consistency was becoming harder to maintain.
This was the moment I realized we needed a formal design system, for future product design communication, and align front-end code with visual standards.
✦ HMW: The Core Question
How might we build a scalable design system for designers and developers to work faster, stay aligned, and maintain high-quality output?
✦ Strategy Planning
Listening, Auditing, Prioritizing
To lay the groundwork, I first reviewed our existing product files and conducted a design audit. I then met with the front-end developer to understand pain points in their workflow. After gathering feedback, I organized the issues by priority—from the most urgent to those that could be addressed later.
✦ The Problem (Part 1)
Design-Side Challenges
✦ The Problem (Part 2)
Developer's Side Challenges
✦ Ideation & Methodology
To build a system tailored for Agoro AI’s fast-moving environment, I used a combination of three methods:
To build a system tailored for Agoro AI’s fast-moving environment, I used a combination of three methods:
1. Atomic Design
I used Atomic Design as the structural foundation—breaking the UI down into atoms, molecules, and organisms. This helped create clarity, reusability, and a scalable hierarchy across components.
2. Studying from Other Design System
I think the best way to learn how to build from scratch is to reference how other tech companies approach design systems. This gives you an immediate overview of their structural logic, design token approach, and best practices for building variants and states.
3. Balancing Need & Priority
Not everything needs to be deeply layered. I evaluated what to define and what to leave flexible. For instance, design tokens are only set up to the semantic level for now—giving us just enough control without slowing us down with complexity.
✦ Resources
The Tools I Use to Boost Efficiency
To speed up the design system workflow, I relied on a mix of Figma plugins, AI tools, and online resources.
✦ Design System Walk Through
My Management Approach for Building the Design System
Building a design system isn’t a short-term task — it’s a long-term commitment that requires focus and dedication. I always start with a clear plan. Based on the problem we’re addressing, I structured the process into two phases: first, prioritizing a systemic foundation, and then focusing on the details.
✦ Design System Walk Through
Phase 1: prioritizing a systemic foundation
I started with a consistent cover page, organized pages using the Atomic Design principle, and defined core components with thoughtful use of properties and variants to ensure scalability and flexibility from the start.
✦ Design System Walk Through
Phase 2: Refining the visual & functional elements
With the foundation in place, I started refining the visual & functional elements. This included building a style guide covering typography, grid, shadows, and local variables like color and spacing. I also ensured support for both light and dark modes, and defined consistent button styles, card layouts, and nested components etc.
✦ Testing
Did it make a difference?
After introducing new design system update, I checked in with the dev team to see how things were going—and got some helpful feedback on what’s working so far.
🙌 Wins:
• Faster development time for new components
• Smoother handoff with less explanation needed
• Fewer QA cycles and less back-and-forth
• More consistent implementation in code
It’s a good sign that the system is already making things clearer and more efficient, even at this early stage.
✦ Next Steps
Looking Ahead
As the design system evolves, I aim to create more reusable and standardized assets, with clear documentation that aligns with how developers use them across different frameworks (e.g. Bootstrap).
As the team grows, I’d love to gather feedback from designers to understand how the system supports their workflow and onboarding. I’m also interested in learning how we can improve the system’s structure to better support the team’s needs.
Once the system is in use, I plan to check in regularly, possibly through a short survey to see if it’s helping the team stay consistent and work more efficiently day to day.
