AERIS BY IROBOT | Systems & Delivery
Aeris Design System: Tokens, Components, and QA for Faster Delivery
Problem: Rebrand + aggressive relaunch timeline created inconsistent UI and slow, high-risk delivery.
What I Owned: Token system + component library + governance + handoff/QA workflow (hands-on).
Constraints: Multi-team delivery, accessibility requirements, legacy UI debt, parallel feature work.
Artifacts shipped: Tokens, core components, usage guidelines, CSS rules, engineer-ready specs + QA checks.
Results: 30% faster dev cycles + WCAG 2.1 AA compliance for core components/workflows.
Token + component documentation used by engineering for implementation.
Problem Statement
Aeris needed a token-based system to ship a rebrand fast, eliminate inconsistent UI, and meet accessibility requirements.
The Challenge
Rebrand required new visual language across high-variance templates.
Legacy UI patterns created inconsistency and rework during delivery.
Accessibility expectations had to be met while shipping fast.
What I Owned
Built a token-based visual language (color, type, spacing) used across templates and flows.
Audited ~30 templates, standardized patterns, and eliminated inconsistent UI variants.
Defined component specs + interaction states and aligned design/engineering on implementation rules.
Established governance: doc standards, review cadence, QA touchpoints to prevent regression.
Decision Snapshots
Token-first vs component-first → chose token-first to prevent brand drift across templates → reduced rework during implementation.
Centralized doc vs tribal knowledge → shipped structured component docs + CSS rules → faster onboarding + fewer interpretation gaps.
Accessibility baked in vs post-QA → embedded checks in specs and reviews → fewer late-cycle fixes.
Artifacts: Design System Architecture
To reduce design debt and accelerate feature roll-out, we adopted the Atomic Design methodology, a proven industry standard for creating scalable and maintainable design systems. This approach allowed us to break down the UI into fundamental components, promoting consistency and reusability across the platform.
Governance and Maintenance:
Established bi-weekly design system review sessions with developers and stakeholders to assess new component requests and updates.
Implemented Agile UX methodologies to integrate design system tasks into sprint cycles, ensuring continuous improvement and alignment with development workflows.
Developed comprehensive documentation to guide usage and facilitate onboarding of new team members.
Artifacts: Handoff + QA Workflow
To streamline execution and reduce friction between design and engineering, I led the implementation of a dual-source Figma workflow that clearly separated design exploration from implementation-ready components. I collaborated directly with developers to establish a shared system of language, structure, and QA practices, reducing handoff time by 30% and minimizing implementation errors across releases.
Key Outcomes & Leadership Impact:
Implemented a dual-source Figma strategy to manage source-of-truth tokens separately from visual explorations
Standardized naming conventions between design and code (e.g., btn-primary, surface.default.inverted) to ensure alignment across teams
Documented reusable CSS classes and design rules, embedding code snippets directly into component specs
Reduced design-to-dev ambiguity, accelerating delivery velocity and improving design consistency across 30+ templates and flows
Outcomes & Impact
30% faster dev cycles
Delivery measured via release cadence across the 6-week rebrand window.
WCAG 2.1 AA Conformance
WCAG AA passing for core components/workflows using WAVE.
Visual Consistency
Standardized UI patterns across 20+ key templates and flows.
Scalable Architecture
Token + component foundation adopted across distributed teams.
Let’s Connect
I steer organizations toward scalable, user-centered design by combining strategic leadership, systems thinking, and practical, hands-on partnership.
Reach me at rudy [at] rudyland dot com or via LinkedIn.