Case Study: Designing a landing page for LogIQids

Mohd Bilal
Bootcamp
Published in
5 min readOct 7, 2023

--

Overview

We started and intended to make the landing page in the end in comparison with Classroom, Activity, and Home. Journey because we first wanted to make these core pages and flows clear and in the first place which can later help us reflect the same in the landing page and help us sell better.

Problem statement

Design a captivating, user-friendly landing page targeting students in grades 1 to 7. With an objective to convey clear storytelling of LQ LIVE educational program, building trust with parents, and optimizing conversion rates to drive adoption and success.

Understanding Problem Statement

As a next step, I started jotting down multiple General Questions that users (parents, teachers, and students) would have when they first open our product website:

  • What is LQ live? (LogIQids overview)
  • What Does LQ do? (Live Logic, Maths, and Science sessions)
  • What key benefits do they get? (Values, Courses, and Services, etc)
  • Whether they’ve come to the right place or not?
  • Building trust Social proof(Happy users testimonials)
  • What to do next core action(Book free trial)

Explore

I went across some popular and small startups to see how they have solved the existing problems and gain inspiration some of them were:

  • Mastree by unacademy
  • Unacademy
  • Campk12
  • Lido
  • Byjus
  • Noon Academy
  • Yellow class and more.

Notes

Based on the general flow, references, and the text copy given by the client I started organizing content into sections to get the Information architecture done.

Here are the following finalised sections based on the above exercise

  • Hero section
  • Subjects (Logic, Maths, and Science)
  • Fun Facts / Questions
  • Why LQ Live
  • Activities, Classroom, and End Summary
  • Curriculum and Pricing
  • Testimonials
  • FAQ’s
  • Free A Free Trial Class
  • Footer, etc

Wireframing

Wireframes

With all my information consolidated in one place, I picked up my pen and paper to jot down my vision of the website. I chose this method because wireframing on paper is quicker, takes less effort, and gives more creative freedom than any design tool.

Iterations

Here’s a snippet of the same:

Final Design

Breakdown of each component

1) Hero section

Hero section
  • To help users resonate more I used realistic students' and parents' photos altogether between the age group of students grades 1–7
  • I collected more than 40+ photos which were matching with the target audience and then tried multiple iterations around them.
  • For the text copy, we experimented with multiple headlines along the process across subjects, processes, and product values.

2) Subjects

Goal: Communicate the subjects we include in our live sessions

I used colour, icons, and styling specific to subjects across the product (classroom, student report, landing page, etc) to help users identify the subject based on its visual grammar.

3) Did You Ever Wonder?

Goal: Curiosity gap, to make the users curious and build the tendency to try and fill in the blanks.

Curiosity gap

4) Why LQ LIVE?

Objective: Communicate core values of LQ LIVE

Why LQ LIVE

5) Everything You Need For Mastery And Engagement

Objective: Show a preview of how we make the entire process gamified and engaging

Live Engagement
  • All the illustrated scenes were animated to add make the sections more lively and interactive.
  • To support the headlines the idea was to give a preview of the product's core steps and to do so I tried dividing the content into 3 core sections Live Engagements, Fun Activities, Insights, and feedback.

6) Curriculum and pricing

7) Testimonials

Testimonials

Social proof: People are constantly seeking evidence to evaluate a new experience (e.g., a product, service, or holiday).

Since it’s a new product we didn’t have any testimonials yet but keeping in mind the future requirements and adding social proofing we planned to design this section where the general content for the block was (Parent name, Image using the platform, message/feedback, student name, etc)

8) FAQ’s

9) Footer

  • A bold free trial class card was placed in the footer head to generate more leads in trial classes and was intended to be used across all other product pages.

Aaandd, that's a wrap!

Thank you for reading my case study till the end. I hope you found it informative and helpful, would love to hear your thoughts or feedback on the same!

If you have any feedback or questions, please do not hesitate to reach out to me on LinkedIn or Twitter.

Click here to view the product and experience the design in real⚡️

--

--