Suraasa, a multinational EdTech platform, empowers teachers by catalyzing their career growth and inspiring millions of young minds to aspire towards becoming impactful, high-achieving, and well-compensated educators.

Suraasa aims to build a network of the next million skilled teachers by guiding them from the start of their journey to becoming among the top 1% of teachers globally. They offer internationally accepted programs that help teachers learn 21st-century pedagogy skills and secure teaching opportunities in countries like the USA, UK, UAE, and India.

While Suraasa has been providing international-level teacher programs and courses, they wanted to expand their offerings to help teachers with daily tasks and quick upskilling. Considering this, they decided to launch a Plus subscription for teachers.

This subscription provides access to AI tools specifically created to help teachers in their daily tasks, tailored to their context and requirements. Additionally, it includes masterclasses conducted by international teachers on various topics, ranging from classroom practices to career growth.

Suraasa wanted to have a landing page that communicates all the benefits of the Suraasa Plus subscription to their audience and encourages them to try it.

My role in this project was to develop the landing page on Webflow. Once the content and design were finalized, the design was handed over to me for development.

During the handoff, I understood the requirements, including the overall functioning of the page, animations, and the sections that needed to be adapted for mobile devices.

After that, I began working on Webflow, developing each section one by one.

We wanted to A/B test between a few sections on the page, starting from the hero section. One version had an image, while the other had the launch video.

Another section we wanted to test was the "What's Included" section. There were two versions. The first had a bento grid layout showing the details of the Suraasa Plus subscription. I built this section on Webflow using the quick stack layout option, which is essentially CSS grid.

The other version of this section featured timed auto-rotating tabs. To build this, I used the Refocus library and Webflow interactions. The hypothesis for testing between these two versions was to check if GIFs explaining each benefit had more impact than the bento section.

The A/B testing system was directly implemented in Webflow with custom rendering sections based on page variants. We wanted to test two sections (hero and "What's Included"), each having two versions, so the total number of page versions was four, using combinations.

A page variant was assigned to a user when they landed on the page for the first time, and it was stored in the local storage. The system was built such that each CTA link would carry forward the tracking, including the specific page variant from which the user claimed.

I developed the testimonial section with alternate marquees using custom CSS.

Then, we had a card with a call-to-action directed towards claiming Suraasa Plus. Following this was a text section highlighting how much time teachers saved using Suraasa AI tools.

After that, there was a section for the Suraasa Plus Contest containing all details, including the steps and where to submit. This contest was aimed at increasing adoption of Suraasa Plus, with a chance to win a 3-month Suraasa Plus subscription for free.

Finally, we had the FAQ section followed by a CTA section and footer.

In conclusion, the Suraasa Plus landing page project successfully combined strategic design with technical implementation, leveraging Webflow's capabilities and A/B testing to optimize conversions. This approach not only effectively communicated the value of Suraasa Plus to potential subscribers but also provided valuable insights for future iterations, ensuring the landing page continues to serve both Suraasa's goals and the needs of educators seeking professional development opportunities.

Click here to check the live webpage