De uma base de conhecimento datada a uma plataforma com IA

Os clientes novos não ficavam. Pra enxergar algum valor, eles primeiro precisavam trazer a base de conhecimento que já tinham, e essa migração dependia do time da Helpjuice fazer por eles. Enquanto isso, o onboarding antigo enchia o espaço com conteúdo de exemplo e uma fileira de configurações. Ou seja: a pessoa configurava um produto que ainda não tinha nada dela.

Comecei olhando como os concorrentes resolvem cadastro, onboarding, demo e estado vazio, e marquei o que valia a pena manter. Depois sentei com vendas, suporte e engenharia pra entender onde as contas novas travavam e até onde uma importação conseguia ir de verdade.

A ideação foi fundo nas importações, porque é ali que tudo quebra. Um link que o produto reconhece, um que ele não reconhece, um arquivo, vários, um zip, PDF, Word, HTML, planilha. Passei por cada caso com a engenharia antes de desenhar o happy path. Edge cases first, sempre.

O onboarding novo começa com uma promessa que o produto cumpre: criar uma base de conhecimento em 10 segundos. Daí vêm quatro passos. Colar o link da base antiga pra importar, ou subir os arquivos. Escolher quem pode acessar. Escolher um layout, com prévia ao vivo. E pra fechar, a base já chega com o logo e as cores do cliente, pronta pra ajustar ou lançar.

Logo em seguida roda uma demo interativa rapidinha, em cima do conteúdo do próprio cliente: primeiro ele testa a helpbar com IA ou o chatbot, depois faz um tour guiado até o dashboard. No meio do caminho aparece uma consultoria gratuita, e pular é um clique só.

Todo cliente que dava certo tinha alguém dedicado a manter a base em dia. A maioria não tinha, e o conteúdo ia ficando velho. O objetivo era uma base que se mantém atualizada sozinha, sem precisar de um gestor de conhecimento.

O conhecimento já existia, só que na cabeça das pessoas. O difícil era tirar de lá sem pedir que ninguém virasse redator. Desenhei em três passos: alguém pergunta pro time, o especialista conta o que sabe do jeito que preferir, e a IA escreve o artigo.

Um pedido pode nascer em qualquer lugar onde aparece um buraco: no planner de artigos, na extensão do Chrome ou numa busca que não acha nada, onde o pedido já aparece na hora. A IA também varre o conteúdo e abre pedidos sozinha quando sente falta de alguma coisa.

O especialista recebe um e-mail com um botão Answer now que abre a pergunta direto, sem login. E responde do jeito mais fácil pra ele: digitando, falando ou colando um link do YouTube, do Loom ou do WizardShot. Qualquer um desses vira um artigo estruturado pela IA.

Se ninguém responde, sai um lembrete a cada três dias, três vezes (gentil, mas insistente). Quando o artigo fica pronto, quem respondeu leva o crédito, e o pedido anda sozinho pelo planner: de pedido pra rascunho, revisão e publicado.

Criei e desenhei o AI Search e o AI Chatbot, e contribuí com o Swifty, o agente de IA que o time de vendas usava como diferencial. A ideia do Swifty é levar a base de conhecimento até onde os clientes já estão: um chatbot que responde a partir dela e uma barra de busca que também pergunta pra IA.

Antes, o widget era configurado num formulário só: dois seletores de cor, um dropdown de posição e uma caixa de regras, do lado de uma lista fixa de artigos sugeridos. Nada ali falava de IA, e nada mostrava o que o usuário ia ver de verdade.

Redesenhei a configuração pro admin nunca mais configurar no escuro. Chatbot e busca ganharam duas abas, cada ajuste fica do lado de uma prévia ao vivo do widget, e o mesmo padrão vale pra estilo, conteúdo pesquisável, conteúdo fixado, gatilhos e instalação. What you see is what you get.

A outra metade era confiança. Cada resposta mostra de qual artigo veio, o chatbot fala mais de 50 idiomas, e conteúdo privado só aparece pra quem tem permissão. A instalação cabe numa tela só: o código pra colar, os domínios onde o widget pode aparecer e uma chave pra colocar na base automaticamente.

Na busca, olhei como outras ferramentas mostram os resultados e redesenhei a da Helpjuice: termo destacado, o caminho até cada artigo, quando ele foi atualizado e o Ask Swifty AI sempre no topo. Os filtros por autor, acesso, categoria e data ficam numa linha logo abaixo do campo.

