Chatsac Nexus | UI Design kit
Construção de uma linguagem de produto para uma plataforma de operação conversacional, CRM e inteligência aplicada, partindo de wireframes amplos e chegando a um beta funcional com identidade própria, hierarquia clara e base escalável.
Meu papel: UI Design, Design System, organização da experiência e revisão crítica de interface.
Contexto
O ChatSAC Nexus nasceu como um produto proprietário para centralizar atendimento, operação comercial e inteligência conversacional em uma única plataforma. Quando entrei no projeto, já existia uma base extensa de wireframes mapeando fluxos e funcionalidades em diferentes frentes do sistema.
Essa estrutura incluía módulos como Conversas, Dashboard, Ralo Financeiro, Motor de Conversão, Kanban, Softphone, Campanhas, Audit Log, Configurações, Onboarding, Marketplace e fluxos de suporte. O desafio, portanto, não era apenas desenhar telas novas, mas transformar esse ecossistema em uma experiência coesa, legível e escalável.
Meu foco foi organizar visualmente esse produto, definir uma linguagem de interface consistente e criar critérios de hierarquia que permitissem ao usuário navegar entre módulos complexos sem sensação de ruído ou fragmentação.
Sinais iniciais
Antes de consolidar a interface, foi realizado um levantamento exploratório para identificar as principais dores dos usuários e os pontos críticos da experiência. O questionário focou em sinais qualitativos: velocidade da lista de chats, eficiência dos filtros na fila, perda de contexto entre atendimentos e a confiabilidade dos dashboards e relatórios. Também avaliamos o peso de funções como CRM/Kanban nativo e integrações via API.
Por ser uma amostra reduzida, tratei os dados como uma bússola de produto, e não como validação estatística. Cruzei esses sinais com os wireframes e as prioridades do time para guiar as decisões de design. Três padrões ficaram evidentes:
- Centralidade Operacional:
O uso é recorrente e intensivo durante todo o expediente. Isso torna a velocidade, a atualização em tempo real e a legibilidade da informação requisitos inegociáveis.
- Inteligência na Fila:
A organização do atendimento exige filtros mais robustos (por tempo de espera, origem, tags e status) para evitar gargalos.
- Preservação de Contexto:
Ao alternar conversas, o usuário perdia o ritmo. Identificamos a necessidade de reforçar o histórico e usar sinais visuais que facilitem a retomada rápida do atendimento.
Na camada de gestão, ficou claro que os KPIs precisavam ser mais acionáveis e transmitir confiança. O produto não deve apenas exibir números, mas conectar operação e crescimento através de ferramentas de CRM e exportação de dados.
Com base nisso, fechei o foco da interface em três pilares: priorização operacional, preservação de contexto e clareza gerencial.
Desafio
O principal desafio do projeto foi transformar uma base extensa de wireframes em um produto com coerência visual e lógica de uso clara. Como o sistema reunia módulos de naturezas diferentes — operação diária, acompanhamento comercial, inteligência de dados, automação, onboarding e governança — era fácil que a experiência se tornasse fragmentada.
A interface precisava atender necessidades distintas dentro da mesma plataforma. Para o atendente, o foco era velocidade, contexto e ação. Para a gestão, o foco era leitura de performance, gargalos e oportunidades. Para a operação como um todo, o produto precisava funcionar como uma camada única entre atendimento, CRM, campanhas e inteligência aplicada.
Meu desafio foi encontrar uma linguagem capaz de equilibrar densidade e clareza, criar consistência entre módulos muito diferentes e estabelecer uma base visual que permitisse crescimento sem perder legibilidade.
Processo de design
Para organizar o produto, comecei separando a plataforma em camadas de uso. A primeira camada era a operação diária, com foco em Conversas, fila, triagem, Softphone e ações rápidas de atendimento. A segunda era a camada gerencial, reunindo Dashboard, Ralo Financeiro, Audit Log e indicadores voltados à leitura de performance e governança. A terceira era a camada de crescimento e expansão, onde entravam Motor de Conversão, Campanhas, Kanban, Marketplace e outros módulos com papel mais estratégico.
Essa divisão ajudou a definir o peso visual de cada área e a reduzir a sensação de que tudo tinha a mesma importância ao mesmo tempo. Com isso, ficou mais fácil guiar a navegação e criar hierarquia entre informação central, informação de apoio e ações secundárias.
Em paralelo, estruturei uma base de interface consistente. Trabalhei tipografia, espaçamento, estados visuais, semântica de cor, componentes reutilizáveis e padrões para listas, cards, tabelas, filtros, modais, sidebars e painéis auxiliares. O objetivo era garantir que um módulo complexo como Conversas ainda parecesse parte do mesmo produto que Dashboard, Kanban ou Configurações.
Também adotei alguns princípios simples para orientar as decisões visuais. O primeiro foi informação crítica primeiro: tudo que impacta ação imediata precisava aparecer sem esforço. O segundo foi uma ação principal por contexto: em fluxos densos, o usuário precisava entender rapidamente o próximo passo mais importante. O terceiro foi IA como apoio, não como ruído: elementos inteligentes, como o AI Advisor, deveriam ajudar a interpretação da conversa e não competir com ela. O quarto foi clareza acima de ornamentação: num produto operacional, previsibilidade vale mais do que excesso de expressão visual.
Na prática, isso se traduziu em decisões como dar protagonismo à área central da conversa, manter a lista lateral como espaço de triagem e fila, posicionar o painel inteligente como camada de suporte contextual, transformar dashboards em resumos executivos com leitura mais direta e estruturar módulos como Kanban e Motor de Conversão a partir de blocos mais consistentes e previsíveis.
Solução em produto beta
Com o avanço do projeto, a interface começou a ganhar forma no produto beta, consolidando as decisões de estrutura, hierarquia e linguagem visual adotadas ao longo do processo.
A navegação lateral persistente passou a organizar o acesso aos principais módulos da plataforma, enquanto o modo escuro reforçou identidade, contraste e foco operacional. Na tela de Conversas, a estrutura entre lista, histórico e painel de apoio ficou mais clara, permitindo que o usuário enxergasse fila, contexto e inteligência adicional sem perder o foco principal do atendimento. O AI Advisor passou a funcionar como uma camada interpretativa, reunindo sinais como score do lead, potencial financeiro, intenção, sentimento e recomendações contextuais.
No Dashboard, a leitura deixou de ser apenas quantitativa e passou a incorporar um resumo executivo em linguagem natural, conectando KPI com diagnóstico e ação sugerida. Isso ajuda a transformar dados em interpretação, especialmente para perfis mais estratégicos, como liderança e gestão.
No Motor de Conversão, a listagem de campanhas e seus indicadores ficou mais direta, com status, métricas principais e ações operacionais mais visíveis. Já a área de Conquistas mostrou como elementos de gamificação podiam existir dentro da plataforma sem quebrar a consistência do sistema, reforçando engajamento sem comprometer a linguagem de produto B2B.
O resultado dessa etapa foi a transição de um conjunto amplo de ideias e wireframes para um produto com identidade visual própria, consistência entre módulos e bases concretas para evolução técnica e funcional.
Resultado e impacto
O projeto ajudou a transformar uma arquitetura extensa de wireframes em uma experiência mais madura, consistente e pronta para evolução contínua. Em vez de um conjunto de telas isoladas, o ChatSAC Nexus passou a ter uma linguagem de produto unificada, com critérios mais claros de navegação, hierarquia e ação.
Os principais ganhos foram qualitativos, mas importantes. A experiência ficou mais coerente entre módulos. A leitura da informação crítica ficou mais rápida. As áreas voltadas à operação diária ganharam mais foco e previsibilidade. Os módulos gerenciais passaram a comunicar melhor seus dados. E o produto ficou com uma base visual muito mais segura para incorporar novas funcionalidades sem perder consistência.
Mais do que desenhar telas, esse trabalho ajudou a estruturar como o produto deveria se comportar visualmente à medida que crescesse.
- unificação visual entre módulos operacionais, gerenciais e estratégicos
- melhora na hierarquia e leitura de informação crítica
- base mais consistente para evolução do produto em beta
- maior clareza entre atendimento, CRM, inteligência e automação
Aprendizados
Esse projeto reforçou para mim que, em produtos complexos, consistência estrutural é mais valiosa do que qualquer solução visual isolada. Quando o ecossistema tem muitos módulos, muitos papéis de usuário e alta densidade de informação, a interface precisa funcionar como sistema antes de funcionar como peça gráfica.
Também ficou claro que uma pesquisa pequena ainda pode ser útil, desde que seja tratada com honestidade. Mesmo sem volume suficiente para conclusões estatísticas, os sinais iniciais ajudaram a direcionar prioridades e serviram como critério para decisões importantes de design.
Outro aprendizado importante foi perceber que wireframes resolvem escopo, mas não resolvem linguagem. A passagem de wireframe para produto exige decisões de hierarquia, semântica, repetição, contraste e comportamento que só aparecem de fato quando a interface começa a ganhar consistência como sistema.
No fim, o ChatSAC Nexus foi um exercício forte de transformar estrutura em produto, complexidade em clareza e múltiplas frentes funcionais em uma experiência mais unificada e escalável.
O maior resultado deste projeto não foi apenas desenhar a interface de um módulo, mas ajudar a dar forma a um produto inteiro — com lógica, identidade e espaço real para crescer.
