Em desenvolvimento: esta página ainda não está pronta. Volte em breve para conferir as novidades!
Design System Enterprise SaaS BPM Frontend

Zeev: Orquestração de processos e agentes de IA para mais de 350 mil usuários

Acompanhe o processo de desenvolvimento e evolução da plataforma de automação de processos da Stoque.

Empresa Stoque / Zeev Papel UX/UI Designer Sênior Duração 2021 até o presente Impacto Mais de 350.000 Usuários
4.49 ★ Capterra Rating

Aumento do índice de satisfação global de 3.1 para 4.49 estrelas.

+350K Usuários Ativos

Plataforma escalada para operações de empresas como Itaú, Sympla e Inmetro.

6× Premiações Globais

Reconhecimento recorrente no Global Awards for Excellence in BPM.

+50 Componentes no DS

Biblioteca escalável integrada entre o ambiente de design no Figma e o código de produção.

Sobre o produto

Milhares de operações de risco de grandes empresas nacionais são realizadas através do Zeev

A Stoque desenvolve infraestrutura digital. O Zeev, seu principal produto, é uma plataforma de automação inteligente de processos que sustenta a operação de corporações como Banco BMG, TIM e PlayKids.

O sistema funciona como um BPMS voltado à orquestração de fluxos de trabalho complexos. Ele viabiliza a criação desde processos rotineiros de aprovação de férias até automações de atendimento integradas com agentes de IA. A plataforma opera como o motor central de milhares de operações críticas. Ela garante precisão, eficiência e rastreabilidade por meio de uma interface acessível.

Liderei a evolução da interface do usuário ao longo deste período. O trabalho consistiu em transformar uma plataforma robusta e visualmente fragmentada em um ecossistema coeso, escalável e whitelabel.

Figma Bootstrap 5.3 SCSS JavaScript (ES6+) WCAG 2.1 AA
O Desafio

Inovar o produto através de um novo design system, refatorar módulos e melhorar a experiência do usuário

Embora a infraestrutura de backend do Zeev permanecesse sólida, anos de desenvolvimento descentralizado acumularam débitos técnicos e de design que resultaram em uma interface fragmentada e inconsistente ao longo de mais de vinte módulos. Essa falta de padronização, somada à ausência de suporte para navegação móvel e diretrizes da WCAG, prejudicava a usabilidade e a percepção de valor pelo cliente, enquanto a desconexão entre o Figma e o código gerava retrabalho constante, atrasos e bugs para a engenharia. Para mitigar essas falhas e estabelecer uma fundação tecnológica escalável, o projeto focou na implementação de um novo Design System e em otimizações estruturais de UX.

Captura de tela do sistema Zeev antes do processo de redesign
Interface legada: Visão da plataforma antes da implementação do novo Design System e das otimizações de UX.
A Solução

Centralização e padronização visual através de um novo framework de UI

Projetei e codifiquei o zeev-bootstrap para resolver o débito arquitetônico. Criamos uma camada de abstração em cima do Bootstrap, ajustada para lidar com a complexidade de um software enterprise.

Optamos pelo Bootstrap por pragmatismo operacional, dado que a engenharia já dominava a tecnologia. Elevamos a maturidade de design sobre uma base estável para otimizar a curva de aprendizado e acelerar a adoção do sistema por todo o time comercial e de produto.

zeev-bootstrap — visão geral do design system com grid de componentes
zeev-bootstrap: Componentes prontos para produção, desenhados para velocidade e escala.

Design Tokens Estratégicos

Arquitetura baseada em CSS Custom Properties. Cores, tipografia e elevação automatizados, viabilizando a ativação do Dark Mode sem refatoração de código.

Mais de 50 Componentes Escaláveis

Biblioteca documentada em código e no Figma. Inclui de modais a tabelas de dados de alta densidade, com padronização de estados de erro, foco e hover.

Paridade Figma e Frontend

