an abstract photo of a curved building with a blue sky in the background

Criador de sites com IA

Neste projeto eu fui a responsável por definir toda a experiência de usuário do produto, com base em regras de negócio definidas pelo time de Produtos.

Todas as interfaces foram criadas por mim e os os textos e instruções contidas nelas foram criadas por uma colega UX Writer que estava comigo no projeto.

O problema

Muita gente deseja ter um site para apresentar sua empresa e ter uma imagem mais profissional de seus serviços e produtos. No entanto, o processo de criar um site ainda é visto como algo complicado e que exige conhecimento em programação.

Sendo assim, a Locaweb pensou nesta dor que afeta principalmente pequenos e médios empreendedores e começou a desenvolver um Criador de Sites com Inteligência Artificial que une experiência simplificada com alta tecnologia para criação de páginas na web que sejam a cara do negócio. A empresa já tinha um produto Criador de Sites (sem IA), porém o mesmo estava há muito tempo sem evolução e apresentando alguns problemas técnicos. Por isso a decisão foi de desenvolver um criador novo do zero.

Então foi definido um MVP (Produto Mínimo Viável) para lançamento e posteriormente novas funcionalidades seriam adicionadas em fases seguintes da entrega da solução.

Antes de tudo, quem usa o Criador atual?

Antes de começar a pensar na experiência do novo Criador com IA, era necessário entender quem eram as pessoas que já utilizavam o Criador atual, como utilizavam e se seus objetivos estavam sendo atendidos com o produto. Como não tínhamos estes dados para consulta, disponibilizamos uma pesquisa para os clientes responderem e o resultado poderia nos direcionar melhor no desenho do novo produto.

Esta pesquisa foi conduzida por mim e teve a colaboração de demais colegas de equipe (Product Manager, Product Owner, UX Researcher e UX Writer).

O que queríamos investigar:

1 - Quais são os objetivos e motivadores dos clientes do Criador de Sites atual?

2 - Qual a finalidade do site destes clientes?

3 - O que eles sentem falta no Criador de Sites atual?

4 - Qual seu conhecimento técnico sobre gerenciamento de sites?

5 - Estariam dispostos a migrar para um Criador de Sites com Inteligência Artificial?

120

80%

É o grau de confiança do resultado desta pesquisa, com margem de erro de 6%

Participantes

Foi a ferramenta utilizada para a coleta de dados nesta pesquisa

Maze

Além dos insights mostrados no infográfico (gerado por IA), conseguimos levantar também dados sobre utilização de algumas funcionalidades e diversos comentários fornecidos pelos participantes, o que foi muito rico para o time.

Dados analisados, bora colocar a mão na massa

Após ter analisado os dados da pesquisa, iniciei o desenho da experiência e interfaces do novo Criador de Sites com IA usando o design system da empresa.

Primeira parte da experiência: coleta de dados para a criação do site

Após a contratação do Criador, a pessoa usuária é direcionada para a página que faz o convite para a criação do primeiro site.

Ao clicar em "Criar novo site" a pessoa usuária deve informar alguns dados sobre a empresa para que o site seja criado conforme as características do negócio.

- Tipo de site (institucional ou landing page)

- Nome e breve descrição do negócio

- Redes sociais

- Endereço físico e telefone de contato

- Logo e cores da marca (opcionais)

A mágica acontecendo: site sendo criado

Assim que os dados da empresa são informados, a IA entra em ação e começa a criar uma proposta de site em poucos segundos. Enquanto a mágica acontece, uma animação é exibida para a pessoa usuária com frases que alternam conforme o progresso da criação do site.

E depois "tcharam!", site pronto

Neste momento, a pessoa pode visualizar o conteúdo do site adaptado para desktop e mobile, além de ter a opção de escolher um outro modelo (template) e também refazer todo o site. Caso esta opção seja utilizada, será exibida a visualização de versões de site geradas para que a pessoa escolha uma das versões para seguir.

Personalização e edição

A próxima etapa é a edição e personalização do conteúdo do site, como:

- imagens (fazer upload de imagem, usar imagem do banco gratuito ou gerar imagem com IA)

- textos (editar texto manualmente ou com IA)

- cores e fontes

- seções de conteúdo (variados blocos de conteúdo que podem ser adicionados ou removidos do site)

- botão de Whatsapp (funcionalidade que permite enviar pelo site uma mensagem para um número de Whatsapp definido)

- pré-visualização do site no navegador

Gerar imagem com IA

Usar imagem do banco gratuito

Gerar texto com IA

Adicionar seções de conteúdo

Botão de WhatsApp

Pré-visualização do site no navegador

O momento mais esperado: publicar o site

Feitas as edições, é hora de colocar o site no ar. Para isso, é necessário definir um domínio (URL personalizada).

O criador possui 2 opções: utilizar um domínio gratuito (sem opção de personalizar com o nome da empresa) ou próprio.

Definido o domínio, é só clicar em "Publicar". Se o domínio já estiver registrado e não tiver nenhuma pendência, o site será publicado em poucos minutos.

Publicar com um domínio gratuito

Publicar com um domínio próprio que ainda nao foi registrado

Experiência desenhada, é hora de testar a usabilidade

