Esfera Design System – Nexo – Guilherme Lima Design

Esfera Design System - Nexo

O Nexo é uma plataforma SaaS para integração de dados e gerenciamento de APIs, voltada para ambientes corporativos.

Todo o produto foi pensado para telas Desktop, com foco em engenheiros de dados, desenvolvedores e analistas.
A plataforma é cross, composta por dois módulos principais:

• API Management
• Data Integration

Apesar de fazerem parte do mesmo ecossistema, as duas soluções eram percebidas como produtos separados.

⚠️ Este projeto é real, porém, por questões de compliance e confidencialidade, nomes oficiais, marcas e dados sensíveis foram adaptados.
O processo de design, entregas e aprendizados aqui apresentados refletem fielmente minha atuação.

Data:

16 de Maio de 2023

Papel:

Senior Product Designer

Processo

Para resolver esse problema, utilizei um processo comum chamado Double Diamond.

Problema

Com o crescimento rápido do produto, surgiram inconsistências visuais e funcionais:
Paletas de cores divergentes entre os dois módulos.
Componentes similares (botões, tabelas, ícones) com estilos diferentes.
Tokens e variables pouco documentados, gerando retrabalho entre times.
Dificuldade em escalar o design e manter consistência entre novas features.

Impactos:
Experiência fragmentada para os usuários, que precisavam alternar entre API e Data Integration.
Maior esforço para desenvolvedores e designers, que não tinham um guia único.
Aumento do custo de manutenção e do risco de inconsistência.

Solução

A proposta foi criar o Esfera Design System, um único sistema de design para integrar as duas soluções.
Principais entregas:
Definição de tokens globais (cores, tipografia, espaçamento, ícones).
Criação de componentes reutilizáveis (botões, inputs, tabelas, modais, notificações).
Documentação clara de padrões de uso e guidelines de acessibilidade.
Biblioteca única no Figma, conectada aos repositórios front-end.
Consolidação de identidade visual que transmitisse confiança, clareza e consistência.

Exemplo prático:
Antes: Botões de “Executar Pipeline” e “Chamar API” tinham estilos diferentes.
Depois: Ambos passaram a usar o mesmo componente base, respeitando hierarquia visual e estados (normal, hover, pressed, disabled).

Construção

Foram executados 3 passos para a construção do Design System:

1. Fundação

Logo / Colors / Typography / Tokens

2. Biblioteca UI Design

Componentes / Ícones / Ilustrações

3. Documentação

Figma Design / Story Book Front-end

Resultados

Com a adoção do Esfera Design System:
Redução de 60% no tempo de entrega de novas telas, pois os times passaram a usar componentes prontos.
Diminuição significativa de inconsistências visuais.
Usuários passaram a perceber Nexo API e Nexo Data como partes de um mesmo produto.
O time de desenvolvimento passou a ter menos retrabalho e maior alinhamento com o design.

Aprendizados

Um Design System não é só uma biblioteca de UI: é uma estratégia de consistência que conecta design, tecnologia e experiência.
Tokens bem definidos são a base para escalar o produto de forma sustentável.
O maior ganho não foi apenas estético, mas sim de eficiência e colaboração entre os times.
A manutenção contínua e a adoção por todos os times são essenciais para o sucesso do Design System.