Startup Academy

🧠 Visão Geral

do Projeto Startup Academy é uma plataforma de graduação EAD com foco em empreendedorismo digital. Fui responsável por liderar a criação do design system da plataforma e desenhar novas features com foco em automatizar a jornada manual. Aqui irei abordar uma das jornadas que atuei, a de checkout.

🎯 Objetivos

Redesenhar a jornada de assinatura de cursos para aumentar a conversão, simplificar o processo e gerar mais confiança nos usuários durante a jornada de compra.

🔍 Desafios

  • Jornada longa e pouco intuitiva;

  • Falta de consistência visual entre as etapas;

  • Falta de clareza na diferenciação entre os planos;

  • Integração de métodos de pagamento diversos (boleto, crédito).

📱 Jornada do Usuário (Checkout)

Etapa 01: Seleção do curso

🧠 Raciocínio de UX:

  • Reorganizei a hierarquia visual para destacar os diferenciais de cada plano, reduzindo o esforço cognitivo do usuário na comparação.

  • Usei o selo “Mais vendido” no plano intermediário, estratégia inspirada em comportamento de consumo (efeito “decoy”) para direcionar a escolha mais vantajosa para o negócio.

  • Trabalhei com ícones e bullets para facilitar o escaneamento rápido dos benefícios.

  • Call-to-actions ("Selecionar") consistentes, com boa área clicável e contraste acessível.

🎨 Decisões de UI:

  • Cards com proporção equilibrada, espaços em branco e espaçamento entre itens para melhorar legibilidade.

  • Utilização do laranja como cor de destaque para elementos clicáveis, reforçando o padrão visual definido no design system.

  • Microinterações previstas no protótipo, como hover nos cards, para reforçar interatividade.

Etapa 02: Endereço

🧠 Raciocínio de UX:

  • Dividi o formulário em blocos horizontais para melhorar a escaneabilidade.

  • Priorizei o campo de CEP no topo para viabilizar o preenchimento automático dos campos seguintes (cidade, estado, rua etc), reduzindo esforço.

  • Inclusão do botão "Não sei meu CEP" resolve um problema comum e evita abandono da jornada.

🎨 Decisões de UI:

  • Campos com boa proporção e espaçamento.

  • Labels internas e placeholder ao mesmo tempo, para garantir contexto mesmo após digitação.

  • Componente de botão com estados (ativo/inativo) para orientar a progressão do usuário.

Etapa 03: Pagamento

🧠 Raciocínio de UX:

  • A seleção de método de pagamento é apresentada com ícones e texto direto, reduzindo a ambiguidade.

  • Um resumo fixo do pedido foi adicionado ao lado direito — ele acompanha o usuário durante o fluxo e ajuda a manter a transparência.

  • Campo de cupom foi posicionado em local estratégico (abaixo do valor total) para não interromper o foco na escolha.

🎨 Decisões de UI:

  • Utilização de grid simétrico para reforçar estrutura visual.

  • Cartões de pagamento com ícones grandes e estados de seleção visíveis.

  • Painel lateral com sombra sutil e cor de fundo diferenciada para destacar o conteúdo.

Etapa 04: Dados de pagamento (cartão)

🧠 Raciocínio de UX:

  • Campos segmentados (número, validade, CVV) com validação em tempo real e máscaras aplicadas.

  • Labels claras e instruções de apoio abaixo dos campos (ex: “número como aparece no cartão”).

  • Dropdown de parcelamento aparece apenas após o preenchimento dos dados válidos — estratégia para reduzir ruído e priorizar tarefas sequenciais.

🎨 Decisões de UI:

  • Componentes reutilizados do design system com padronização de altura, raio de borda e cores.

  • Ícone de cartão ao lado do título para reforçar contexto.

  • Botão de “Continuar” desativado até validação de todos os campos — reduz erros.

Etapa 05: Revisão e finalização

🧠 Raciocínio de UX:

  • Mostrei um resumo com os dados do aluno e a forma de pagamento escolhida, promovendo segurança antes da finalização.

  • Ofereci opção de editar os dados diretamente a partir desta tela, reduzindo fricção.

🎨 Decisões de UI:

  • Elementos agrupados com base no princípio da proximidade (Gestalt).

  • Cartão de crédito mascarado para reforçar segurança.

  • Botão “Finalizar pagamento” com destaque verde para induzir ação positiva.

Etapa 06: Tela de sucesso

🧠 Raciocínio de UX:

  • Mensagem simples e direta, validando a ação do usuário.

  • Feedback positivo imediato reduz ansiedade e reforça confiança na plataforma.

  • Indicativo de redirecionamento automático prepara o usuário para a próxima etapa sem deixá-lo perdido.

🎨 Decisões de UI:

  • Ilustração minimalista com movimento sugerido (poderia ter animação sutil no produto).

  • Espaçamento generoso e alinhamento centralizado para foco total na mensagem.

📈 Resultados

  • +18% de aumento na conversão da jornada de compra;

  • -23% de abandono nas etapas de pagamento;

  • Maior satisfação em testes com usuários (NPS interno).

Esses números foram resultados de pesquisas quantitativas e acompanhamento de métricas de vendas, além da aplicação de uma dinâmica de carrinho abandonado para evitar abandono.

🌈 Design System

Desenvolvemos um design system modular para garantir consistência visual e agilidade no desenvolvimento:

  • Cores, tipografias e componentes interativos;

  • Tokens reutilizáveis para garantir escalabilidade e melhor adesão;

  • Documentação no Notion + suporte ao time de front-end.