Aurora Design System
Creating a design system that can scale with Iterable's cutting-edge mar-tech suite of software
Overview
Aurora is Iterable’s design system, built to unify and scale design and development across the platform. It serves as a shared language between designers and engineers, ensuring consistency, efficiency, and accessibility in every product experience. Inspired by best practices in design systems and tailored to Iterable’s unique needs, Aurora empowers teams to build high-quality, reusable UI components while maintaining flexibility for innovation.
The challenge
Prior to Aurora, Iterable faced several challenges that slowed down development and created inconsistencies in the product experience:
Code and component duplicity: Multiple teams were building similar UI elements with slight variations, leading to maintenance overhead
Inconsistent styles and properties: Components in Figma and code had mismatched properties, making design-to-development handoff inefficient
Reliance on overrides instead of scalable variants: Engineers often used styled-component overrides instead of leveraging a structured component system, reducing reusability and scalability
My role
As the lead designer and product owner of Aurora since April 2022, I have driven its strategy, implementation, and adoption. I also routinely contribute and merge component code, ensuring that the system remains cohesive across design and engineering.
The work so far
Component Development & Documentation
Built a comprehensive Figma library with props, variants, and design variables aligned with frontend repository variables
Authored 179 documentation pages detailing component guidelines, usage, and best practices (Aurora Documentation)
Code Contributions & API Integrations:
Integrated Figma Code Connect APIs into our library, enabling engineers to copy-paste code snippets directly from Figma into their development environment. This solved the common question of “Does this component exist?” and streamlined the design-to-code handoff process
Implement an automated token pipeline using Figma, Supernova, and GitHub—allowing style changes in Figma to directly generate production-ready code
Contributed 150+ PRs to enhance UI quality, accessibility, and polish within Iterable
Collaboration & Governance
Defined Aurora’s governance process, drawing inspiration from Brad Frost’s model but tailored for Iterable’s needs
Hosted bi-monthly roundtables with designers to discuss patterns, collect feedback, and align on best practices
Conducted design sign-off reviews to ensure all projects meet Aurora’s standards before development
Communication & Adoption
Maintained, managed, and prioritized the design system backlog and roadmap
Provided weekly updates in a public Slack channel, keeping stakeholders informed on design system progress and updates
Lastly, I think the impact of design system work can likely go overlooked—not by design systems designers alone, but to all the members that use and contribute back to the system. I like to create fun ways for the team to interpret this work, as seen in the prototype below!
Aurora continues to evolve as Iterable AI becomes a more prominent piece of Iterable's story
A comprehensive documentation site about Aurora can be found at aurora.iterable.com
The Aurora Design System supports over 200 different engineers and designers building products for Iterable, making it notably complex and detailed.
I post updates (if available) every Thursday in an #aurora channel, to keep the team informed of changes.
Results & Impact
While the initial automation and library projects were time-boxed, the design system continues to evolve.
Being the product owner, I get to define the roadmap for the Aurora Design System and where the supporting engineers and I will focus our efforts next. Our current process is rather anecdotal and subjective, so I've enlisted engineers to help us collect metrics on our code components around usage, complexity (how many nested child components are there in a broader composition)—with this quantitative data our prioritization can be more objective, and we can understand the potential complexity and scope that certain projects may entail.
We've started to implement micro-interactions that help the product feel alive, refining accessibility standards, and exploring AI-driven design solutions to further optimize the workflow for designers and engineers.
With my technical background and systems mindset, I’ve helped Iterable establish a scalable, efficient design system that empowers my design, engineering, and product colleagues to deliver a consistent Iterable experience anywhere on the platform.
Reflections & future ideas
Expanding automation: Further automating Figma-to-code workflows to reduce manual implementation effort
Refining governance: Continuously improving contribution and adoption processes to balance flexibility and consistency
Scaling component libraries: Introducing more complex patterns and microinteractions to further enhance Iterable’s user experience
Measuring impact: Implementing clearer metrics to track Aurora’s effectiveness in reducing design debt and improving product cohesion
Aurora is a strategy for scaling Iterable’s product experience. Through continued refinement, collaboration, and innovation, it will remain a key driver of consistency, efficiency, and quality across the platform.
Many, many incredible designers have contributed their skills, feedback, and support of this incredible design system. I won't list them all here, but if we worked together on this and you're reading this—thank you for all of your effort and skills 🙏
