UX & Product Designer · 4 anos em produto digital · São Paulo

Design que
conecta
pessoas

Crio experiências digitais que equilibram empatia, estratégia e estética — do research ao protótipo de alta fidelidade.

UX Designer · 4 anos em produto digital · fintech, comportamento e impacto social.

UX
App Onze — tela de recomendação de plano
Case em produção · App Onze
Explorar case →
Em números
4+
Anos em UX e product design
15+
Fluxos entregues na Onze (web & mobile)
~35%
Menos retrabalho de UI com QA visual
Giovana de Araújo — UX & Product Designer

Sobre mim

UX Designer com 4 anos de experiência em produtos digitais — do discovery à entrega com times multidisciplinares. Atualmente na Onze (jul/2024–presente), evoluindo o app de previdência e benefícios. Antes, atuei na TIXIT e MSX International em fluxos digitais, prototipagem e handoff.

Especializada na interseção entre psicologia comportamental, gamificação e design de produto. Graduada em Design pela FMU (2018–2022), com pós-graduação em UX Design em finalização no Centro Universitário Belas Artes (FEBASP).

UX ResearchProduct Design Interaction DesignFigma Design SystemDiscovery Handoff & QA VisualGamificação
01 — Projetos

Casos de
design

Clique em cada projeto para expandir o caso completo — research, processo, decisões e aprendizados.

02
E-commerce · Case estratégico

Flora Mística

Redesign de e-commerce premium — da ideação ao protótipo interativo com Design System

Product Design · Prototipagem Figma · E-commerce

FigmaSmart Animate Crazy EightStoryboard
+
Problema
Comprar plantas raras online exige confiança — o usuário não toca o produto e precisa entender cuidados antes de decidir.
Papel
Product Designer — ideação, storyboard, protótipo interativo e Design System no Figma.
Entrega
Protótipo completo com 10 componentes, jornada da Maria e fluxo de compra com guia de cuidados e cupom.
Resultado
87% encontraram o guia de cuidados antes do checkout (n=8). 100% concluíram compra simulada no protótipo.
10
Componentes reutilizáveis documentados com Variants e Smart Animate
87%
Localizaram guia de cuidados antes do checkout em teste moderado (n=8)
8→1
Crazy Eight convergiu para layout com grid de produtos como prioridade central
Papel
Product Designer — ideação, storyboard, protótipo e Design System
Contexto
E-commerce premium · Plantas raras · Alta incerteza na compra
Entrega
Protótipo interativo Figma pronto para handoff e testes
Contexto

O desafio de vender o que o usuário não pode tocar

Projetar a experiência de compra de um e-commerce especializado em plantas raras — produtos físicos, premium e que exigem cuidados específicos que o comprador precisa entender antes de adquirir.

O principal desafio: construir confiança em um contexto de alta incerteza. O usuário não pode tocar o produto, e qualquer erro de expectativa resulta na morte da planta.

Insight central
"A compra de uma planta rara é também a compra de um compromisso de cuidado — a interface precisa preparar o usuário para esse compromisso antes de ele confirmar o pedido."
Processo

Do esboço ao protótipo interativo

01
Crazy Eight — Divergência criativa
8 esboços em 8 minutos explorando variações do layout da Home: posicionamento do hero banner (topo, lateral, centralizado), organização do grid de produtos (2 colunas, carousel, mosaico) e hierarquia de informações. O método evitou apego prematuro a uma única solução — e revelou que a visualização clara dos produtos com suas características especiais deveria ser a prioridade central do layout.
DivergênciaBaixa fidelidade8 min / 8 conceitos
02
Storyboard — A jornada da Maria
8 quadros mapeando a jornada de Maria, 28 anos, que busca uma planta especial para seu apartamento. Do problema ("meu apê precisa de vida") à solução (planta brilhando à noite no quarto). O storyboard evidenciou três coisas: a importância de feedbacks claros a cada etapa, a necessidade de um guia de cuidados antes da compra, e que o cupom de desconto no carrinho pode ser o gatilho final para a decisão.
EmpatiaJornada do usuárioTouchpointsPain points
03
Protótipo Figma — 10 componentes documentados
Protótipo de alta fidelidade com Auto Layout, Variants e Smart Animate. Cada componente foi documentado com descrição técnica, recursos utilizados e justificativa de design — estruturando um Design System coeso para o projeto. Dark mode com variáveis de cor, slider com autoplay e loop infinito, galeria de imagens com thumbnails e controle de quantidade com atualização de preço em tempo real.
Alta fidelidadeDesign SystemSmart AnimateAuto Layout
Componentes Figma

