GaYa Design System: Architecting Natura Global Digital Ecosystem with AI

Role: Lead Product Designer & Design Ops

Impact: $2M+ in annual savings | 144% ROI | Multi-brand Architecture | AI-Accelerated Delivery

Act I: The Giant’s Growing Pains

The Natura Group is a global cosmetics powerhouse operating in over 100 countries, backed by 3,700 stores, 35,000 employees, and 7.7 million consultants. But beneath this massive footprint, rapid digital expansion and the acquisition of iconic brands like Avon and The Body Shop had created a highly fragmented digital ecosystem.

Products were being built in silos. We had over 20 disconnected themes, zero standardization, and a low design maturity relying heavily on legacy tools like Adobe XD. We were facing a chaotic migration to Figma with no clear governance. The challenge wasn't just fixing UI; it was answering a critical question: "How do we engineer a unified, global Design System while keeping legacy products alive and shipping fast?"

Act II: The AI-Powered Breakthrough (End-to-End Delivery)

Leadership demanded speed, but a traditional "rip and replace" strategy would break live products. We needed an unfair advantage to deliver an end-to-end solution without halting ongoing production.

This is where the strategy shifted from building a simple UI kit to engineering a Smart Design System powered by AI.

Instead of spending months manually translating design tokens into code, I integrated Cursor AI into our workflow. By leveraging this AI-driven development IDE, I was able to scaffold the foundational codebase and translate our semantic tokens into a living repository in record time. This allowed me to personally bridge the gap between design and engineering, ensuring a true end-to-end delivery from the initial Figma variable to the deployed React/Native component faster than anyone anticipated.

Act III: Architecting GaYa

With the AI-accelerated foundation in place, I structured GaYa to be multi-brand and multi-platform by design.

• The Token Pipeline: We built a rigid, scalable architecture moving from Primitive Tokens (raw hex/pixels) to Semantic Tokens (contextual usage), and finally Component Tokens.

• Multi-Brand Theming: GaYa’s robust architecture allowed for instant, seamless theme switching (Natura, Avon, The Body Shop) within the exact same codebase.

• Built for Accessibility: We enforced rigid standards for Light/Dark modes, High Contrast, Typography, and Grids, guaranteeing WCAG 2.2 compliance right out of the box.

  
  

Act IV: Winning the Culture War

A system is only as good as its adoption rate. Squads were hesitant to change, and stakeholders wanted "quick wins." To drive cultural transformation, I focused on tangible Design Ops metrics:

• For Developers: Provided copy-paste semantic tokens and AI-generated component boilerplates, drastically reducing CSS production time.

• For Designers: Rolled out Figma "Starter Kits," slashing prototyping time by ~40%.

• For Stakeholders: Shifted the perception of the Design System from a "cost center" to a high-speed efficiency engine. I established a democratic contribution model where squads could propose changes without bottlenecking the core team.

Act V: The Impact & Next Steps

By the end of 2024, the strategic implementation of GaYa supercharged by AI and a progressive migration strategy delivered massive business impact:

• $2 Million USD Saved: Calculated directly from engineering hours saved and the elimination of external vendor reliance for basic UI work.

• 144% ROI: Achieved through drastic reductions in QA time via pre-tested, API-ready components in Storybook.

• Global Scalability: Successfully powering 30+ Themes across Web, iOS, and Android for massive, global brands.

GaYa is now the beating heart of Natura digital products. Today, my role has evolved from system builder to ecosystem guardian, focusing on expanding AI-driven documentation and fully automating the design-to-code handoff.