🧑🏼💻
🙍🏼
😀
Top performers' websites are solution-oriented. From the navigation bar to the footer, they are more focused on providing solutions rather than showcasing their features.
We need to showcase the student experience/learner side, which is something no other website is currently doing.
Our website has a lot of buttons without clear intentions. Other websites have placed buttons only where necessary.
Videos are more engaging than images with statistics.
Some are giving short surveys in pricing page.
Recommended blogs under each feature/solution section.
Example courses of our clients can be shown.
Bird eye view
To ensure a seamless user experience, I restructured the website’s information architecture. The goal was to create a logical and intuitive navigation flow, making it easier for users to find key information and explore Learnyst’s features effortlessly.
Since we were building the website from scratch in Framer, I had to create the design system within the platform. I made a few minor updates, such as switching the font to Inter for improved readability and adding six new colors to Learnyst’s color palette. For iconography, I chose Phosphor icons. Apart from these changes, we retained most elements from the existing design system.
Once the mega menu was sorted, I took a step back and thought—What are the sections we’ll keep reusing across the site? Instead of designing pages one by one, I decided to first build the most commonly used sections like testimonials, "Get Started" prompts, hero sections, and feature explanations.
By designing these upfront, I could maintain consistency and speed up the process. Plus, it made assembling the rest of the website feel like putting together LEGO pieces—quick, efficient, and seamless!
With all the common sections in place, it was time to tackle the Features page. But instead of just listing features in a boring way, I wanted to make it engaging, interactive, and storytelling-driven—so users stay hooked and naturally explore more.
Here’s how I structured it:
🎥 Intro Video – A quick overview of the feature to grab attention.
🛠️ What You Can Do – Showcasing all the possibilities with the feature.
🖱️ Interactive Demo – Let users experience the feature firsthand.
🚀 Deep Dive – The rest of the page explains the feature in detail.
To highlight Learnyst’s unique strengths, I also added a dedicated section for six standout features and the best features overall. And of course, everything was designed to naturally guide users to related pages, keeping them engaged throughout!
Since the marketing team would be managing the website, I integrated Framer CMS to make their workflow seamless. Now, instead of manually editing pages, they can simply upload resources, add a title, and enter a description—and the page updates automatically.
This not only saves time but also ensures the website stays fresh with minimal effort. Below, you’ll find images showing how CMS was set up and how the page updates dynamically. 🚀
Designing the pricing page was a huge task—it involved creating detailed tables, multiple components, and ensuring flexibility for frequent price changes. Our stakeholders wanted the ability to tweak pricing multiple times a month to test the market, so we built a dynamic pricing component that makes updates super easy.
To take it a step further, we’re now working on integrating Notion with Framer. Once set up, any updates made in the Notion database will automatically reflect on the website—no manual edits needed! This feature will be rolled out in Version 2 of the website.
Below, you can check out the final pricing table design. 🚀
After designing all the sections and pages, we were finally ready to launch Version 1 of the Learnyst website! 🚀 This version focused on improving navigation, structuring key sections, and ensuring a smooth user experience.
For Version 2, we plan to enhance the website further by refining images, adding more videos, and updating minor sections to make it even more engaging.
Check out the final website below, or visit www.Learnyst.com to see it live! 👀
After launching the new website, we saw a significant increase in traffic, sales, SEO rankings, and site performance. Everything improved compared to the old website, and the ROI on this project was much higher than expected. While I can't share exact numbers, the results spoke for themselves.
On a personal note, this project was a huge learning experience for me. It was my first project as a lead, where I handled everything from start to finish. It pushed me to think strategically, manage multiple aspects of design, and create something impactful.
Excited for more challenges ahead—thanks for reading! See you in the next case study. 🚀