UX / UI · Desenvolvimento Front-end

Foco Total
Course

Transformando uma plataforma educacional com sérios problemas em uma experiência digital de alta conversão — de links quebrados e design amador para +47% de conversões e 1.300 visitantes orgânicos mensais.

Prazo
45 dias
Meu Papel
UX/UI + Front-end
Segmento
Educação Jurídica
Cliente
Prof. André Estefam
Foco Total Course — final design preview
01

Visão Geral

O Foco Total Course é uma plataforma educacional especializada em preparação para concursos do Ministério Público, coordenada pelo Professor André Estefam — Promotor de Justiça com mais de 26 anos de experiência e um dos nomes mais respeitados da educação jurídica brasileira.

Apesar das impressionantes credenciais do professor, o site contava uma história completamente diferente: design amador, links quebrados, navegação confusa e taxas de conversão que não refletiam a qualidade do produto.

"O site não estava à altura da reputação do Professor Estefam — e estava ativamente perdendo alunos que deveriam ter convertido."

Resultado: Em 45 dias, entregamos uma reformulação completa que aumentou a conversão em 47%, reduziu a taxa de rejeição em 65% e fez o tráfego orgânico crescer de 100 para 1.300 visitantes mensais.

02

O Problema

Quando iniciei o projeto, uma auditoria heurística revelou múltiplos problemas críticos prejudicando a plataforma:

Antes
Um problema de credibilidade
Design amador, sem hierarquia visual
Links quebrados por todo o site
Navegação confusa e não intuitiva
Tráfego orgânico quase nulo (~100/mês)
Baixa conversão em todas as páginas
Depois
Uma máquina de conversão
Design profissional que transmite autoridade
Todos os links funcionando — QA completo
Arquitetura de informação intuitiva
1.300+ visitantes orgânicos mensais
+47% de melhoria na taxa de conversão

Quer ver o processo completo de pesquisa, personas, wireframes e aprendizados?

01
Design Amador
A apresentação visual não comunicava os 26 anos de autoridade e expertise do Prof. Estefam
02
Caos de Informação
O conteúdo era desorganizado — os alunos não encontravam o que precisavam para tomar uma decisão de compra
03
Navegação Quebrada
Múltiplos links quebrados e páginas importantes faltando criavam becos sem saída pelo site
04
Baixa Conversão
Os CTAs estavam escondidos e ineficazes — visitantes saíam sem realizar nenhuma ação
05
Sem Tráfego Orgânico
Apenas ~100 visitantes mensais apesar da forte demanda de busca por cursos de preparação para o MP
06
Base de SEO Inexistente
Sem estrutura de meta tags, organização de URLs ruim, sem marcação semântica e alt texts
03

Processo de Pesquisa

Para entender o mercado e definir a melhor abordagem, realizei pesquisas em três dimensões:

1
Análise Competitiva
Mapeei os principais concorrentes — Estratégia Concursos, Gran Cursos e Direção Concursos. O objetivo não era copiá-los, mas encontrar padrões de sucesso e oportunidades de diferenciação: onde todos convergiam e onde estava o espaço em aberto?
2
Pesquisa de Tendências de Design
Pesquisei tendências de design em plataformas educacionais no Dribbble, buscando inspiração para interfaces modernas e focadas em conversão. A direção: premium o suficiente para transmitir respeito, acolhedor o suficiente para construir confiança.
3
Avaliação Heurística
Avaliei sistematicamente o site existente com base nas 10 heurísticas de usabilidade de Nielsen, documentando 23 violações distintas. Isso nos deu uma lista priorizada do que corrigir, melhorar e repensar completamente.
lightbulb
Insight Principal

O cenário competitivo mostrou que todos os grandes players tinham o mesmo problema de credibilidade: eram corporativos demais (frios, distantes) ou pareciam amadores demais. Havia uma oportunidade clara para uma plataforma que parecesse ao mesmo tempo autoridade e humana — ancorada em torno de um especialista específico, não de uma instituição.

04

Personas

Trabalhando com o profundo conhecimento do Prof. Estefam sobre seu público, defini duas personas primárias com motivações e necessidades distintas:

João — O Iniciante
Advogado recém-formado, 25–28 anos
Buscando direção sobre por onde começar
Precisa de metodologia clara e estruturada
Valoriza muito o histórico do professor
Quer investir certo desde o início
Avesso ao risco — tem medo de desperdiçar tempo e dinheiro
Maria — A Persistente
Estudante experiente, 30–40 anos
Já tentou outros cursos sem sucesso
Busca metodologia diferenciada
Cética — precisa de comprovação de resultados
Valoriza eficiência acima de tudo
Não vai mais abrir mão da qualidade
lightbulb
Implicação de Design

