Designing an ancient-inspired Landing Page for Sanskriti- A Sanskrit learning platform

Why Sanskriti ?

1. I selected this project from a list of 120 ideas in the assignment, and I chose to create an ancient language learning platform.
2. Why Sanskriti? Well, over the past 2–3 years, I’ve been exploring the cultural and spiritual aspects of Hinduism. I began my journey of studying various cultural books but faced a challenge like i couldn’t grasp the true and original meanings of these texts.

The objectives of this educational platform?

1. Educating all Indians about the significance of this ancient language in various fields.
2. Building a strong community of Sanskrit learners.

🧐Design Process

The design process in this project is typically step-by-step, but it can also be flexible and influenced by factors such as time limits, project scope, and available resources.

🔎Ideation

It began by addressing the simplest question: What type of platform would be most suitable for learning Sanskrit?

At first, I considered making a mobile app but then opted for a web platform because it’s in its early stages, and the web platform can attract both users who prefer web-based and app-based experiences.

What is Sanskriti?

It’s a website where you can learn Sanskrit. it offer a two-month course to teach you from the basics to Vedic Sanskrit.

Why pick Sanskriti?

It’s your one-stop solution to start your journey of learning Sanskrit with the best mentors from across India. It also has a great community where learners help each other, and mentors provide guidance within this supportive network.

🤯Research

I began with simple research, checking some ideas by talking to friends and family who visit ISKCON temples and have an interest in learning Sanskrit.

User Pain points

“I want to learn Sanskrit, but I’m not sure where to find a good teacher.”

“Balancing work and taking a course can be tough. A personalized course might be a great choice.”

Turning Visitors into Customers: The Conversion Process

1. The attention section: Where users first look at hero section for important info and a clear title with an actionable CTA to grab their attention.
2. The interest section: Building user interest with course features and course details.
3. The desire section: Where users get inspired to decide by learning about the mentors and gaining confidence from past learner reviews.
4. The action section: Enroll now, the moment where users decide to join the course, a critical turning point for both the business and customers.

To turn website visitors into potential learners, i made decisions on how to organize information, create wireframes, and design the visuals of the site.

🕵️‍♂️Visual Inspiration

I created mood boards to get a idea of the this category and look at popular design patterns and layouts from various types of websites like customer brands, software, fintech, and others. I gathered inspiration for content and catchy titles from these different categories.

Ancient Inspiration

To capture the feel of ancient India, I got ideas from portraits of kings, old letters, and the detailed designs of temples, each with its own special tale.

🦴Wireframes

The primary goal of creating wireframes was to experiment with various designs layout for each section of the website.

After trying out four or five different layout for the wireframe, I decided to go with this final one.

🎨Visual Design

Now comes the crucial step in the design process, the actual visual design. But before we dive into that, take a moment to check out the website’s style.

After choosing the website style, I began searching for images of ancient Indian gurukuls that would fit the style. After hours of searching without finding a perfect match, I decided to use AI tools like Bing Creator and MidJourney to generate the images, and here are the results i found.

Prompts- A guru of ancient gurukul who is meditating in front of sun, Ancient indian guruji who is teaching sanskrit to modern indian student.

🎪Final Versions

Now, here’s the vital part of the design process. Let’s take a look at it.

1. Hero section:

iteration

Problem with above iteration:

1. The background has multiple images, which makes it hard to focus. The mentor images are small and don’t fit well. The ‘Call to Action’ button doesn’t stand out and isn’t easy to use
2. The images don’t explain what the gurukul is about. The subtitle is too long and not very clear. There’s a lot of empty white space.
3. It has minimized the empty space, but the images don’t convey meaning, they seem hanging , and lack any ancient design elements.

The final Solution:

2. Feature:

Iteration

Problem with above iteration:

1. The title and description were too lengthy, making it hard to understand. The content focused on creating awareness about Sanskrit but ideally benefits of taking this courses should be highlighted here because user visiting this website would already know some information about sanskrit.
2. The image was grabbing all the attention, but the purpose of this section is to explain the course benefits in detail with tittle and description hierarchy.
3. We met the basic requirements, but the card layout is uneven and lacks design elements that give it an ancient feel. Finally, with feedback from a designer friend, I added a Sanskrit title tag to each section to give it a Sanskrit aesthetic.

The final Solution:

3. Mission:

Iteration

Problem with above iteration:

This could be the website’s most crucial tagline, so let’s give it more weight and ensure it stands out, which wasn’t the case in the above iterations.

The final Solution:

4. Course Details:

Iteration

Problem with above iteration:

1. The section had too much text, making it harder for users to read, and the layout was quite simple.
2. The images made it feel more alive, but there was limited interactivity.
3. Same goes for 3rd iteration the The images I used for the course phases show how the learner progresses and becomes more mature in Sanskrit with each stages of course.

The final Solution:

5. Mentors:

1. I drew inspiration from different websites and noticed a common design pattern, but I firmly believe in keeping it simple, with just a touch of ancient influence in the mentor images.
2. Prioritizing the text hierarchy with the name receiving the most attention, followed by the profession, and keeping the qualifications with minimal emphasis

5. Pricing :

Iteration

Problem with above iteration

1. The Call to Action (CTA) was too lengthy, and the focus on that section was lacking.
2. There was a lot of text to read, and it was lacking in hierarchy. Plus, the visuals didn’t grab enough attention.
3. I initially considered sticking with this design, but later on, I had the idea to create an image of a guruji meditating. After finding the right image, I decided to go with the final design mentioned below. Arrange the text with the price as the most text hierarchy, followed by a catchy title, and lastly highlight important features with actionable CTA.

The final Solution:

6. Review section:

1. I looked at various websites for ideas and saw some great designs. I wanted users to easily navigate between reviews, and I wanted learner to be visible at all times, creating a sense of multiple past learners.
2. Using the title to showcase the size of the community, using a classic letter pattern similar to wedding cards to highlight reviews, including the name and professional details, and incorporating an image carousel for reviewers.

7. FAQ, Footer :

1. Establish a visual hierarchy for answers to enhance readability, prioritizing based on importance.
2. Creating an eye-catching title to grab the user’s attention, along with providing an email address for any additional questions or concerns.
3. Lastly, the ‘Call to Action’ button is crucial. When a user scrolls through the webpage, it indicates their interest in the course. However, they might have second thoughts. The CTA can help them make a decision and start the onboarding process.

Check out this one-page website on 🚩Behance

You can play around in figma file

👋Before Finishing

I had a lot of fun making this landing page, and it helped me see how powerful iteration can be. In this project, I found out how language is linked to science, culture, and spirituality.

I’m open to feedback. Feel free to DM me on LinkedIn or Twitter.