Evolução da plataforma com DS escalável e foco em modo escuro
Entre as versões 3.0 e 4.0 conduzimos rodadas de discovery e pesquisa com usuários de alto tráfego (operações intensivas e múltiplos usuários por conta). Consolidamos um Design System completo, redefinimos hierarquia textual e cromática e otimizamos a arquitetura de navegação — com impacto direto na eficiência e percepção de valor.
68%
Adoção de modo escuro
Ferramentas operacionais tendem a ter alta adoção de dark mode por conforto visual em longas sessões.
92%
Percepção de melhora
Pesquisa pós-lançamento sobre legibilidade, hierarquia e navegabilidade.
NPS 58
Satisfação líquida
Patamar considerado excelente em B2B SaaS quando ≥ 50.
80%+
Uso dinâmico sem “cliques falsos”
Sessões mapeadas no Clarity indicaram fluxo fluido e metas cumpridas.
Projeto
Contexto e Objetivos
A Voxuy é uma plataforma de automação e CRM orientada a WhatsApp. O desafio para a 4.0 era consolidar um sistema UI consistente, reduzir atritos em fluxos críticos e elevar o nível de acessibilidade — mantendo performance para operações com altos volumes de mensagens.
- Consistência visual e semântica: tokens, escalas e componentes unificados.
- Legibilidade: revisão de tipografia, pesos e contrastes (WCAG como norte).
- Navegação: separação clara de módulos e priorização do funil de WhatsApp.
- Escalabilidade: padrões para acelerar entrega de integrações e microfeatures.
Sistema de Design
Design System: fundamentos e escalabilidade
O DS foi construído com foco em tokens (cores, tipografia, espaçamentos), bibliotecas de componentes, estados e variantes. O objetivo: permitir iterações rápidas, handoff previsível e confiável entre Design e Engenharia — reduzindo ambiguidade e melhorando time-to-release.
Acessibilidade e conforto
Modo Escuro: conforto visual e foco operacional
Para operações de longa duração, o modo escuro reduz ofuscamento e fadiga ocular, além de melhorar a leitura de denso conteúdo UI quando se adota contraste adequado e hierarquia tipográfica.
Na 4.0, 68% dos usuários optaram pelo dark mode; e 92% relataram percepção “muito positiva” após revisão de pesos, tamanhos e contraste de textos, além de cores de estado e affordances mais claras.
IA de Informação
Arquitetura e Navegação: clareza por módulos
Separar os tipos de módulos no menu (WhatsApp, Vendas, Automações, Configurações) facilitou o entendimento de “onde estou” e “o que posso fazer”. O acesso ao WhatsApp — porta de entrada para grande parte das tarefas — ganhou destaque funcional.
- Rotulagem e estados de seleção consistentes.
- Prioridade visual para fluxos de maior valor.
- Redução de ambiguidade e tempo-para-tarefa.
Caminhos de maior valor
Fluxos críticos simplificados
Os fluxos críticos priorizam o acesso ao WhatsApp a partir do menu e da seleção de módulo, conectando às ações principais (Envio de mensagens, Automação e Relatórios).
- Menu Principal → Seleção de Módulo → WhatsApp
- WhatsApp → Enviar Mensagens, Automação, Relatórios
Discovery & Research
Pesquisa contínua, métricas e qualidade de uso
Entre 3.0 e 4.0, rodamos sprints de discovery e entrevistas com operadores de grande tráfego (alto volume de ações por usuário e múltiplos usuários por conta). Mantivemos um board público de demandas — priorizando, entregando e comunicando releases de forma transparente.
- CSAT/CES: satisfação e esforço melhoraram após ajustes de fluxo e linguagem.
- NPS 58: acima do patamar considerado muito bom em SaaS B2B.
- Clarity: heatmaps/sessões mostraram 80%+ de uso dinâmico e poucos cliques vazios.
Handoff & Velocity
Impacto em Engenharia e Entrega
A padronização interna + DS reduziram ambiguidade e aceleraram a entrega de integrações e microfeatures. Com componentes previsíveis, tokens e documentação visual, o time de desenvolvimento ganhou cadência — além de diminuir retrabalho e alinhamentos assíncronos.
- Componentes com variantes/estados padronizados → menos branch específica para UI.
- Tokens (cor/tipo/spacing) → consistência automática entre telas.
- Protótipos navegáveis e specs claros → handoff sem ruído para Dev/QA.
Resultados
A 4.0 elevou a percepção de qualidade (92% “muito positiva”), consolidou a adoção de modo escuro (68%), melhorou a navegabilidade por módulos e impulsionou a velocidade de entrega do time. Com o DS, o produto passou a evoluir de forma previsível — sem perder a flexibilidade para novas integrações.
↓ retrabalho
Menos iterações entre Design/Dev
Componentes claros e tokens alinhados
↑ velocidade
Entrega de integrações
Padronização e specs objetivas
NPS 58
Satisfação do cliente
Destaque em SaaS B2B
80%+
Uso fluido no Clarity
Poucos cliques vazios e metas cumpridas