UX/UI Design: Estratégia, criação e prototipação com IA

Síntese de dados e problema - Introdução

Apresentando Rodrigo Lemos

Olá! Meu nome é Rodrigo Lemos. Sou um homem de pele clara, com barba grisalha, cabelo médio um pouco bagunçado, uso óculos e uma camiseta de cor escura. Estou em um espaço repleto de minhas coleções e livros. Tenho 30 anos de carreira em design e atualmente atuo como UX Principal em uma grande empresa da América Latina. Além disso, dou aulas há mais de 20 anos, uma paixão que não consigo abandonar. Também possuo um canal no YouTube chamado Design Channel, onde convido todos a visitarem.

Audiodescrição: Rodrigo é um homem de pele clara, com barba grisalha e cabelo médio um pouco bagunçado. Ele usa óculos e veste uma camiseta de cor escura. Está em um espaço repleto de suas coleções e livros.

Apresentando a proposta do curso

Qual é a proposta deste curso? Nosso objetivo é conduzir a resolução de um problema real de produto, focando na realidade e nos desafios. Vamos trabalhar em um tema complexo: o abandono crítico em fluxos financeiros. Pretendemos mostrar na prática como utilizar a inteligência artificial, não para gerar ideias, mas para processar dados brutos e eliminar o achismo do processo de design. Sabemos que, nesse meio, o achismo é frequente.

Detalhando o processo de construção

O que vamos construir juntos? Primeiramente, vamos realizar um diagnóstico utilizando a inteligência artificial. Queremos criar um ambiente de dados, utilizando Gemini para extrair notas atômicas e organizá-las em um Evidência Wall dentro do FIG.

Cada decisão que tomamos terá um ID de evidência, mapeando medos, vetos de stakeholders (partes interessadas) e Jobs to be Done (Tarefas a serem Feitas). Vamos discutir sobre isso também, pois o uso de Jobs to be Done é interessante, já que ajuda a explicar por que a pessoa usuária está enfrentando algum problema em nossa jornada.

Explorando estratégias de interface e prototipagem

Outro ponto a ser abordado é a estratégia de uma User Interface (Interface do Usuário) de confiança. Vamos priorizar soluções utilizando métodos como a matriz RISE e gerar wireframes rápidos com o Figma Make. Nosso objetivo é guiar na criação de uma interface focada em previsibilidade, com uma visão de UI Kit. Discutiremos sobre tokens, microcopy (microcópia), tudo isso dentro de uma estrutura de contrato.

Também trabalharemos com protótipos executáveis e testes. Na etapa final, vamos além do Figma, explorando outras ferramentas como V0 e Bolt, para criar protótipos funcionais, onde a pessoa usuária poderá simular valores reais e ver o cálculo do que queremos alcançar reagindo em tempo real.

Concluindo com testes e documentação

Concluiremos o ciclo com testes e uma visão de entrega, incluindo a criação de um Decision Pack (Pacote de Decisão), que é uma documentação da evolução estratégica do projeto. Ao final, esperamos que todos dominem um fluxo de trabalho que combine estratégia de User Experience (Experiência do Usuário) e ferramentas de inteligência artificial para entregar resultados que o negócio possa medir e confiar.

Vamos nessa?

Síntese de dados e problema - Dataset do projeto

Iniciando a simulação do projeto

Precisamos partir de dados de algum lugar para a simulação deste projeto, que utilizaremos tanto com a visão de UX quanto na inteligência artificial. Para isso, geramos alguns dados que estão disponíveis no Figma, com o objetivo de nos fornecer informações reais.

Capturamos um funil dos últimos 30 dias, onde as informações principais são: 48.200 usuários visualizaram o banner do PIX parcelado, 12.900 clicaram, resultando em um CTR de 26,7%. Desses, 6.300 iniciaram a simulação e 2.400 chegaram à tela de confirmação. Além disso, 860 usuários concluíram o fluxo, o que representa uma taxa final de aproximadamente 6,7% dos cliques. O tempo médio na simulação é de 2 minutos e 48 segundos, com uma queda significativa na tela "Entenda as taxas", que gera 38% dos abandonos.

Analisando dados de suporte e feedbacks de usuários

