[SV Chat] Produto e conteúdo apoiados por IA

Cases

Sobre mim

Competências

[SV Chat] Produto e conteúdo apoiados por IA

Clareza primeiro: organizando produto, narrativa e identidade

Data:

Junho de 2026

Cliente:

SV Chat

Categoria:

Tecnologia e atendimento | SaaS B2B

Meu papel:

Mapeamento e arquitetura da informação
Refinamento de identidade visual, do design system à mascote
Handoff do site como base pra implementação em react

Colaboradores:

Desenvolvimento: equipe parceira
Apoio de exploração: Claude, Stitch e ChatGPT
Implementação assistida por Codex

Meu papel:

Mapeamento e arquitetura da informação
Refinamento de identidade visual, do design system à mascote
Handoff do site como base pra implementação em react

Colaboradores:

Desenvolvimento: equipe parceira
Apoio de exploração: Claude, Stitch e ChatGPT
Implementação assistida por Codex

Resumo:

Arquitetura reorganizada em uma experiência one-page
Oferta complexa traduzida em uma narrativa mais clara
Nova interface e linguagem visual desenvolvidas
Layout entregue e implementado em React

Resumo:

Arquitetura reorganizada em uma experiência one-page
Oferta complexa traduzida em uma narrativa mais clara
Nova interface e linguagem visual desenvolvidas
Layout entregue e implementado em React

Uma plataforma completa, mas difícil de explicar

A SV Chat combina chatbots treinados no contexto de cada negócio com atendimento humano para situações que exigem intervenção real. Além da automação, a plataforma reúne recursos como CRM, telefonia, disparos e integrações.

O projeto começou com um esboço gerado no Claude, composto por uma home e diversas páginas avulsas. O pedido era “melhorar” a experiência, ainda sem uma direção clara para estrutura, conteúdo ou interface.

Desafio

O cliente chegou com uma primeira versão criada por vibe coding, mas ainda sem uma arquitetura capaz de organizar a amplitude da oferta. Produtos, módulos, benefícios e argumentos comerciais apareciam no mesmo nível, distribuídos entre uma home extensa e páginas avulsas.

O desafio era transformar esse material em uma estrutura coerente para apresentação, validação e handoff. Isso exigia definir prioridades, construir uma narrativa clara e estabelecer uma referência visual consistente para que a proposta pudesse ser efetivamente implementada.

Objetivo

O objetivo foi construir uma experiência em que hierarquia de informação e destaques visuais trabalhassem juntos. A interface deveria direcionar a atenção para os argumentos mais relevantes, dar ritmo ao conteúdo e comunicar a robustez do produto sem perder a proximidade humana da marca.
Ao concentrar a jornada em uma estrutura one-page, também buscamos reduzir a dependência de páginas internas e criar uma base mais objetiva para validação, handoff e implementação.

Da interface pronta à investigação do conteúdo

Em vez de começar diretamente pelo layout, remapeei o conteúdo recebido e classifiquei os argumentos entre dores, benefícios, produtos, módulos, provas e objeções. Esse diagnóstico mostrou que o problema não estava apenas na aparência, mas na forma como a oferta era organizada e apresentada.

A partir disso, estruturei uma jornada progressiva: reconhecimento da dor, entendimento da solução, funcionamento, aplicações por mercado, diferenciais técnicos, confiança e conversão.

Os estudos foram organizados e apresentados ao cliente em duas levas de apresentações em slides, facilitando a compreensão das decisões tomadas e alinhando os próximos passos.

Uma home capaz de concentrar a jornada

A arquitetura foi condensada em uma experiência one-page, com navegação por âncoras. Isso permitiu centralizar as informações essenciais, encurtar caminhos e reduzir a necessidade de manter diversas páginas no lançamento.

IA como exploração, não como decisão final

A primeira tentativa de aplicar a nova arquitetura foi produzida com apoio do Stitch. O resultado ajudou a visualizar rapidamente a estrutura, mas ainda precisava de refinamento em hierarquia, consistência, composição e identidade.

Essa comparação orientou o trabalho manual de UI e deixou mais claro onde a geração automática acelerava o processo e onde a direção de design continuava indispensável.

Refinando a estrutura em uma interface consistente

Com a arquitetura aprovada, usei o material inicial como referência para preservar cores e personalidade, mas retrabalhei o sistema visual e a hierarquia da página. O layout final passou a combinar banners, cards modulares, iconografia, imagens tratadas e blocos de conteúdo mais escaneáveis.

Cada seção recebeu uma função clara dentro da narrativa, evitando que recursos técnicos competissem com a proposta principal.

Criando um rosto para a automação

A Hanna foi criada como representação visual da inteligência da SV Chat. O processo envolveu estudos de silhueta, anatomia, expressões, acessórios e diferentes níveis de humanização, até chegar a uma personagem amigável, tecnológica e ligada ao universo de atendimento.

Além de humanizar a marca, a mascote passou a apoiar a explicação de dores, recursos e momentos de transição entre chatbot e atendimento humano.

Uma base mais clara para comunicar e construir o produto

O projeto resultou em uma home mais organizada, com hierarquia definida e uma narrativa capaz de explicar a relação entre IA, atendimento humano, módulos e integrações sem apresentar tudo ao mesmo tempo.

A entrega final reuniu arquitetura de informação, wireframes, interface de alta fidelidade, direção visual e aplicações da Hanna. O arquivo foi repassado ao desenvolvimento e utilizado como base para a implementação do site em React com apoio do Codex.

Takeaways

Arquitetura concentrada em uma jornada one-page

A navegação por âncoras centralizou o conteúdo essencial e reduziu a fragmentação da experiência.

Oferta organizada por níveis de entendimento

Dores, funcionamento, módulos, mercados e provas passaram a cumprir papéis distintos dentro da narrativa.

AVHT transformado em diferencial central

O atendimento humano deixou de aparecer como recurso secundário e ganhou espaço próprio na proposta do produto.

Identidade ampliada com a criação da Hanna

A mascote deu um rosto à automação e criou novas possibilidades para site, apresentações e comunicação da marca.

Handoff preparado para implementação assistida por IA

A estrutura e o refinamento visual forneceram uma referência consistente para a construção do front-end em React.

Takeaways

Arquitetura concentrada em uma jornada one-page

A navegação por âncoras centralizou o conteúdo essencial e reduziu a fragmentação da experiência.

Oferta organizada por níveis de entendimento

Dores, funcionamento, módulos, mercados e provas passaram a cumprir papéis distintos dentro da narrativa.

AVHT transformado em diferencial central

O atendimento humano deixou de aparecer como recurso secundário e ganhou espaço próprio na proposta do produto.

Identidade ampliada com a criação da Hanna

A mascote deu um rosto à automação e criou novas possibilidades para site, apresentações e comunicação da marca.

Handoff preparado para implementação assistida por IA

A estrutura e o refinamento visual forneceram uma referência consistente para a construção do front-end em React.

IA acelera possibilidades. Design transforma possibilidades em direção.

O projeto mostrou que gerar uma interface rapidamente não elimina a necessidade de compreender o conteúdo, estabelecer prioridades e construir uma narrativa. Claude, Stitch, ChatGPT e Codex ajudaram em diferentes momentos, mas foi a curadoria entre essas etapas que transformou um esboço genérico em uma solução consistente.

Mais do que só “dar um tapa no layout”, o trabalho organizou o modelo mental da oferta, criou uma linguagem visual própria e preparou uma base mais clara para desenvolvimento e evolução da marca.

Voltar para Home

Fale comigo