Engenharia de Sistema de Design

Um design system escalável para uma plataforma de dados global, construído com fluxos de trabalho AI-native.

Fluxos de trabalho com IA para desenvolver e entregar um design system escalável e unificado para uma plataforma de dados global.

Docs de padrões do sistema de design MDR

Problema

A UI fragmentada, roubava o foco das dores reais dos usuários.

A plataforma de dados do cliente enfrentava inconsistências de UI generalizadas em seu ecossistema. Times gastavam energia consertando discrepâncias de interface em vez de resolver dor de usuário. O objetivo era unificar a linguagem visual, melhorar acessibilidade e reduzir carga cognitiva.

Este projeto é uma revisão independente em colaboração com agentes de IA, de um projeto anterior em que trabalhei.

Princípios

Projetando na era AI-native.

Um framework prático para integrar IA generativa no fluxo de design. Da geração de ideias até orquestração multimodal. IA é alavanca no processo de design, não a substituição do pensamento crítico do designer.

Processo

Quatro fases. Cada uma fecha um passo do discovery ao delivery.

Discovery

Abordamos inconsistências de UI para unificar a plataforma, melhorando usabilidade e acessibilidade para estabelecer uma linguagem visual compartilhada. Isso diminuiu o foco em UI isolado, ajudando times de produto a endereçar melhor pontos de dor de usuário. Também melhoramos navegação e acesso de suporte para usuários.

Stack de ferramentas

Pesquisa

Ao conduzir pesquisa de mercado em colaboração com um agente de IA, identificamos sistemas de design estabelecidos para plataformas similares. Uma referência forte foi o Carbon Design System (IBM), especialmente para acessibilidade, consistência e modularidade.

Stack de ferramentas

Ideação e Prototipação

Refletindo sobre o desafio: como podemos criar um sistema de design que seja simples, escalável e compreensível para designers e desenvolvedores? Reconhecemos necessidades de desenvolvedores e colaboramos com um agente de IA front-end para melhorar o sistema. Integramos tokens, classes CSS e snippets de código ao arquivo Figma, permitindo aprendizado rápido de perspectivas de harmonia visual e codificação.

Stack de ferramentas

Delivery

O sistema foi projetado para se expandir e suportar numerosos usuários. Ao aplicar nossos novos princípios de sistema de design, melhoramos legibilidade para GenAI, utilizamos componentes aninhados e otimizamos propriedades de componentes para variações mais suaves.

Stack de ferramentas

Designs

Documentação de padrões e componentes

Docs de sistema de design MDR mostrando banners de alerta, indicadores de progresso e padrões de carregamento esqueletizado — Banners de alerta, indicadores de progresso e padrões de carregamento esqueletizado.

Especificação de componente de card com variações de background, ticker e hover — Especificação de card: variações de background, ticker e hover.