Led a team of 4 designers to develop a scalable design system for Marvel, a SaaS AI teaching assistant. Took the initiative to create a centralized system that streamlined the design process, ensuring consistency and efficiency across the product team.
When I joined Reality AI Labs, I observed that every time a new phase began, designers would create new components from scratch. This resulted in the repetitive design of the same components with inconsistent styles, each modified to fit the specific functionality of the new project.
There was lack of documentation for the components, and as more variants and options were added over time, the absence of updates led to confusion about when and why to use specific properties.
The components themselves were brittle and overly complex, lacking a cascading structure. As a result, even minor adjustments to fix errors became costly and time-consuming.
"How might we create a design system that is simple, scalable, and accessible for both designers and developers, fostering collaboration and seamless integration of design and code?"
Looking back at the original problem – How can I create a design system that is simple, scalable, and understandable by both designers and developers? – I realized developers' needs were just as crucial as designers'. To bridge this gap, I collaborated with a front-end developer to integrate tokens, CSS classes, and code snippets directly into the Figma file. This made the system more developer-friendly and improved communication between us.
As Lead Product Designer, I established a centralized, scalable design system to:
I evaluated several established design systems, including those from Shopify, Apple, and Google, to guide the creation of our own. While these systems were comprehensive and well-designed, they were also complex, often serving more as references than practical, step-by-step guides.
Through this evaluation, I realized that adopting Atomic Design principles would provide the structure needed to break down components into smaller, reusable elements. This approach made the design system more scalable and maintainable, and helped me identify key areas for improvement by evaluating the strengths and weaknesses of existing systems. By applying these insights, I was able to create a more efficient, cohesive system that would better serve both designers and developers.
I broke down interfaces into reusable components, following a hierarchical structure that ensures organization, flexibility, and efficiency. By leveraging Atomic Design principles, I created a scalable and consistent system. Here’s a sneak peek at some of my components—from atoms to organisms—to build a seamless design experience.
The Hybrid 8pt and 4pt Grid System is a flexible approach to spacing and layout design that combines the structure of the 8-point grid with the precision of a 4-point grid. It maintains consistency and scalability while offering finer control over smaller UI elements.
The font has a contemporary yet friendly feel, making the AI assistant feel more human and approachable, rather than overly technical or robotic. Works well for a tech-forward platform.
The primary brand color was Purple (500, #5614F3). I defined standard success, error, and warning colors to harmonize with the brand palette. I conducted accessibility checks for all colors, including their light and dark variants, and specified appropriate shades for use on various backgrounds.
I created design token variables for colors, padding, and spacing, ensuring consistent cascading updates across the design. To streamline the developer handoff, I established a clear naming convention aligned with the project's design system for seamless integration.
Alias Variables, children of global variables.These values are derived from global tokens, allowing them to automatically adapt to changes in the global variables. They are presented as Figma’s preferred property values, enabling quicker and more consistent application across components.
I utilized a pre-existing icon library from UI icons from Google's Material Design, added custom icons when needed, and created size variants as part of the design system atoms.
The components follow a cascading hierarchy: Atoms, Molecules, and Organisms. This structure ensures that changes made at the atomic level seamlessly propagate to higher-level components.
Atoms are the smallest building blocks, including buttons, tags, logos, and icon placeholders, forming the foundation for more complex UI elements.
Molecules: Composed of Atoms.
Organisms: Composed of molecules and atoms.
A design system is never truly "finished", it's an evolving framework that requires continuous testing and refinement. As new components were implemented, it was crucial to assess their impact on the overall product. To validate the effectiveness of these updates, I collaborated closely with the UX and development team to gather insights on what worked well and where improvements were needed.
This iterative approach reinforced the importance of ongoing collaboration and validation, ensuring that the design system not only enhances efficiency but also scales effectively over time.
