Face It
Face It — Estudo de Caso | Design de Produto
88% dos entrevistados dizem sentir o impacto das redes no pensamento crítico. 100% admitem ter formado opiniões sem entender completamente os fatos. Mas a descoberta que realmente orientou o design foi outra: a mesma amostra acredita que as redes sociais promovem reflexão e diversidade de opinião.
Essa contradição não é ingenuidade. É o mecanismo central do problema. O usuário percebe que é influenciado, mas interpreta essa influência como evidência de que está se abrindo para o mundo. Uma câmara de eco que se autolegitima como janela.
A entrevista qualitativa confirmou:
"Eu posso mudar de opinião se eu ver que o outro lado é benéfico [...] e se alinha com meus pensamentos."
Mudar de opinião apenas quando o outro lado já coincide com o que você pensa não é abertura cognitiva. É viés de confirmação com autopercepção de flexibilidade. Esse insight redefiniu o produto inteiro. O Face It não poderia ser mais um app de "leitura crítica", precisava ser um espelho, uma ferramenta que revela ao usuário o que ele não consegue ver em si mesmo.
Escopo
UX Research · UI Design · Prototipagem · Identidade Visual · Implementação React
Audiência: Jovens de 13 a 24 anos com uso frequente de redes sociais.
Problema 1: O usuário não percebe que está numa bolha
Solução de design: Onboarding como confronto cognitivo, não somente boas-vindas
A tela 1 do onboarding abre com: "Você tem certeza que pensa por conta própria? Ou só repete o que faz mais sentido dentro da sua bolha?"
Isso não é copywriting agressivo. É uma decisão de produto deliberada: criar dissonância cognitiva antes do cadastro, para que o usuário entre no app já em modo de questionamento, não de consumo passivo. A sequência de 6 steps vai do confronto → contextualização → proposta de valor → citação de autoridade → personalização por objetivos → personalização por dificuldades.
As telas 5 e 6 coletam objetivos e dificuldades específicos do usuário; não para personalização de UI, mas para calibrar desde o início qual tipo de viés o app deve espelhar para aquela pessoa.
A metáfora espacial (astronauta, planetas, estrelas, meteoros) não é estética por estética: representa sair da órbita conhecida, furar a bolha do próprio pensamento.
Problema 2: O usuário reconhece o problema, mas não age
Solução de design: Fricção intencional no Desafio do Dia.
A Home Page não apresenta conteúdo para consumo, apresenta uma pergunta que exige posicionamento:
"Os influenciadores têm responsabilidade sobre o comportamento de seus seguidores?"
Com a action: "Defenda sua opinião sem usar falso dilema."
Esse design coloca o usuário em modo de produção, não recepção. A contagem de 12k+ participantes usa prova social para reduzir o atrito de engajamento, princípio que os estudos qualitativos indicaram: o usuário se engaja mais quando percebe que outros estão participando do mesmo debate.
A ideia é estimular o pensamento crítico do usuário e ao mesmo tempo ensinar o que ele deve evitar ao formular uma opinião.
Problema 3: O usuário não consegue validar informações
Solução de design: Scanner que transfere capacidade, não cria dependência.
O Scanner resolve dois problemas em camadas de tempo distintas. No curto prazo, entrega análise imediata: o usuário cola um link e recebe um diagnóstico de credibilidade. No médio prazo, faz algo mais estratégico: ao expor repetidamente os mesmos padrões (linguagem emocional, dados incompatíveis, autoridade não verificada), o produto treina o reconhecimento que o usuário ainda não tem.
A diferença entre um app que processa e um produto que educa está nessa distinção: o primeiro maximiza uso, o segundo maximiza valor percebido com o tempo. Um usuário que usou o Scanner cinquenta vezes não consulta o app porque não consegue analisar sozinho, ele consulta porque passou a confiar no critério que o app calibrou nele. Esse loop: usar a ferramenta, reconhecer o padrão, internalizar o critério, é o mecanismo pelo qual o Face It converte o usuário da Fase 3 (experimentação) para a Fase 5 (hábito crítico formado) na jornada mapeada. O Scanner não é uma feature de retenção. É o principal motor de progressão do produto.
Problema 4: O usuário não enxerga os vieses no próprio discurso
Solução de design: Results como espelho do usuário
A tela de Relatório inverte a lógica habitual de gamificação. Em vez de apenas pontuar o usuário, ela cita literalmente trechos do argumento dele: "Ou você concorda com isso, ou você é contra o progresso"→ Uso de falso dilema
"Se você apoia isso, não se preocupa de verdade com as pessoas"→ Apelo emocional generalizado
Isso transforma o feedback em reconhecimento. O usuário não lê uma regra abstrata sobre falácias, ele vê a própria fala categorizada. Essa escolha de design é diretamente derivada do insight da pesquisa qualitativa: o usuário percebe influência no outro, mas dificilmente em si mesmo.
Jornada do Usuário
Mapeamento das 5 fases da jornada do usuário para prever pontos de fricção e identificar oportunidades de design:
Fase 1 — Consciência do problema- O usuário percebe que as redes sociais estão afetando a forma como pensa e forma opiniões, mas ainda não sabe como agir sobre isso.
Fase 2 — Busca estratégica- O usuário procura ativamente ferramentas ou conteúdos que o ajudem a desenvolver senso crítico e analisar informações com mais autonomia.
Fase 3 — Experimentação- O usuário descobre o Face It, realiza o onboarding e começa a explorar as funcionalidades: desafios do dia, scanner de conteúdo e chat com o assistente.
Fase 4 — Consolidação de hábitos- O usuário passa a usar o app com regularidade, acompanha seu progresso no relatório mensal e incorpora a análise crítica de conteúdo na rotina diária.
Fase 5 — Fidelidade- O usuário tem o hábito crítico formado, utiliza o scanner de forma reflexa ao consumir conteúdo online e considera o upgrade para o plano Pro para acesso completo às funcionalidades.
Implementação:
A implementação do protótipo foi realizada com o uso de Claude AI (Anthropic) como ferramenta de otimização e aceleração do processo de desenvolvimento, eliminando o gargalo entre design e código funcional.
O que foi feito:
-Tradução direta de layouts Figma para componentes React com CSS modular, sem uso de frameworks CSS externos
-Implementação de todas as animações CSS (rocketEntry, rocketFloat, wcTwinkle, particleFade, contentIn, loadingFill) baseadas nas especificações de design
-Criação e gestão do sistema de navegação entre telas via estado React
-Geração programática de assets de apresentação
-Leitura e implementação de ajustes diretamente de nodes do Figma via MCP (Model Context Protocol), eliminando o ciclo manual de inspeção → transcrição → código
Mais Cases
