A Play2Learn é uma plataforma de aprendizagem corporativa que transforma conteúdos de treinamento em experiências gamificadas. Por meio de desafios, recompensas e trilhas personalizadas, a ferramenta ajuda empresas a aumentar o engajamento dos colaboradores e a retenção de conhecimento.
INDÚSTRIA
EdTech
CARGO
Product Designer
Contexto
Apesar de oferecer uma solução inovadora, o site institucional apresentava problemas que impactavam diretamente a conversão: carregamento lento, navegação confusa e uma comunicação que não valorizava os benefícios do produto. Entrei no projeto para redesenhar completamente o site, migrando do WordPress para o Framer, com foco em performance, clareza e aumento de conversão de leads.
Problemas
A análise do site antigo revelou pontos críticos que impactavam a conversão:
Performance comprometida. Páginas demoravam demais para carregar, principalmente no mobile. Visitantes fechavam a aba antes de ver qualquer conteúdo.
Hierarquia visual fraca. Informações importantes se perdiam em meio a textos longos. Os CTAs não se destacavam e passavam despercebidos.
Comunicação genérica. O site não explicava rapidamente o que a plataforma fazia nem quais problemas resolvia para empresas.
Ausência de credibilidade. Faltavam elementos de prova social, casos de uso concretos e qualquer indicador de confiança.
Abordagem
Fiz uma análise heurística do site antigo e identifiquei onde as pessoas travavam. Olhei sites de outras plataformas SaaS pra entender o que funciona: hero direto, benefícios claros, CTAs visíveis.
Decidi migrar pro Framer porque precisava de velocidade e controle sobre as interações. WordPress com plugins demais era parte do problema.
Soluções aplicadas
Paleta invertida e contraste estratégico
O roxo virou protagonista. No site antigo era só um detalhe, agora domina a interface e cria contraste forte com o preto. Os CTAs ficam evidentes de forma natural, sem precisar de bordas chamativas ou sombras exageradas. A escolha também diferencia a Play2Learn visualmente dos concorrentes que insistem no clichê "azul corporativo".
Direção de arte do vídeo Demo da plataforma
Além de desenvolver o site, fiz a direção de arte do vídeo que demonstra a plataforma em ação. Mantendo a mesma linguagem visual gamificada do produto, o vídeo foi posicionado no topo do site para engajar o usuário desde o primeiro contato, antes de apresentar as demais funcionalidades da plataforma.
Micro-interações e estrutura de conteúdo
Reestruturei o site em seções escaneáveis com benefícios para a organização, recursos da plataforma, casos de uso e integração com sistemas existentes. Cada bloco ficou independente, com títulos claros e descrições objetivas, facilitando a leitura diagonal. Os cards de benefícios aparecem progressivamente conforme o scroll e cada seção "acorda" no momento certo, evitando sobrecarga de informação.
CTAs em momentos estratégicos
Distribuí pontos de conversão ao longo da jornada, não apenas no final da página. Cada seção de valor traz um CTA contextual que responde a diferentes níveis de intenção: "Fale Conosco" para dúvidas, "Teste Agora" para quem quer experimentar o produto e um formulário de newsletter para quem prefere acompanhar novidades.
Resultados concretos
20% de aumento na conversão de leads em apenas um mês.
Tempo de carregamento reduzido drasticamente, melhorando especialmente a experiência mobile.
Taxa de rejeição menor devido à velocidade e comunicação mais clara.
Facilidade de manutenção e iteração, permitindo testes A/B e ajustes rápidos sem dependência de desenvolvimento.
Site atual: https://site.play2learn.com.br/
Aprendizados
O site antigo era lento e fazia visitantes desistirem antes mesmo de entender o produto. Com o Framer consegui criar interações rápidas e testar ajustes na hora, acelerando o processo e mostrando na prática o quanto a performance influencia a conversão.
O excesso de informação também dificultava a comunicação. Ao cortar o conteúdo, organizar a hierarquia visual e posicionar melhor os CTAs, as visitas começaram a se transformar em leads qualificados.
No final, o projeto mostrou que cada detalhe importa e pequenas mudanças podem fazer toda a diferença na experiência do usuário.
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!