Essas informações são fundamentais para nosso trabalho, pois nos ajudam a entender melhor o que elas significam. Também simulamos uma captura de informações de suporte, acompanhando o funil dos últimos 30 dias, onde 1.140 tickets foram criados mencionando o PIX parcelado. Os termos mais citados nesses tickets são: juros, taxa, não aprovado, limite, cadastro e confuso. É importante prestar atenção a esses detalhes.

Além disso, simulamos comentários feitos no aplicativo, baseados no NPS. Exemplos de comentários incluem: "Na hora de confirmar, aparece uma taxa que eu não entendi e desisti" e "Queria parcelar para fechar o mês, mas fiquei com medo de virar uma bola de neve". Outro comentário relevante é: "Não ficou claro porque eu não fui aprovado".

Identificando problemas e sugestões dos usuários

Outro ponto que parece uma pegadinha é quando primeiro mostra o valor e depois muda. Em seguida, a tela possui texto em excesso; nós só queremos saber quanto vamos pagar por mês. O próximo comentário é que, após usar, não conseguimos encontrar onde acompanhar as parcelas. Outro ponto é que o botão desaparece, a tela fica rolando e parece travar. Além disso, o limite aparece diferente em cada tela. Outro problema é que o atendimento não consegue explicar. Parcelar deveria ser simples, mas é burocrático, mesmo sendo digital. Se houvesse um resumo final, como uma fatura, confiaríamos mais. Por último, queremos parcelar, mas sem surpresas.

Esses pontos são interessantes, pois geram muitos insights para nosso projeto. Também simulamos capturas de frases em entrevistas com usuários para cruzar informações. Por exemplo, temos trechos como: "Se vejo juros, não entendo, fujo, prefiro não arriscar." Outro trecho é: "A sensação é que estão escondendo o jogo, eu queria transparência." Outro comentário é: "Gostaria de saber o motivo do não aprovado; sem isso, sinto-me rejeitado." Outro ponto é: "Aceitei, mas depois fiquei ansioso, sem saber quanto faltava." Outro comentário é: "Não confio quando mudam o valor no meio do caminho." Por último: "O texto é longo, parece contrato, eu pulo e depois me arrependo."

Concluindo com a visão de resolução do problema

Aqui, temos um dataset de informações que nos ajudará a aprofundar e entender uma visão de resolução de um problema de produto digital, especificamente do PIX parcelado. Nosso objetivo é resolver isso não apenas com uma visão de UX, mas também utilizando inteligência artificial para agilizar o processo. Vamos começar agora com as informações? Vamos lá!

Síntese de dados e problema - Relação com stakeholders

Reconsiderando falhas em UX

Se acreditamos que a falha em UX ocorre devido a uma tela ruim, é importante reconsiderar. Muitas vezes, a falha em UX acontece porque não mapeamos quem realmente tem influência no processo. Podemos criar uma experiência bela, coerente e centrada no usuário, mas ela pode nunca ser aprovada. Ou pior, ser aprovada de forma distorcida e cheia de remendos, porque alguém hesitou e bloqueou a decisão no último momento. No caso do Pix Parcelado, isso é ainda mais comum, pois as palavras "taxa" e "crédito" ativam um instinto de defesa dentro do banco. Quando esse instinto é acionado, surgem vetos. Não necessariamente porque a solução é ruim, mas porque a conversa certa não foi trazida no momento adequado ou com antecedência suficiente.

O termo que muda a nossa leitura de projeto aqui é stakeholder (parte interessada). Stakeholder é qualquer pessoa, área ou entidade que pode influenciar ou ser afetada pela decisão. Existem dois conceitos que podem ser desafiadores para quem está começando: poder e interesse. Poder é a capacidade real de aprovar ou vetar. Interesse é quando a pessoa se importa com o assunto, seja por metas, riscos, reputação, dores ou questões operacionais. Ignorar o poder significa construir um sonho que não se concretiza. Ignorar o interesse cria uma resistência invisível, que só se manifesta quando acreditamos que tudo está certo.

Mapeando objetivos, medos e vetos

