Rodrigo Mafra - Empowering Human-Centered Innovation with GenAI

Design System Engineering

Leveraged AI-augmented workflows to develop and deliver a scalable, unified design system for a global data platform, improving usability and team focus on user needs.

Challenge

The client’s data platform faced widespread UI inconsistencies and fragmented experiences across its ecosystem. The goal was to unify the visual language, improve accessibility, and reduce cognitive load so teams could focus on solving real user problems rather than fixing interface discrepancies. (This project is an independent revision in collaboration with AI agents, from an older project I've worked on.)

Role

Senior Product Designer

Skills

Design Systems

Design Engineering

Accessibility

Component Driven Design

Figma

Challenge

Role

Senior Product Designer

Skills

Design Systems

Design Engineering

Accessibility

Component Driven Design

Figma

Designing in the Age of Agents

A practical framework for integrating generative AI into the design workflow, from insight generation to multimodal orchestration.

Discovery

We addressed UI inconsistencies to unify the platform, improving usability and accessibility to establish a shared visual language. This lessened the focus on UI alone, helping product teams better address user pain points. We also enhanced navigation and support access for users.

Tool stack

Research

By performing a market research in collaboration with an AI agent, we've identified various established design systems for similar platforms. One that became a strong reference was the Carbon Design System (IBM), specially due to their focus on designing products to be accessible to all, consistency and modularity.

Tool stack

Exploration

Reflecting on the challenge, how can we create a design system that's simple, scalable, and understandable for designers and developers? We recognized developers' needs and collaborated with a front-end AI agent to improve the system. We integrated tokens, CSS classes, and code snippets into the Figma file, enabling quick learning from visual harmony and coding perspectives.

Tool stack

Build

The system was crafted to expand and support numerous users. By applying our new design system principles, we enhanced readability for GenAI, utilized nested components, and optimized component properties for smoother variations.