Aí os admins quiseram saber o que as pessoas estavam perguntando. Desenhei o AI Analytics em dupla com um desenvolvedor, e ele saiu da ideia e foi pro ar em uma semana. Todas as perguntas do chatbot e da busca numa lista, o status de cada uma, de resolvida a não resolvida, e a conversa inteira do lado. Fast and furious.

As pessoas perdiam tempo pulando de aba em aba atrás de uma resposta que elas mesmas já tinham escrito. A ideia era levar a base de conhecimento pra onde elas já trabalham.

Comecei com rascunhos e muita conversa com o time. O primeiro mapa dava uma porta de entrada pra cada funcionalidade: um clique pra resumir, reescrever ou criar artigo com IA, o ícone da extensão pra buscar, um caractere especial pra linkar um artigo e o texto selecionado pra responder rapidinho um ticket de suporte.

Depois desenhei todos os cenários: instalar e entrar pela primeira vez, uma base ainda vazia, buscar, criar um artigo com IA e pedir um quando nada aparece. Nenhum deles termina num beco sem saída. Uma busca que não acha nada vira um pedido pro especialista certo.

O pulo do gato foi pro ar como duas barras: digita // em qualquer campo de texto, num e-mail ou num chat, e insere um artigo sem sair da página. Também desenhei as imagens da Chrome Web Store.

E funciona no caminho contrário também. Seleciona qualquer página, anotação ou chat, e a extensão transforma tudo num artigo organizado. Pedir um artigo que está faltando fica a um clique.

A landing page vende na mesma ordem em que as pessoas usam: instala em 30 segundos, entra e sai buscando e criando de qualquer lugar.

Desenhei o WizardShot do zero: ele grava um processo na tela e, com IA, transforma tudo num tutorial passo a passo. Foi lançado no Product Hunt em maio de 2024, comigo listada como uma das makers, e chegou a #2 Product of the Day. Not bad, right?

A captura começa com um clique na extensão. Cada clique da pessoa vira um passo, com o print e uma marcação de onde clicar, e o tutorial pronto pode ser incorporado, compartilhado ou virar artigo na Helpjuice.

O site antigo vendia software. Redesenhei o site inteiro, da home e do pricing até as páginas de exemplos e de sobre, pra ele vender um resultado: uma base de conhecimento que as pessoas usam de verdade. E a conversão de cadastro melhorou.

Em vez de um paredão de nomes de funcionalidades, a home deixa o visitante clicar em cada uma e ver funcionando, começando pela busca com IA. Show, don’t tell. O pricing mostra o que cada plano inclui, e a suíte de IA é o que separa um plano do outro.

Pensei em cada página, não só na home. A de exemplos deixou de ser uma galeria comprida de prints e virou uma biblioteca com filtro por caso de uso, onde cada tema diz pra que serve e já leva a criar uma base.

Quando cheguei, não tinha design system, nem processo, nem padrão nenhum. Construí os três do zero e fui mentora de uma estagiária de design. Foi essa base que deixou um time pequeno entregar tanta coisa sem o produto desmoronar.

As avaliações diziam que o produto parecia antigo, mesmo quando as pessoas gostavam das funcionalidades. Com o sistema pronto, planejei uma repaginada nas páginas mais velhas: dashboard, planner de artigos, templates, redirecionamentos, links, feedback e glossário. Cada uma tinha que conversar com a linguagem visual das funcionalidades novas, com modais, pop-ups e mensagens de erro consistentes.

Transformei essa repaginada em tarefas de boas-vindas pros novos design associates. Cada página era um trabalho pequeno, de um ou dois dias, pra eles aprenderem o sistema entregando coisa de verdade já na primeira semana.

Os clientes tinham muita crítica aos temas da base de conhecimento, então um grupo pequeno foi chamado pra uma sessão de cocriação. Eles traziam as ideias e eu desenhava ao vivo no Figma, com todo mundo ainda na sala. Em volta dos temas, desenhei como cada cliente deixa a base com a cara dele: um editor visual com o código a uma aba de distância, a barra de admin dentro da base e as prévias de link.

Dentro do editor de artigos, desenhei o Swifty Writer, uma barra de IA pra escrever, ditar, gerar, imitar um tom e melhorar o texto. A ideia veio do fundador; eu desenhei cada estado, e nada encosta no artigo antes de quem escreve clicar em inserir.

Em volta do site, desenhei a página de sobre e os e-mails do produto. Nos lançamentos de IA tive liberdade criativa de sobra e comecei por um moodboard de Y2K, Memphis e NeoBrutalismo.