Case Study: Designing a landing page for Tutorly
A walkthrough of how I designed a landing page for an Edtech that helps connect students with tutors in real-time
🙋♂️ Introduction
This is a project that I did as a part of the 10k designers cohort 7 assignment. In this case study, I’m going to articulate how I designed a landing page for an Edtech Tutorly (fictional)
➡️ The Design Process that I followed.
➡️ My design decisions.
➡️ How I applied the AIDA framework to accomplish some primary goals.
💻 Full Figma prototype
If you’re in a hurry, you can play the prototype by following this link 👈
Or you can check out the prototype demo video below 👇
🏳️ Design Process
My design process for this project started with researching the problem statement, moodboarding, wireframing, lots of section iterations, feedback, and the final prototype.
Although this process might seem linear, oftentimes it’s not. This is more of a framework that helps to diverge and converge ideas whenever necessary. I also learnt the importance of feedback at different stages.
🔎 Research
My research started by understanding the goals for designing this landing page. The following are a couple of primary questions that I tried to understand initially.
- Why am I designing this?
- Who is going to be the target audience?
With these questions in mind, I went out and did some secondary research to understand the problems with traditional tuition in India, these were my findings:
This research helped me focus on the direction for landing page copy. I knew that my landing page should convey how the platform solves all these problems for them.
Now coming to the target audience, this platform would mostly benefit students who often face academic challenges and require additional support to excel in their studies. These would be students from classes 6th–12th.
The other part of the research was the content, structure for the landing page, and subject matter, so I searched for other such platforms both in my niche as well as any other categories in general.
As I was going through other landing pages, I came across the AIDA Framework, which helped me to create effective content for my landing page that converts.
⭐️ Using the AIDA framework:
The AIDA model represents the 4 stages a user goes through before making a purchase decision. It is just like the typical marketing funnel used here to motivate them to book their first session.
- Attention: Capturing their attention with a big, bold value statement.
- Interest: generating interest in the audience and letting them know how the platform can help them
- Desire: to move the audience from liking the platform to wanting to book their session by telling success stories from happy users.
- Action: CTA, CTA, CTA! The final and most essential step is to let the audience book their first free session.
During my research, I also used ChatGPT as my creative partner.
- To get a better understanding of problem space
- I used it to brainstorm different ideas
- For copywriting
- And to build on top of what I already knew.
I always made sure to make the required changes in the content generated by ChatGPT and try to make it more personalized for my use case
📑 Information architecture
After doing research, I moved on to information architecture. Here I used my research to plan how and in what priority the information will be shown to a user and how different sections will be arranged, The AIDA framework shown above helped me immensely to focus and create landing page copy.
A top-level section-wise breakdown of the landing page helped me gain more context and I got a good direction to move ahead.
✨ Visual Inspiration/Moodboarding
I spent a lot of time gathering good visual inspiration and put them all on my Figma file to reference later on. I also visited lots of well-designed and high-converting landing pages from various categories( Edtech, SaaS, etc) This Research helped me in the following ways :
- To find inspiration for visual design.
- To understand the structure of their landing page.
- To figure out the content sections.
- To identify the UI patterns that were similar on almost every landing page.
What really helped me later in the design process was bucketing various sections from different landing pages, and adding comments about what I liked from each section.
✍️ Wireframes
To quickly lay out all the information, and before jumping into visuals,
- I decided to do some initial sketches on paper, as it helped me iterate quickly.
- After getting down my initial ideas on paper wireframes, I jumped into Figma to build and iterate upon them.
- The main objective for iterations in this phase was to nail the layout & content
Making high-fidelity wireframes gave me a head start when I started with visual design as I had mostly finalised the layout and content
🎨 Colors and Typography
- I wanted to present a high-contrast and vibrant look for the landing page to which the audience would relate.
- I selected a bright green as my primary color because it symbolizes growth and evokes feelings of optimism, and energy.
- For my heading font, I was looking for something bold and stylized yet playful. After trying a lot of fonts, I decided to go ahead with Dela gothic one.
- Figtree being clean and with ample letter spacing, seemed like a perfect choice for my body font, and it also perfectly balanced out the bold and extended look of my heading font.
🔮 Visuals and Iterations
Visuals are that part of the process which requires the most time and effort, so breaking it down into smaller chunks helps in making better iterations. I iterated on each section seperately to get best results.
✨TL;DR✨
Check out the final design here: Final Figma Prototype
1. Hero section
The hero section is the first thing a user sees when he lands on the webpage. It serves as the first impression or the Attention part of AIDA. Therefore, the hero section had to be a banger, something that successfully grabs user's attention, so they will continue to scroll through the page, else they might drop off
Knowing this, I was very mindful of what information I should present in this section.
I decided to phrase a brief value statement that encapsulated the overall benefit of using the platform, and since one of the main objectives of this landing page is to increase the first session attended by users, I decided to add a CTA for users to book their session.
2. Features Section
Now that we have the users’ attention from the hero section. I wanted to present some information that tells the users what’s unique about the platform and how it can help them learn better.
Problems
- The font hierarchy does not look right
- The icons look too big & too text-heavy
- Although there are like 6 features shown but some of them can be combined.
Problems:
- The Why Choose Us text feels too generic & can be improved
- No supporting graphic for a better understanding of the feature
- Personalized study material and Personalised learning can be clubbed together
After some more iterations, I almost fixed most of the problems I encountered earlier.
For the final iteration, I highlighted 3 main benefits of the platform.
- Live tutoring: Conveys that they can get help any time that they want at their convenience.
- Hand-picked tutors: Conveys that the platform carefully selects who gets to be a tutor.
- Personalized learning: I conveys that they’ll get the undivided attention of the tutor and personalized learning material after accessing their learning objectives
I also made use of relevant graphics for showing respective feature, so that it’s easier for the user to know what is it exactly about.
3. How it works
Now that we’ve users interested as well in the platform, it was time to build desire which I did through testimonials and showing them how easily they can book their first session.
Problems:
- The section title feels generic like every other platform, could be better
- Although these are sequential steps but didn’t feel like it.
After a couple of iterations I solved these issues and came up with the final version shown below:
4. Testimonials
This is one of the sections which provides the user with proof of work, it showcases the testimonials from other students who have been successful in excelling in their academics after joining the platform. These testimonials help in building the user’s trust.
5. Book session
Now that we have even created a desire in the users from the above sections, it's time to show them the action that they need to take.
6. Download the App
Lastly, a section that prompts the user to download the app, I tried was iterations for this section as well before coming up with the final one.
The layout looked good to me in the last iteration, but the only problem was this section didn't have that impact and I wanted it to stand out, so with that in mind, I made a couple of changes and came up with the final design for this section.
7. FAQ Section
In this section, I focused on any questions people might have after going through the landing page. The FAQ section has:
- most common and essential questions answered already.
- a contact us button for any further queries.
This is also a common feature that I noticed in most of the landing pages during my research.
Final Design
🗒 Learnings from this project
- Your first version can never be perfect. It’s only through continuous iteration that you will start getting better results.
- There’s no linear Design process that one has to follow. It’s often back and forth between various stages. And the design process can be different for different designers.
- Collate all your research, wireframes, and screenshots in one place. Doing this makes it easier for someone to see your process and give feedback. It also helps in documenting your work.
- Keep taking feedback on different stages of the project to avoid lots of rework.
- Always keep project deadlines in mind while making design decisions.
😃 It’s a wrap!
Thank you for taking the time to read this case study. I hope you like it. Have any feedback for me? or just want to say Hi? Connect with me on Twitter and LinkedIn
Also, I’m open to opportunities as a product designer. Do reach out if you’d like to work with me or collaborate on some projects.
Good day :)
PS: If you long hold the clap button, you can give up to 50 claps on Medium