A nomenclatura da camada no Figma corresponde à classe no CSS. A padronização reduziu ruídos no Handoff e diminuiu o tempo investido em controle de qualidade visual.

Documentação para Desenvolvedores

Criação de diretrizes focadas em engenharia. As instruções cobrem a instanciação de componentes, regras de acessibilidade ativas e processos de versionamento.

Engenharia de UI

Refatoração dos módulos principais da plataforma

Após a consolidação do Design System, conduzi a migração dos módulos vitais do Zeev. O escopo incluiu o Workflow Builder, o Gerenciador de Processos e os Dashboards Analíticos.

Módulo Zeev em tema claro — interface responsiva com componentes do design system
Light Mode: Interface escaneável e com alto contraste na tela de Login.
Módulo Zeev em tema escuro — implementação consistente do dark mode via CSS Custom Properties
Dark Mode: Sustentado por Design Tokens no módulo de Form Builder.

Princípios de excelência e governança:

Acessibilidade WCAG 2.1 (AA)

Conformidade técnica assegurada com contraste mínimo de 4.5:1, estados de foco definidos para navegação por teclado e marcação semântica padronizada.

Atributos ARIA

Aplicação de aria-labels, gerenciamento de foco em modais e suporte a leitores de tela durante operações complexas.

Escalabilidade e Responsividade

Design estruturado para resoluções variadas. Garantia de fluidez e ergonomia desde dispositivos móveis até monitores ultrawide.

Validação com Dados

Fluxos críticos submetidos a testes de usabilidade para atestar a eficiência da nova arquitetura visual e das interações propostas.

Liderança em DesignOps

Processos de design e impacto no produto

A excelência técnica exige processos ágeis. Os esforços foram direcionados ao desenho das interfaces e à otimização do fluxo de entrega de valor pela equipe.

Métricas e OKRs de Design

Implementação de auditorias trimestrais para medir a maturidade da usabilidade. Os dados coletados fundamentaram a apresentação de resultados e roadmaps para a diretoria.

Melhoria Contínua

Sessões de retrospectiva focadas no fluxo de trabalho. O modelo reduziu atritos recorrentes entre as fases de discovery, prototipagem e entrega.

Integração de Inteligência Artificial

Uso de ferramentas como Claude e Copilot para a geração de mockups em código, além de LLMs para análise de dados de UX. As integrações resultaram em um aumento de produtividade nas entregas da equipe.

Handoff Documentado

Inclusão de anotações técnicas e especificações de estados nas User Stories. A documentação permitiu que o desenvolvimento prosseguisse com menos necessidade de alinhamentos síncronos.

Em Produção

Galeria de imagens dos protótipos

Um mergulho visual nos módulos refatorados, onde design encontra funcionalidade extrema.

Resultados e ROI

O impacto nos negócios demonstrado em dados

O design otimizado reduz custos operacionais e eleva o valor percebido do produto. Os indicadores abaixo consolidam o resultado da implementação.

+43%
Capterra Rating

A satisfação do usuário elevou a nota média global da plataforma de 3.1 para 4.49 estrelas.

+150%
Adoção em Escala

A interface modular absorveu a entrada de novos usuários do segmento enterprise mantendo a estabilidade estrutural.

+30%
Velocidade de Delivery

O uso de componentes testados reduziu o tempo dedicado ao desenvolvimento frontend das interfaces.

↓
Queda em Tickets UI/UX

A padronização diminuiu o volume de chamados no suporte relacionados a dúvidas básicas de navegação.

6×
Liderança Global

A maturidade do produto contribuiu para o reconhecimento recorrente no Global Awards for Excellence in BPM.

✓
Branding Unificado

A reestruturação adequou o produto aos novos requisitos corporativos de marca.

Melhoria de produtos digitais

Caso procure um profissional com experiência em alinhar Design Estratégico, Arquitetura Frontend e Visão de Negócio para o desenvolvimento de plataformas escaláveis, entre em contato.

Contato via WhatsApp contato@ericknobre.com Ver todos os cases