Olá! Bem-vindes ao nosso curso de Design de I.I. A proposta é apresentar uma nova visão de fluxo de trabalho para entendermos como reunir dados, informações e pesquisa e, a partir dessa visão, extrair um caminho para chegar a um produto — design de produto. Essa é a ideia central do curso.
Meu nome é Rodrigo Lembs. Atuo há mais de 20 anos no mercado e já passei por diversos tipos de empresas: bancos, empresas de tecnologia, consultorias, instituto de pesquisa e startups (empresas iniciantes). Sempre liderei equipes de design e também atuei diretamente, de forma hands-on (mão na massa). Outra paixão é lecionar: dou aulas desde 2001. Comecei na graduação, depois na pós-graduação e, atualmente, ministro mais aulas em cursos — inclusive com você aqui na Alura. Também tenho um canal no YouTube (YouTube). Não sei se você já está inscritx ou pretende se inscrever; de todo modo, visite e confira o conteúdo. O canal se chama Design Team (Equipe de Design) e está prestes a completar 10 anos. Tem sido uma excelente jornada.
Agora, vamos ao foco deste curso. Nossa ideia é simular exatamente a situação em que trabalhamos em um e-commerce (comércio eletrônico). Nesse contexto, há um checkout (finalização de compra) que sofre grande taxa de abandono.
Os dados mostram que metade das pessoas usuárias não está concluindo a compra. Precisamos redesenhar e definir por onde começar: quais perguntas fazer e quais dados observar primeiro. Aqui entra a inteligência artificial: não para projetar por nós, e sim para acelerar o processo de descoberta, análise e validação.
Ao longo deste percurso, nosso objetivo é utilizar a cloud (nuvem), o cloud design (design na nuvem), a Lovable, entre outras ferramentas, para irmos de um problema real a um protótipo testável.
Teremos um arquivo PDF que já preparamos, disponível para vocês; é o mesmo que utilizaremos aqui. Nele, encontramos:
Usando a cloud (nuvem), vamos transformar esse material em personas, em elementos visuais e em um documento de direcionamento. A partir daí, poderemos gerar o wireframe (estrutura de tela) e evoluir para um protótipo funcional.
Faremos isso sem copiar modelos e sem adivinhações: apenas com análise e criatividade. O foco é mostrar como podemos otimizar um processo e um fluxo de trabalho de design, adaptando-os ao nosso dia a dia. Esse é nosso principal objetivo aqui.
Vamos, exatamente, utilizar a cloud (nuvem), recursos generativos e todo o seu potencial para nos impulsionar. Esse é o caminho que percorreremos ao longo desta jornada.
Então, vêm conosco? Vamos ao próximo vídeo. Um abraço.
Vamos discutir entrevistas, personas e essa perspectiva. Um ponto importante é que, ao trabalhar com IA, sobretudo para pesquisa, muitas vezes surge o receio de perder a nuance humana. Pode parecer que a IA vai simplificar demais. No entanto, o Claude não substituirá nossa leitura das entrevistas. Esse não é o objetivo. Na realidade, ele acelera o processo de análise e nos obriga a estruturar o que já percebemos nos dados.
No nosso caso, no PDF disponível que utilizaremos aqui, temos cinco entrevistas de pessoas usuárias que tentaram concluir uma compra. Algumas chegaram até o final, outras abandonaram no meio do caminho. Ao analisarmos o documento, observamos pessoas usuárias reclamando da falta de clareza na navegação, preocupações com a segurança dos dados e do próprio sistema, e relatos como: “há uma etapa que solicita o CVV do cartão, depois avança para outra etapa e parece que retrocede”. Percebemos, de forma geral, um problema de usabilidade. Isso identificamos pela leitura — é nossa nuance humana.
Agora, vamos trabalhar pensando em como a IA pode nos ajudar nessa avaliação. Com base no PDF que também menciona essas informações de forma detalhada, vamos orientar o modelo a partir do que já comentamos aqui.
O que vamos pedir ao Claude? Vamos utilizar o Claude. A instrução inicial será: “Você é uma pessoa pesquisadora de UX (experiência de pessoa usuária) experiente”. É útil solicitar que o modelo assuma um papel; esse role (papel) e o role play (encenação de papéis) são importantes. Podemos pedir que atue como nossa coach (pessoa treinadora), nossa mentor (pessoa mentora) ou nossa pessoa pesquisadora de UX. Podemos fazer o mesmo em outras ferramentas, não apenas no Claude, mas seguiremos com o Claude aqui.
O pedido será: analisar cinco entrevistas de pessoas usuárias que tentaram concluir uma compra em nosso e-commerce (comércio eletrônico), identificar os padrões de comportamento mais fortes e, para cada padrão, extrair três frustrações principais. Além disso, listar três gatilhos que levam ao abandono do checkout (finalização de compra). Definiremos também o formato de apresentação do padrão: nome descritivo, quem é, idade, contexto, três frustrações e o que funcionaria melhor. Para o padrão dois, o mesmo formato. Pediremos ainda três gatilhos de abandono, com base no que foi observado. É fundamental solicitar concisão e o uso de exemplos diretos das entrevistas.
Com o prompt pronto, vamos ver o que o modelo retorna.
Padrão 1: pessoa desconfiada
Padrão 2: pessoa impaciente
Três gatilhos de abandono observados
Esses dados são importantes para avançarmos para o próximo passo. Com esse tipo de informação, já temos um esquema extraído da pesquisa. Poderíamos ler todas as entrevistas e chegar às mesmas conclusões; o ganho aqui é de tempo, pois o processo de leitura e análise foi acelerado. Isso nos ajudou, mas a tomada de decisão é nossa: vamos ou não avançar com essas hipóteses?
Agora, vamos pedir que o modelo avance um pouco mais. Temos um novo prompt preparado: com base na análise anterior, criar duas personas detalhadas para nosso e-commerce (comércio eletrônico). Para cada persona, incluir: nome, idade, profissão, objetivo, nível de conforto com compras online, comportamento no checkout (finalização de compra) e uma citação que resuma sua maneira de pensar, extraída ou parafraseada das entrevistas.
Em seguida, criar um mapa de dores: a jornada da pessoa usuária e, em cada etapa, o ponto de dor correspondente. Não queremos uma descrição técnica; queremos linguagem natural, algo que possamos imprimir e colocar na parede da equipe para orientar decisões.
Com isso, teremos materiais acionáveis que nos ajudarão a extrair informações e direcionar melhorias com mais rapidez.
Beatriz, a cautelosa conectada. 28 anos, estudante de pós-graduação. Beatriz vive com o celular na mão, mas com o olhar sempre atento; utiliza redes sociais e acompanha as notícias. Por que está aqui? Busca um produto específico que encontrou no Instagram e chegou por uma busca no Google. Nível de conforto intermediário; compra bem, mas com cautela ativa.
Comportamento no checkout (finalização de compra): frustra-se quando o site solicita CPF logo na entrada, antes de existir qualquer vínculo com a marca. Quando o formulário é longo e fragmentado em várias telas, isso também a frustra. Ou quando não vê sinais visuais de segurança, como um cadeado, um selo ou um texto tranquilizador. Ganha confiança quando o site pede o e-mail primeiro, vai construindo a relação aos poucos e deixa claro por que precisa de cada dado. Citação: “Se o site já quer meu CPF no primeiro passo, eu saio. Ainda não conheço você.”
Carlos, o pragmático e paciente. Advogado, 47 anos, profissional autônomo de Belo Horizonte. Carlos tem a agenda cheia e baixa tolerância à fricção; compra on-line por conveniência — livros, equipamentos de escritório, itens do dia a dia. Não é entusiasta de tecnologia, mas sabe o que quer quando chega. Por que está aqui? Precisa de um produto para o escritório e não quer ir a uma loja física. Quer resolver em cinco minutos e voltar ao trabalho. Nível de conforto intermediário; experiente o suficiente para comprar, frustrado o bastante para abandonar.
Comportamento no checkout (finalização de compra): frustra-se ao ver a extensão do formulário antes de começar. Frustra-se quando o campo de CPF pisca em vermelho enquanto ainda está digitando. Citação: “Às vezes começo o checkout, vejo aquela quantidade de campos e simplesmente fecho a aba. Sou quase uma mistura dos dois.”
Mapa de dores
Etapa 1 — Descoberta do produto. Pontos de dor: a página demora para carregar no dispositivo móvel; fotos de baixa qualidade; preços exibidos sem o valor do frete.
Etapa 2 — Pesquisa para a decisão. Pontos de dor: sites sem sinais de segurança visíveis; avaliações ausentes; suporte difícil de acessar.
Etapa 3 — No carrinho. A pessoa usuária adiciona o produto e vai ao carrinho. Pontos de dor: o frete aparece apenas nesta etapa; o site obriga a iniciar sessão antes de mostrar o carrinho; experiência confusa, sem orientação clara.
Etapa 4 — Início do checkout (finalização de compra). A pessoa usuária começa a se identificar; é o primeiro momento de vulnerabilidade. Pontos de dor: CPF solicitado já na primeira tela; formulário fragmentado em múltiplas telas no dispositivo móvel; ausência de cadeado ou texto de segurança.
Etapa 5 — Endereço de entrega. A pessoa usuária informa onde deseja receber; deveria ser rápido. Pontos de dor: o CPF não se autocompleta; muitos campos separados (rua, número, complemento etc.); validação do CEP lenta.
Etapa 6 — Pagamento. O momento de maior tensão: a pessoa usuária está prestes a fornecer dados sensíveis. Pontos de dor: validação em tempo real no campo do cartão de crédito; modal (janela modal) de autenticação bancária 3D Secure sem aviso prévio; CVV sem explicação acessível; pagamento em parcelas oculto em um dropdown (menu suspenso), em vez de cartões visuais.
Etapa 7 — Confirmação. A pessoa usuária finalizou. Pontos de dor: o e-mail de confirmação demora ou vai para spam (lixo eletrônico); número do pedido difícil de copiar ou encontrar depois; ausência de link claro para rastreamento.
É importante destacar três gatilhos de abandono: CPF solicitado sem explicar o motivo; formulário longo e sem visibilidade de progresso; modal (janela modal) bancário 3D Secure sem aviso prévio.
Essa ideia é interessante porque, no fim das contas, é o que já comentamos anteriormente. O Claude nos ajudou a organizar os padrões e transformou isso em uma estrutura. Nosso papel aqui é escolher as entrevistas e refinar esse material. Fomos nós que percebemos a frustração real nas palavras das pessoas e, em um projeto real, provavelmente participamos diretamente desse processo. Com nossa visão, vamos refinar e iterar com o Claude até chegar a personas viáveis, precisamente porque, ao construir um projeto real, conhecemos as pessoas envolvidas.
Temos as informações, este compêndio. O que fazer com isso, Rodrigo? Podemos também levar esse conteúdo para um arquivo no FigJam e solicitar que a ferramenta organize um painel de personas, extraindo dados das pesquisas e do documento que fizemos. Em outras palavras, vamos manter tudo compartilhado para que todas as pessoas possam ver e para avançarmos esse trabalho em conjunto.
O Claude organizou os padrões e transformou todo esse material. Ainda assim, restam alguns pontos: qual é o tamanho real do problema? Quantas pessoas usuárias estão abandonando? Em que momento, exatamente? Essas respostas exigem números. Precisamos avançar em como usar o Claude e a IA para nos ajudar.
No próximo vídeo, vamos retomar nosso documento e transformá-lo em um diagnóstico visual que mostrará, de forma direta, onde está a maior perda. Já entendemos quem é a pessoa usuária e quais são suas dores; agora, precisamos de uma lente mais específica para identificar o ponto em que design pode atuar.
Vamos para o próximo? Nos vemos em breve. [♪]
Vamos falar sobre métricas em uma visão de diagnóstico visual, tratando sobre qual e quanto. É interessante refletirmos que o processo se torna estrutural e funcional quando podemos ter dados, ler esses dados e, além disso, gerar uma visualização que seja fácil de entender para todas as pessoas.
No nosso caso, para termos uma referência numérica, contamos com 5 mil transações nos últimos dois meses, sendo 38% de abandono no carrinho e 24% de abandono no checkout (finalização). A pergunta é: qual etapa é realmente o gargalo? Em seguida, qual mudança faríamos primeiro? Sabemos que números isolados não transmitem o contexto completo, então precisamos de uma narrativa. Precisamos utilizar os KPIs (indicadores-chave de desempenho) e os números para construir essa narrativa e iniciar um estudo para entender onde está a fuga real e onde o design entra para resolver esse tipo de problema.
Nesse processo, sem dúvida, vamos usar a IA para nos ajudar a consolidar esses números e facilitar a tomada de decisões, como afirmamos desde o início. Se formos ao Cloud (nuvem), trabalharemos com esse recurso. Temos um prompt (instrução) já pronto, baseado no que já trabalhamos anteriormente.
O que diz esse prompt (instrução)?
Atribui o papel: “você é uma pessoa analista especializada, focada em e-commerce (comércio eletrônico)”.
Fornece o histórico de transações e solicita uma análise para identificar:
a etapa com maior abandono;
a etapa com maior tempo despendido.
Pede uma recomendação: se tivéssemos apenas tempo e recursos para melhorar uma etapa, qual seria e por quê?
Solicita três hipóteses sobre por que ocorre o abandono em cada etapa.
Solicita a criação de um resumo executivo em três parágrafos:
situação atual;
onde está o maior risco;
o que faríamos de imediato e o que é prioritário.
Exige uma estrutura de apresentação para que alguém que não entende de dados compreenda à primeira vista.
Vamos executar e pedir ao Cloud (nuvem) que trabalhe exatamente sobre isso. Ele começa a desenvolver para nós uma análise de dados do checkout (finalização) da Tech Shop. Na etapa de carrinho, observamos 94,2% em desktop (computador) e 93% em mobile (dispositivo móvel). As etapas seguem a ordem: identificação, endereço, pagamento e confirmação. A lacuna entre carrinho e pagamento em mobile (dispositivo móvel) é de 45 pontos percentuais. Na semana quatro, especificamente, o pagamento em mobile (dispositivo móvel) ficou em 28%, o pior número de toda a nossa visão.
Se fosse para melhorar apenas uma etapa, a sugestão é o pagamento em mobile (dispositivo móvel), sem dúvidas, por três razões objetivas:
Onde o volume de perda é maior em números absolutos: 740 usuários em mobile (dispositivo móvel) abandonaram apenas nessa etapa.
A taxa de erro de campos é a mais alta de todo o funil; não se trata de um problema de produto ou preço, o que precisamos verificar.
A tendência é de piora acelerada.
Também recebemos as três etapas com hipóteses, o que é muito importante — identificação, endereço e, por último, pagamento — todas com suas respectivas justificativas. O resumo executivo indica que o checkout (finalização) da Tech Shop funciona bem até metade do processo, especialmente nas etapas de carrinho e endereço, o que é interessante porque temos dados consistentes.
Além disso, o sistema continua construindo a análise para nós, destacando:
o “salto tecnológico”;
a entrada no funil e o erro de pagamento;
a taxa de finalização média por etapa;
um gráfico comparando desktop (computador) e mobile (dispositivo móvel);
a queda semana a semana;
o tempo médio por etapa;
e um diagnóstico baseado em três hipóteses:
Hipótese 1: campos de cartão;
Hipótese 2: validação agressiva;
Hipótese 3: 3D Secure (autenticação 3D Secure) sem aviso.
O painel apresenta três visões. Observamos o mesmo problema no funil por etapa. Consideramos essa resposta sensacional, pois nos mostra exatamente aspectos que, talvez, levaríamos muito tempo para compilar e compreender. Aqui, o Cloud já resume de forma objetiva.
Como atuamos com design, queremos avançar mais. O Cloud nos devolveu uma análise bem estruturada, com hipóteses baseadas nos números. Agora, vamos pedir ao Cloud que crie um gráfico visual que resuma ainda melhor o problema. Usando estes dados e dando continuidade, vamos solicitar que faça uma análise do checkout (finalização de compra) mencionado acima, criando um visual de one page (uma página) em HTML, que apresente alguns elementos específicos.
Vamos inserir outro prompt, com base na análise anterior do checkout. Solicitamos a criação de um visual de one page (uma página) em HTML e SVG, que apresente um funil do checkout (finalização de compra) mostrando: etapa, número de usuários, taxa de finalização e um indicador visual. Abaixo do funil, pedimos uma caixa de diagnóstico que aponte qual etapa é o gargalo, a estimativa do impacto disso e uma paleta de cores profissional. Do ponto de vista visual, buscamos tipografia legível, para uso em apresentações. A área de design utilizará esse material em apresentações; nós desempenharemos esse papel. Não precisa ser muito bonito, mas deve ser muito claro. Solicitamos a geração dessa one page (uma página) em HTML para obtermos uma ideia visual do que podemos utilizar.
Enquanto o Cloud trabalha, definimos o contexto: funil de checkout (finalização de compra) da Tech Shop. Vamos ver o que será gerado. O Cloud, na verdade, não é uma ferramenta de design, e nós não entramos nesse detalhe; ainda assim, gerou algo que podemos usar. Foi entregue uma visão de one page (uma página), em formato HTML, que podemos abrir e solicitar o download (baixar arquivo). Assim, teremos esse HTML para apresentar. É comum hoje criar apresentações em HTML — já fazemos bastante —, mas também é possível criar em PowerPoint.
O resultado mostrou exatamente o problema no carrinho, na identificação, no endereço, no pagamento e na confirmação. No diagnóstico, foi identificado um gargalo no pagamento em mobile (dispositivos móveis), com 28,3% de finalização na semana 4, além da estimativa de impacto e das três ações de maior impacto: validação on blur (ao perder o foco), ou seja, validar campos apenas ao sair, enquanto a pessoa digita; campos maiores; e aviso de 3D. Isso é interessante. A IA nos ajudou a saber exatamente para onde ir primeiro.
Como comentamos, a solução conseguiu construir um diagnóstico muito bem elaborado, com três parágrafos e uma análise de três hipóteses. Essa one page (uma página), um funil de diagnóstico em um arquivo que pode ser impresso ou distribuído, nos deu clareza sobre para onde devemos ir. Organizou os números e criou uma narrativa. Contudo, a interpretação — por exemplo, entender que o formulário de envio está excessivamente complexo — é nossa, no final.
Agora, tomamos decisões muito melhores, porque os dados estão corretos e explícitos. Sabemos onde está o problema. Porém, o que, talvez, as empresas concorrentes estão fazendo? Será que esse enfoque é pouco comum ou é o padrão do mercado? Precisamos descobrir, pesquisando e conhecendo como outras empresas estão trabalhando.
Este caminho já resolve muito no nosso dia a dia: usar IA para realizar análises que, às vezes, são fundamentais para identificarmos como agir de forma rápida e prática. Agora, vamos avançar para ver uma visão de mercado.
O curso Claude e Lovable: do problema ao protótipo funcional possui 98 minutos de vídeos, em um total de 27 atividades. Gostou? Conheça nossos outros cursos de UX Design em UX & Design, ou leia nossos artigos de UX & Design.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
O Plano Plus evoluiu: agora com Luri para impulsionar sua carreira com os melhores cursos e acesso à maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Programação, Data Science, Front-end, DevOps, Mobile, Inovação & Gestão, UX & Design, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
Acesso à inteligência artificial da Alura.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri Vision chegou no Plano Pro: a IA da Alura que enxerga suas dúvidas, acelera seu aprendizado e conta também com o Alura Língua que prepara você para competir no mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Chat, busca, exercícios abertos, revisão de aula, geração de legenda para certificado.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Para quem quer atingir seus objetivos mais rápido: Luri Vision ilimitado, vagas de emprego exclusivas e mentorias para acelerar cada etapa da jornada.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Catálogo de tecnologia para quem é da área de Marketing
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais de forma ilimitada.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