Ambas as personas compartilhavam uma necessidade crítica: precisavam confiar na plataforma antes de converter. Isso tornou a prova social, a visibilidade das credenciais e a comunicação clara da metodologia as principais prioridades de design — acima da estética, acima das funcionalidades.

05

Jornada do Usuário

Mapeei a jornada de conversão ideal — do primeiro contato à compra — identificando estados emocionais e pontos de fricção em cada etapa:

1
Descoberta — "Preciso passar no concurso do MP"
O usuário chega via busca orgânica ou indicação. A primeira impressão é crítica — o hero precisa comunicar autoridade e clareza em 3 segundos.
2
Exploração — "Esse professor pode me ajudar?"
O usuário explora credenciais, metodologia e histórias de sucesso. Prova social e especificidade (nomes reais, resultados reais) constroem confiança.
3
Consideração — "Qual curso se encaixa em mim?"
O usuário acessa a página do curso específico, analisa o conteúdo e opções de pagamento. Clareza e ferramentas de comparação reduzem a fricção de decisão.
4
Conversão — "Estou pronto para investir"
CTAs fortes, proposta de valor clara e fluxo de compra fácil convertem intenção em compra. Redução de risco (garantia, FAQ) fecha os indecisos.
06

Wireframes

Antes de tocar no design visual, construí wireframes de baixa fidelidade para definir a arquitetura de informação e o fluxo de conversão. Cada posicionamento de seção foi deliberado — validado contra as personas e a jornada do usuário.

07

Design Visual

Com os wireframes aprovados, desenvolvi protótipos de alta fidelidade aplicando um novo sistema de identidade visual. A direção: autoritativo, mas acessível — premium o suficiente para transmitir respeito, acolhedor o suficiente para construir confiança.

palette
Direção de Design

O sistema visual foi construído em torno da marca pessoal do professor. Azul profundo e dourado comunicavam autoridade e expertise, enquanto o espaço em branco generoso e a tipografia humanista mantinham a experiência acessível — não intimidadora.

08

Desenvolvimento

Além do design, assumi total responsabilidade pela implementação front-end. Cada decisão priorizou performance e SEO — duas áreas que o site original havia completamente ignorado.

Arquitetura de Performance
Todas as imagens otimizadas para WebP, lazy loading implementado, CSS/JS minificados. Resultado: tempo de carregamento caiu de 8,2s para menos de 2s no mobile.
Base de SEO
Estrutura HTML5 semântica completa, meta tags, Open Graph, marcação Schema.org para cursos, sitemap XML, robots.txt. Construído para ranquear em termos de busca de alta intenção.
Analytics e Rastreamento
Microsoft Clarity integrado para gravações de sessão e mapas de calor. Eventos de conversão mapeados em todo o funil — permitindo otimização contínua após o lançamento.
Acessibilidade
Navegação por teclado, labels ARIA, conformidade de contraste de cores, testes com leitor de tela. Design acessível é design melhor — para todos.
09

Resultados

Medidos nos 90 dias seguintes ao lançamento, comparados ao período equivalente antes do redesign:

+47%
Taxa de Conversão
Correlação direta com o novo fluxo de UX
−65%
Taxa de Rejeição
Usuários passaram a se engajar com o conteúdo
+120%
Tempo na Página
Hierarquia de conteúdo aprimorada
13×
Organic Growth
100 → 1.300 visitantes mensais
10

Aprendizados

!
Confiança é um problema de design
Cada decisão visual constrói ou corrói credibilidade. Para produtos de alta consideração como educação, a confiança sempre vem antes da conversão. Design para confiança primeiro.
!
SEO é UX para o algoritmo
O crescimento de 13× no tráfego veio inteiramente de HTML semântico limpo e estrutura de meta correta — sem anúncios pagos. SEO técnico é UX invisível que escala.
!
Velocidade é uma funcionalidade
Reduzir o tempo de carregamento de 8s para menos de 2s contribuiu diretamente para a melhoria da taxa de rejeição. Otimização de performance não é opcional — é UX fundamental.

"O impacto mais significativo não foi criar uma interface bonita — foi tornar a autoridade do professor visível e acessível para as pessoas certas no momento certo."

Veja o resultado

Pronto para explorar o site ao vivo?