Conforme eu avançava no desenho da experiência, fui preparando testes de usabilidade para minimizar incertezas a respeito da clareza nas interfaces e facilidade de uso do produto. Primeiro, testei de forma síncrona e moderada (ao vivo) com alguns colaboradores da empresa que não estavam envolvidos no projeto e eram de outros times. Nesta primeira rodada de testes, identificamos alguns pontos da interface que estavam gerando dúvidas e por isso precisei fazer pequenos ajustes.

Depois dos ajustes, disponibilizei o primeiro teste para clientes participarem de forma assíncrona e não moderada, através da ferramenta Maze.

  • Tivemos um total de 143 participantes;

  • O teste era composto por 8 missões (tarefas) e 2 perguntas sobre entendimento de texto. Também foram exibidas perguntas sobre interesse em outras funcionalidades futuras e perguntas de preenchimento opcional para sugestões de melhoria e contato para bate-papo com a equipe;

  • Neste teste foram contempladas as funcionalidades de preview do site gerado, escolha de modelo de site, edição de imagem/texto e edição de link de botão (aquelas que tínhamos mais incertezas a respeito da usabilidade e clareza).

Mapas de calor dos cliques feitos durante os testes

O segundo teste também foi assíncrono e não moderado e focou na experiência de publicação do site (final da jornada do usuário).

  • Tivemos um total de 25 participantes;

  • O teste era composto por 3 missões (tarefas), 2 perguntas sobre entendimento de texto e 2 perguntas que avaliam a métrica CES (esforço para executar a atividade) das missões feitas. Também tinha 2 perguntas opcionais de preenchimento com campo aberto para detalhamento de dificuldades.

Mapas de calor e gráfico referente a métrica CES

Após analisar o resultado dos testes, identifiquei algumas oportunidades de melhoria tanto em UI quanto em alguns textos de instrução que haviam sido feitos pela minha parceira UX writer. Sendo assim, voltamos nestes pontos para fazer os ajustes necessários.

Por último, mas não menos importante: métricas e indicadores de experiência

Tão importante como projetar uma boa experiência é saber se ela está tendo bons resultados (tanto para os clientes quanto para a empresa). Por isso, elaborei um plano de mensuração para mapear quais indicadores de sucesso da experiência do Criador de Sites com IA seriam acompanhados após o lançamento do produto.

Para este tipo de acompanhamento, costumo utilizar o framework HEART, que analisa as seguintes categorias:

  • FELICIDADE (Happiness) - O quanto a pessoa usuária está satisfeita com a experiência que ela teve com a solução/produto?

    Para este caso do Criador, no final da jornada de publicação do site o cliente será convidado a responder uma pesquisa que contém algumas perguntas, entre elas uma questão que analisa a métrica CSAT (satisfação).

  • ENGAJAMENTO (Engagement) - O quanto a pessoa usuária engajou com a solução/produto? Ela completou todas as etapas necessárias? Onde ela abandonou o fluxo? Avançou para as próximas ações esperadas?

    Entre todas as métricas que mapeei para esta categoria, estão: analisar a quantidade de cliques em botões como "continuar" e "publicar", quantidade de sites criados x quantidade de sites publicados, média da quantidade de sites publicados em planos que permitem ter vários sites, entre outras métricas.

  • ADOÇÃO (Adoption) - Como foi a adoção pelas pessoas usuárias? Teve um alto ou baixo índice de novas pessoas usando a solução/produto?

    Entre todas as métricas que mapeei para esta categoria: analisar a quantidade de planos vendidos x quantidade de sites criados, quantidade de sites criados com domínio gratuito x quantidade de sites criados com domínio próprio (personalizado), outras métricas.

  • RETENÇÃO (Retention) - A solução/produto está conseguindo reter as pessoas que a adquiriram? Quantos "foram embora" ou não voltaram mais para utilizá-la?

    Entre todas as métricas que mapeei para esta categoria, estão: analisar a frequência que os clientes retornam para atualizar o conteúdo do seu site, analisar a quantidade de clientes que não renovaram o plano, quantidade de clientes que começaram com um domínio gratuito e depois mudaram para um domínio próprio, entre outras métricas.

  • SUCESSO DA TAREFA (Task success) - As pessoas estão conseguindo utilizar a solução/produto com facilidade? Estão conseguindo ter sucesso em suas tarefas e objetivos ao utilizarem a experiência projetada?

    Entre todas as métricas que mapeei para esta categoria, estão: perguntas na pesquisa do final da jornada que analisam a facilidade de uso (métrica CES - Customer Effort Score) em ações específicas como editar imagem, configurar link de botão, gerar imagem com IA, definir um domínio, etc. Também considerei quantidade de planos vendidos x quantidade de sites publicados, entre outras métricas.

Assim que o plano de mensuração foi criado, segui com os próximos passos, que eram: criação de tags no Google Tag Manager para posterior acompanhamento no Google Analytics da quantidade de cliques nos botões mapeados, criação do formulário de pesquisa de satisfação para ser exibido no final da jornada do usuário, solicitação da criação de um dashboard no Metabase para acompanhamento de dados, entre outros.

Feito isso, era só aguardar o desenvolvimento e lançamento do Criador de Sites com IA para eu poder começar a acompanhar os primeiros resultados :)