Nosso objetivo aqui não é criar um mapa bonito, mas sim reduzir surpresas. Projetos travados não são resultado de falta de talento, mas de uma leitura inadequada do cenário. Existe uma camada adicional que raramente é explicitada: objetivo, medo e veto. O objetivo é o que o stakeholder deseja proteger ou conquistar. O medo é a ameaça percebida, e o veto é como esse medo se manifesta na prática, geralmente em forma de restrições, exigências de etapas adicionais, ou requisitos de cadastro prévio. Se não mapeamos isso, descobrimos tarde demais.

Utilizamos a inteligência artificial de forma adequada para estruturar o mapa inicial e não esquecer elementos óbvios. No entanto, não permitimos que ela finja certeza. Onde houver inferências, marcamos como hipótese. Não solicitamos detalhes regulatórios específicos, pois isso pode facilmente gerar informações incorretas. Abrimos o Gemini e pedimos uma lista inicial de stakeholders internos e externos. Para cada stakeholder interno, solicitamos o objetivo, medo, métrica que protege e uma visão de bloqueio. Também pedimos uma pergunta de entrevista, pois um stakeholder sem perguntas se torna apenas um detalhe decorativo.

Estruturando o mapeamento de stakeholders

No nosso prompt, começamos com o contexto: PIX parcelado em banco digital. Trabalhamos apenas com o dataset do caso em questão, utilizando categorias genéricas de áreas, sem detalhes regulatórios específicos. A tarefa do Gemini é listar os stakeholders internos e externos relevantes para a experiência. Para cada stakeholder interno, fornecemos o nome da área, como produto, design, risco, compliance, crédito, atendimento, marketing e engenharia. Definimos o objetivo, o medo, o veto provável e a métrica que protege, como conversão, inadimplência, reclamações, fraude, tickets e reputação. Também classificamos o poder e o interesse como alto, médio ou baixo, e identificamos como podem bloquear na prática. Solicitamos uma pergunta que pode ser extraída da entrevista para reduzir o risco de surpresas. Indicamos se a base é evidência ou hipótese, e se for evidência, citamos o ID e o trecho literal do dataset. Se for hipótese, marcamos explicitamente como tal.

Reforçamos as regras do Gemini: não inventar regras ou regulamentos específicos, não inventar números, e se não houver evidência no dataset, usar hipótese e declarar isso. Podemos colar o dataset novamente ou, como estamos usando o mesmo Gemini no mesmo chat durante todo o processo, utilizamos o histórico, sem necessidade de colar o dataset novamente. É importante revisar as informações geradas para verificar possíveis erros e variações, já que ferramentas podem apresentar dados incorretos.

Criando a matriz de poder versus interesse

Após obtermos os dados, utilizamos o FigJam para materializar uma matriz de poder versus interesse. O objetivo não é apenas estético, mas funcional. Queremos identificar quem envolver cedo, quem manter por perto, quem apenas informar e quem jamais surpreender perto do final. Isso é crucial, pois serve como mapeamento não apenas para nós, mas para toda a equipe. No FigJam, criamos uma matriz 2x2, com o eixo Y representando o poder (alto em cima, baixo embaixo) e o eixo X representando o interesse (alto à direita, baixo à esquerda). Também solicitamos ao FigJam a criação de um modelo de adesivo para stakeholders.

Nos campos, nome, área, objetivo, medo, veto provável, métrica que protege, como bloqueia, pergunta-chave e base, que são as evidências ou hipóteses. Vamos pedir um estilo simples, legível, pronto para duplicar em quadrados. Aqui, ele começou a gerar. O que é interessante nisso? A forma como agiliza a organização das informações e podemos verificar que está tudo certo e funcionando.

Desenvolvendo perfis comportamentais

A diferença entre uma pessoa profissional experiente e uma iniciante está nos perfis comportamentais. Perfil aqui não é uma persona com nome, idade e foto, mas sim um padrão de comportamento que altera a decisão da interface e do fluxo. Não aceitamos invenções, portanto, exigimos evidências. Vamos voltar para o dataset e pegar o NPS e as entrevistas. A partir disso, queremos construir três perfis com os IDs e trechos literais. Em seguida, voltamos para o Gemini e pedimos para ele construir e separar esses três perfis.

