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.

Suraasa recently launched AI tools for teachers. These features assist educators in their daily tasks at school, including lesson planning, creating assignments, defining rubrics, and more. There are a total of 11 tools available.

After launch, our goal was to increase awareness about these tools. So we decided to create SEO-optimized landing pages for each tool, explaining its benefits, usage, and impact.

As the design lead for this project, my role was to bring this vision to life. This involved first designing the user experience and user interface of the pages, then developing them on Webflow.

We kicked off the project by collaborating with the marketing and content writing teams to ideate on the structure of the landing pages.

We pondered questions like:

• How can we explain these tools to users in the simplest possible manner?

• How can we build trust that these tools actually get the job done?

• How can we make more teachers aware of these tools and encourage them to try them in their classrooms?

After the above discussions and brainstorming this is how the rough initial sketch of the page looked.

Once we were all aligned on the structure, we started working on the design of the page.

At the top, we have the hero section focusing on the main value proposition, along with a video explaining how the tool works.

After designing the hero section, we realized something was missing socially. So we decided to add specific parts of the reviews in a dialog format, with people mentioning the impact of the tool in their lives.

Then we showed how real people used our AI tool and display the actual output generated based on their context and requirements.

In the output section, users can click on specific cards to see the exact output the AI tool generated in PDF format.

We added CTA (Call-to-Action) strips throughout the page to consistently encourage people to try out the tool themselves and understand its impact. These subtle CTA nudges were meticulously placed on the page.

Next, we have a steps section explaining how simple it is to generate content with Suraasa AI tools.

We highlight the three core benefits right after explaining how Suraasa AI tools are different. One key difference is that Suraasa AI tools are "promptless" – unlike others, you don't need to write prompts. Instead, you just fill out a simple form that asks for the important customization variables for your output.

Then we have the testimonials section, which includes all the user reviews and ratings we received from our beta testing and early users. This is followed by another nudge to try out the tool.

Next, we have a small section explaining what the tool is all about and how it improves upon the traditional way of doing things.

To showcase efficiency and the improved way of creating content, I thought a before-and-after slider would be the best way. It clearly shows how easy it becomes for teachers to create a lesson plan or assignment in seconds, which would traditionally take hours to do manually.

Following this, we have a section explaining how that particular tool can positively impact various aspects of a teacher's life. After that, the FAQs and footer.

Once the design was final, I moved to development of these pages on Webflow.

The comparison slider was built with the help of the Flowbase before/after component with customizations needed for the design.

I created a bottom sheet component with help of Webflow interactions, but since on each click a different output had to be rendered, it would mean I needed to duplicate the component three times, which wasn't the best option. Another option was to write custom JS which replaces the output to be rendered based on user's click on a particular output card, which was much more efficient, so I implemented this.

The launch of these landing pages marked a significant milestone in making Suraasa's AI tools more accessible to educators. This project successfully merged intuitive design with technical innovation. By combining Webflow's capabilities with custom interactive elements, we created engaging landing pages that effectively showcase Suraasa's AI tools.

Check the live webpages below:

• Lesson Plan Generator

• Quiz Generator

• Narration Generator

• Handout Generator

• Assignment Generator