Sistema de componentes no protótipo

Slider hero
Autoplay 3s com Smart Animate
3 slides rotativos com transição ease-in-out, navegação manual prev/next e loop infinito. Overlay escurecido para legibilidade do texto.
Controle de qtd.
Preço em tempo real
Botões +/– com estado desabilitado quando qty=1, atualização imediata do total e parcelas, limite de 5 com mensagem de escassez.
Modal carrinho
Feedback imediato de adição
Overlay semi-transparente, título "Produto adicionado com sucesso", dois CTAs (ir ao carrinho / continuar comprando), fechamento por X ou clique fora.
Acordeon
Guia de cuidados expansível
Chevron rotaciona 90° via Smart Animate 300ms. Apenas 1 item expandido por vez. Aplicado no Guia de Cuidados e no "Como escolher sua planta".
Input de cupom
3 estados visuais distintos
Default, success (border verde + desconto calculado no resumo) e error (border vermelho + mensagem). Botão alterna entre "Aplicar" e "Remover".
Cards de produto
Default · Hover · Favorited
Hover eleva o card com shadow aumentada. Favorited alterna o ícone do coração. Smart Animate 200ms para transições suaves e profissionais.
Dark mode toggle
Variáveis de cor no Figma
Sistema completo de alternância claro/escuro com Local Variables. Mapeamento total de Background, Surface, Text e Primary em ambos os modos.
Grid Auto Layout
2 colunas com wrap automático
Cards 360×518px, gap 32px, wrap automático. Centralizados quando não preenchem linha completa. Overflow scroll vertical quando necessário.
Galeria thumbnails
4 miniaturas com estado ativo
Thumbnail ativa com border Primary (#5C2D8F, 2px). Transição Smart Animate fade 400ms ao trocar imagem principal 672×730px.
Pop-up scrollável
Max-height 80vh com overflow
Modal 500px de largura, altura automática limitada a 80vh. Scroll interno ativado quando conteúdo excede viewport. Shadow 0 8px 24px rgba(0,0,0,.25).
Decisões de design

Por que cada escolha foi feita

AcordeonPlantas raras exigem cuidados específicos e detalhados. O acordeon permite organizar grandes quantidades de informação sem sobrecarregar a interface — o usuário escolhe o que quer ver.
Modal confirm.Feedback imediato e claro sobre a ação aumenta a confiança. A opção "continuar comprando" preserva o fluxo sem forçar checkout imediato — respeitando o ritmo do usuário.
Limite de 5Demonstra controle de estoque e cria sensação de escassez — incentivando decisão de compra. A mensagem de erro em vermelho é clara mas não agressiva.
Cupom visualA mensagem de sucesso com o valor do desconto aplicado aumenta a percepção de valor e incentiva a finalização. Ver o desconto em verde no resumo torna o benefício concreto.
Dark modeConforto visual em ambientes com pouca luz, redução da fadiga ocular e expectativa crescente dos usuários modernos. Implementado com variáveis do Figma para consistência total.
Resultado

O que foi entregue

01
Protótipo testado com 8 participantes — 87% localizaram o guia de cuidados antes do checkout e 100% concluíram a jornada simulada.
02
10 componentes reutilizáveis com documentação técnica — reduzindo ambiguidade no handoff para desenvolvimento.
03
Storyboard da Maria orientou priorização: confiança, feedback de compra e cupom como gatilho de decisão.
04
Crazy Eight evitou apego prematuro ao layout — convergindo para grid de produtos como hierarquia principal.
03
Gamificação · Case de produto

Empatatia

Redesign de engajamento — diagnóstico comportamental e sistema gamificado com propósito

Interaction Design · Comportamento · Retenção

Modelo FoggHook Model EASTGamificação
+
Problema
Usuários adotavam uma vez e não retornavam — faltavam gatilhos, recompensas e vínculo contínuo com a causa.
Papel
Interaction Designer — diagnóstico comportamental (Fogg, Hook, EAST) e redesign gamificado.
Entrega
Sistema de missões, ranking, badges e desafios temporais + protótipo e wireframes no Figma.
Resultado
Intenção de retorno subiu de 28% → 71% em teste de conceito (n=6). 3 lacunas comportamentais mapeadas.
71%
Intenção de retorno após ver proposta gamificada (teste de conceito, n=6)
6
Mecânicas de engajamento projetadas (missões, ranking, badges, desafios…)
3
Lacunas críticas diagnosticadas: gatilho, recompensa variável e social/temporal
O problema

Usuário passivo após a primeira interação

A Empatatia tinha boa estrutura visual e navegação simples — mas a jornada terminava para a maioria logo após o primeiro contato. Sem gatilhos de retorno, sem recompensas pelo engajamento e sem incentivo para manter o vínculo com a causa.

A questão central que guiou o projeto: como transformar alguém que adotou uma vez em um agente ativo da causa?

Análise comportamental

Por que usuários não voltavam após a primeira adoção

BJ Fogg Behavior Model
Motivação ✓   Habilidade ✓   Gatilho ✗
A motivação estava presente (causa nobre) e a navegação era fácil — mas os gatilhos comportamentais eram inexistentes. Lembretes, chamadas para ação e estímulos temporais não existiam na versão atual.
Gatilhos ausentes
Hook Model — Nir Eyal
Trigger externo · Sem recompensa variável
Trigger concentrado em canais externos (Instagram, boca a boca). Recompensa variável — histórias, conquistas, feedbacks positivos — não existia. Sem investimento emocional acumulado, o retorno era improvável.
Variable Reward ausente
EAST Framework
Easy ✓ · Attractive ✓ · Social ✗ · Timely ✗
Fácil de usar e visualmente forte — mas sem componentes sociais (rankings, depoimentos) e sem estímulos temporais (desafios com prazo, metas semanais) que incentivassem ação imediata.
Social + Timely em falta
Solução proposta

Sistema gamificado com propósito real

A proposta não visava transformar a plataforma em um jogo — mas usar mecânicas de gamificação para criar valor emocional real, reconhecer o impacto dos usuários e fortalecer o vínculo com a causa de forma contínua.

🎯
Missões contextuais
"Compartilhe uma foto do seu pet", "Indique um amigo para adotar" — ações concretas que criam o Trigger interno que faltava no Fogg Model.
Pontos Empatia
Usuários acumulam pontos por adotar, doar e compartilhar — criando o Investment do Hook Model e incentivando retorno contínuo.
🏆
Ranking social
Doadores, adotantes e voluntários mais ativos em destaque — ativando o Social do EAST e criando pertencimento à comunidade.
📖
Histórias interativas
"Sua jornada com [nome do pet]" — timeline personalizada que mantém o vínculo emocional pós-adoção e cria Variable Reward no Hook.
🎖️
Badges por impacto
"Herói Animal", "Anjo da Guarda" — recompensas simbólicas que reconhecem ações reais, não tempo de tela. Reforço do Timely.
Desafios temporais
"Semana do Acolhimento": completar 3 ações em 7 dias para ganhar selo exclusivo — ativa o Timely e cria urgência com propósito.
Princípios de interação

Como as leis da Gestalt foram aplicadas

AffordancesPresentes no design atual — botões e links comunicam claramente sua função. A gamificação foi desenhada para manter essa clareza, sem sobrepor elementos desnecessários.
HierarquiaA hierarquia visual pode melhorar com destaque para ações gamificadas. Missões e ranking precisam de peso visual suficiente para não parecerem elementos secundários.
ProximidadeMissões relacionadas a um mesmo pet ou ação foram agrupadas visualmente — usando a Lei da Proximidade para criar unidade sem precisar de texto explicativo.
SimilaridadeBadges e pontos usam o mesmo sistema visual (ícone + número) em todos os contextos — a Similaridade garante que o usuário reconheça o padrão de recompensa sem instrução.
Resultado

Solução proposta e entregáveis

01
Teste de conceito com 6 usuários — intenção de retorno passou de 28% para 71% com a proposta gamificada orientada à causa.
02
Diagnóstico Fogg + Hook + EAST identificou 3 lacunas: ausência de gatilhos, recompensa variável e componentes sociais/temporais.
03
6 mecânicas de engajamento desenhadas — missões, ranking, badges, histórias, desafios temporais e pontos Empatia.
04
Protótipo e wireframes no Figma traduziram diagnóstico em fluxos de retenção pós-adoção — prontos para validação ampliada.
04
Impacto social · Case estratégico

Livro Vivo

Produto digital de leitura com incentivo financeiro — estratégia, métricas e priorização de MVP

Product Design · BSC · HEART · NSM

BSCHEART NSMMoSCoW
+
Problema
Leitura é privilégio — custo alto, baixo engajamento e tempo de tela consumido por conteúdo passivo.
Papel
Product Designer — pesquisa, estratégia (BSC, HEART, NSM), priorização MoSCoW e concepção de MVP.
Entrega
Persona Ana Clara, roadmap UX em 4 fases, escopo de MVP e telas conceituais da jornada de leitura.
Resultado
NSM definida. 8 features must-have priorizadas. Meta HEART: 2+ leituras/mês e 70% de quiz aprovado.
NSM
Leituras concluídas que geraram bolsas de incentivo — métrica norte do produto
50
Usuários previstos na rodada de testes de usabilidade do MVP
8
Features must-have priorizadas no escopo inicial (MoSCoW)
O problema

A leitura como privilégio

Mais de 50% dos brasileiros não leem com frequência. O preço médio de um livro (R$ 40–60) representa uma barreira real para famílias de baixa renda. Jovens passam 3,6 anos da vida adulta no celular — mas quase sempre consumindo conteúdo passivo e superficial.

A oportunidade estava em ressignificar esse tempo de tela: transformar o dispositivo mais acessível do país em ferramenta de educação, cultura e geração de renda.

Este case nasce como projeto de pesquisa acadêmica (2026), com UX orientado ao viés social — partindo da minha própria experiência crescendo na periferia de Guarulhos, onde livros eram luxo e o celular era a principal janela para o mundo.

Persona — Ana Clara, 17 anos, Recife
"Eu nunca pensei que ler fosse pra mim... mas agora, cada livro que eu termino me faz sentir um pouco mais capaz."
Objetivo do produto
Democratizar o acesso à leitura por meio de gamificação, trilhas personalizadas e microbolsas — conectando engajamento cultural a impacto social mensurável.
Análise estratégica

SWOT — diagnóstico do contexto

Forças
Propósito social inovador · Design acessível e inclusivo · Modelo de engajamento eficaz (incentivo financeiro como porta de entrada) · Parcerias estratégicas · Impacto mensurável via dados e métricas.
Fraquezas
Dependência de financiamento público · Desafio de retenção após o incentivo financeiro inicial · Infraestrutura tecnológica complexa · Necessidade de alfabetização digital entre o público-alvo.
Oportunidades
80%+ dos jovens brasileiros têm smartphones · Alinhamento com ProLer e Bolsa Família · Expansão do impacto social corporativo (ESG) · Popularização da gamificação na educação.
Ameaças
Instabilidade econômica e política · Concorrência de plataformas de entretenimento · Desafios de segurança de dados (LGPD) · Baixa priorização da leitura na cultura popular.
Planejamento estratégico

BSC + HEART — negócio e experiência integrados

BSC — Perspectiva Financeira
Sustentabilidade do modelo
KPIs: custo por usuário ativo, % de parcerias firmadas, volume de microbolsas distribuídas, SROI. Iniciativas: parcerias com editoras, incentivo fiscal para apoiadoras.
BSC — Clientes (Usuários)
Experiência do leitor
KPIs: NPS, taxa de engajamento (leituras iniciadas/concluídas), retenção mensal, % que relata melhoria de autoconfiança. Iniciativas: gamificação, experiências personalizadas com IA.
HEART — Métricas de UX
5 dimensões de experiência
Happiness: NPS pós-leitura · Engagement: sessões/semana, tempo de leitura · Adoption: cadastros via gov.br · Retention: 2+ leituras/mês · Task Success: % de livros com quiz aprovado.
North Star Metric
"Total de leituras concluídas que geraram bolsas de incentivo" — a NSM conecta engajamento com transformação social real, refletindo o ciclo completo: ler, aprender e ser recompensado.
Priorização e execução

MoSCoW + Roadmap UX em 4 fases

Must have
MVP essencial
Cadastro via gov.br, catálogo digital e físico, gamificação com pontos/níveis/bolsas, trilhas personalizadas, painel de progresso, quiz de validação, interface mobile acessível.
Should have
Versão 1.5
IA de recomendação baseada em histórico, área comunitária e desafios coletivos, notificações personalizadas, relatórios de desempenho integrados a escolas e parceiros.
Could have
Versão 2.0
Clube de leitura digital, sistema de badges sociais, modo offline, podcast e multimídia, versão web para ampliar acessibilidade além do smartphone.
01
Descoberta — 0 a 1 mês
Pesquisa exploratória com jovens de baixa renda, mapeamento da jornada, benchmark. Entregáveis: relatório de pesquisa, mapa de jornada, Design System inicial, protótipo de baixa fidelidade.
ResearchJornadaBenchmark
02
Prototipagem — 2 a 4 meses
Protótipo de alta fidelidade, testes de usabilidade com 50 usuários, ajustes de interface, validação de trilhas de leitura e mecânicas de gamificação.
Alta fidelidade50 usuáriosTestes
03
MVP e engajamento — 5 a 9 meses
MVP com 10 mil usuários piloto, onboarding gamificado, analytics em tempo real, campanhas com ONGs e escolas. Painel HEART/NSM monitorado continuamente.
MVP10k usuáriosAnalytics
04
Escala — 10 a 12 meses
Expansão para 1 milhão de usuários, IA de recomendação personalizada, testes A/B para onboarding e gamificação, planejamento da versão 2.0.
1M usuáriosIATestes A/B
Resultado

Estratégia, MVP e direcionamento de produto

01
NSM conecta leitura concluída a impacto social real — bolsas de incentivo como ciclo mensurável de transformação.
02
Metas HEART definidas: 2+ leituras/mês, NPS pós-leitura e 70% de aprovação no quiz de validação.
03
MoSCoW reduziu escopo do MVP a 8 features essenciais — evitando dispersão em um produto de alto impacto social.
04
Persona Ana Clara e justificativa pessoal orientam cada decisão — UX com viés social, não apenas estética.
Entrar em contato
02 — Processo

Como eu
trabalho

Cada fase tem um propósito claro antes de avançar. O processo começa com perguntas — não com wireframes.

Do problema à solução

Um processo que valoriza a divergência antes da convergência, a justificativa antes da entrega, e o usuário antes da ferramenta.

01
Descoberta
Contexto real de uso, objetivos do negócio e necessidades latentes dos usuários — antes de tocar em qualquer ferramenta. O problema mal definido gera a solução errada.
ResearchPersonasJornadaSWOT
02
Ideação
Múltiplas direções sem comprometimento com a primeira ideia. Crazy Eight, storyboards e frameworks comportamentais para estruturar a divergência criativa.
Crazy EightStoryboardFBMHookEAST
03
Prototipagem
Do wireframe de baixa fidelidade ao protótipo interativo no Figma — com componentes reutilizáveis, variantes e cada decisão justificada tecnicamente.
WireframesFigmaDesign SystemSmart Animate
04
Documentação
Decisões de design, justificativas técnicas e especificações — garantindo que o trabalho seja compreendido por qualquer equipe, agora ou no futuro.
SpecsBSCHEARTNSM
Princípios

O que guia
minhas decisões

01
Empatia antes de solução
O problema do usuário raramente é o que parece na superfície. Antes de qualquer interface, entendo o contexto real, as frustrações latentes e as motivações não ditas.
02
Comportamento, não preferência
Projetar para o que as pessoas fazem — não para o que dizem que fazem. Fogg, Hook e EAST me ajudam a entender o que realmente move ação e retorno.
03
Clareza como acessibilidade
Uma interface clara não é apenas bonita — é inclusiva. Hierarquia visual, affordances evidentes e feedback imediato respeitam o tempo de qualquer usuário.
04
Divergir antes de convergir
A primeira ideia raramente é a melhor. Crazy Eight e múltiplos wireframes existem para evitar o apego prematuro e garantir que escolhas sejam fundamentadas.
05
Design como agente estratégico
UX não termina na entrega do protótipo. BSC, NSM e HEART mostram que as melhores decisões de design são também decisões de negócio.
06
Impacto mensurável
Beleza sem propósito é decoração. Cada escolha de interface deve poder ser justificada em termos de usabilidade, engajamento ou transformação social real.
03 — Expertise

Como eu
aplico

Ferramentas e frameworks que uso no dia a dia — sempre a serviço do problema, nunca como fim em si mesmos.

Design & Entrega
Figma
Prototipagem end-to-end — Auto Layout, Variants, Smart Animate, Variables e documentação para handoff. Na Onze: fluxos, protótipos e QA visual. Na Flora: Design System com 10 componentes.
Discovery & Research
Double Diamond
Estrutura de divergência e convergência aplicada no redesign da home do App Onze — da pesquisa exploratória ao protótipo validado com usuários e handoff.
Comportamento
Fogg · Hook · EAST
Lentes comportamentais para diagnosticar por que usuários não agem ou não retornam. Aplicadas na Empatatia para propor gamificação com propósito real.
Estratégia de produto
BSC · HEART · NSM
Conecto métricas de experiência e negócio. No Livro Vivo: NSM orientando roadmap, BSC nas 4 perspectivas e HEART monitorando adoção e retenção.
Ideação
Crazy Eight · Storyboard
Divergência rápida antes da convergência. Na Flora Mística: 8 esboços em 8 minutos + jornada da Maria em 8 quadros orientando prioridades de interface.
Priorização
MoSCoW
Definição de escopo de MVP sem scope creep. No Livro Vivo: separação clara entre funcionalidades essenciais, desejáveis e futuras.

Vamos criar algo juntos?

Estou aberta a oportunidades de trabalho, projetos freelance e colaborações em design de produto. Se você busca uma designer que pensa o porquê antes do como, adoraria conversar.

giovana.araujo@outlook.com
Experiência
4+ anos · Onze · TIXIT · MSX International
Atuação atual
Onze · Fintech · App web & mobile
Formação
Design (graduação) · UX Design, Belas Artes FEBASP (pós em finalização)
Disponibilidade
Aberta a novas oportunidades

Trabalho selecionado

Onze
Produto em produção · Fintech · Discovery & QA Visual
Flora Mística
E-commerce · Protótipo Figma · Design System
Empatatia
Gamificação · Diagnóstico comportamental
Livro Vivo
Impacto social · Estratégia de produto · MVP