Agora, já levantamos os perfis dos stakeholders e vamos levantar os perfis do nosso projeto. O que pedimos para o Gemini? Com as informações a seguir, criar três perfis comportamentais para PIX parcelado com base somente no dataset. Para cada perfil, queremos o nome do perfil, baseado em comportamento, não em demografia. Queremos o contexto, em que situação aparece, o objetivo do usuário, um critério de confiança, o medo principal, comportamentos prováveis no fluxo (dois ou quatro bullets, bem curtos), evidências usando os IDs e trechos literais do nosso dataset, e o que ainda falta validar, com uma ou duas perguntas.

Estabelecendo regras para perfis comportamentais

Como sempre, estabelecemos regras: não usar demografia como centro, não inventar intenções além do trecho literal, e se não houver evidência, escrever "não há evidência no dataset". Podemos colar o dataset logo em seguida. O Gemini já está acostumado a trabalhar com isso, então funcionará tranquilamente. Gerou. Temos aqui a persona gerada, muito bem organizada. Podemos fazer isso manualmente, sem precisar de uma inteligência artificial? Sim, mas quanto tempo levaríamos e qual seria a margem de erro? Pontos importantes a considerar.

Como sempre mencionamos, deixar isso apenas no Gemini pode resultar em perda. Vamos levar para o FigJam e documentar sempre. O FigJam é a central de documentação do projeto como um todo. Poderíamos usar outras ferramentas? Sim, mas preferimos o FigJam, que já está dentro do Figma. Há também o Figma Make, que usaremos, entre outras ferramentas como o Notion, que também possui uma IA e pode organizar essas informações.

Criando cards editáveis para perfis comportamentais

Dentro do FigJam, vamos criar três cards editáveis para perfis comportamentais. Queremos campos como nome do perfil, contexto, objetivo, critério de confiança (o critério que escrevemos no Gemini), medo, comportamento provável e evidências, que são os IDs. O estilo deve ser sóbrio, muito legível, com espaço para colar trechos literais. Pronto. Pedimos para gerar e temos toda a organização visual necessária para a persona que começamos a trabalhar e gerar.

Revisando o mapa de stakeholders e perfis comportamentais

Agora, fazemos o trabalho que não dá para terceirizar. No mapa de stakeholders, revisamos se o medo e o veto estão bem separados. Muitas pessoas escrevem o veto como medo e não sabem o que negociar. Medo é emoção e risco percebido; veto é mecanismo concreto. Se sabemos o veto, sabemos o que precisa estar claro na proposta e o que precisamos validar cedo. Na matriz de poder versus interesse, olhamos principalmente para dois quadrantes: poder alto e interesse alto, onde mora a aprovação e o veto, e poder alto e interesse baixo, onde mora a surpresa. Pessoas que não acompanham, mas que no final podem travar o projeto. Usamos isso para decidir quem chamamos para uma conversa de 20 minutos agora, em vez de receber um "não" após duas semanas de trabalho de design.

Nos perfis comportamentais, escolhemos um e identificamos qual decisão ele muda. Por exemplo, se o perfil mostra medo da bola de neve e rejeição por não aprovado, isso pode mudar a ordem de informação, o tipo de resumo que mostramos antes de pedir confirmação ou o que precisamos explicar quando o usuário não passa. Se não conseguimos apontar a decisão, reescrevemos o perfil até que ele se torne uma ferramenta de projeto, não literatura.

Concluindo com uma visão sobre stakeholders e personas

Temos duas visões: uma sobre a questão do stakeholder e outra que permite um cruzamento na discussão sobre a persona usuária. A ideia é encerrar esta aula com uma regra simples: se não sabemos quem decide e por que essa pessoa decide, não temos um problema de UX, mas uma surpresa marcada. Surpresas em produto custam tempo, confiança e política.

No próximo vídeo, vamos parar de tratar confusões como diagnóstico. Queremos transformar isso em uma dor acionável e caminhar para uma visão de jobs to be done, sustentada por evidências, conectando esse método diretamente à queda do funil, ao drop, como chamamos. Inclusive, na tela, entenderemos as taxas. Vamos lá? É isso.

Sobre o curso UX/UI Design: Estratégia, criação e prototipação com IA

O curso UX/UI Design: Estratégia, criação e prototipação com IA possui 202 minutos de vídeos, em um total de 44 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:

• Síntese de dados e problema
• Criação de ferramentas de empatia
• Ideação rápida e baixa fidelidade
• Conceitos visuais para UX/UI
• Melhoria contínua