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.
INDUSTRY
EdTech
ROLE
Product Designer
Context
Despite offering an innovative solution, the institutional website had issues that directly impacted conversion: slow loading, confusing navigation, and communication that did not highlight the product's benefits. I joined the project to completely redesign the site, migrating from WordPress to Framer, focusing on performance, clarity, and increasing lead conversion.
Problems
The analysis of the old site revealed critical points that impacted conversion:
Compromised performance. Pages took too long to load, especially on mobile. Visitors would close the tab before seeing any content.
Weak visual hierarchy. Important information got lost among lengthy texts. The CTAs did not stand out and went unnoticed.
Generic communication. The site did not quickly explain what the platform did or what problems it solved for companies.
Absence of credibility. There were no elements of social proof, concrete use cases, or any indicators of trust.
Approach
I conducted a heuristic analysis of the old site and identified where people were getting stuck. I looked at sites from other SaaS platforms to understand what works: a direct hero, clear benefits, visible CTAs.
I decided to migrate to Framer because I needed speed and control over the interactions. WordPress with too many plugins was part of the problem.
Applied Solutions
Inverted Palette and Strategic Contrast
Purple has become the protagonist. In the old site, it was just a detail, but now it dominates the interface and creates a strong contrast with black. The CTAs are naturally evident, without the need for flashy borders or exaggerated shadows. This choice also visually differentiates Play2Learn from competitors who insist on the cliché "corporate blue."
Video Demo Art Direction of the Platform
In addition to developing the website, I directed the art for the video that demonstrates the platform in action. Keeping the same gamified visual language of the product, the video was positioned at the top of the site to engage the user from the very first contact, before presenting the other features of the platform.
Micro-interactions and Content Structure
I restructured the site into scannable sections with benefits for organization, platform features, use cases, and integration with existing systems. Each block became independent, with clear titles and objective descriptions, making diagonal reading easier. The benefit cards appear progressively as you scroll, and each section "wakes up" at the right moment, avoiding information overload.
CTAs at Strategic Moments
Distribute conversion points throughout the journey, not just at the end of the page. Each value section brings a contextual CTA that responds to different levels of intent: "Contact Us" for inquiries, "Try Now" for those who want to experience the product, and a newsletter form for those who prefer to keep up with news.
Concrete Results
20% increase in lead conversion in just one month.
Loading time drastically reduced, especially improving the mobile experience.
Lower bounce rate due to speed and clearer communication.
Ease of maintenance and iteration, enabling A/B testing and quick adjustments without reliance on development.
Current site: https://site.play2learn.com.br/
Learnings
The old site was slow and caused visitors to give up before even understanding the product. With Framer, I was able to create fast interactions and test adjustments on the spot, speeding up the process and demonstrating how much performance influences conversion.
The excess of information also made communication difficult. By cutting down the content, organizing the visual hierarchy, and better positioning the CTAs, visits began to turn into qualified leads.
In the end, the project showed that every detail matters and small changes can make all the difference in the user experience.
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!