Edtech Website Design: An Online Course Case Study

An edtech landing page has a brutal job: turn a curious visitor into an enrolled, paying student in one scroll — while competing with a hundred free YouTube tutorials. This edtech website design case study breaks down how I build online course, e-learning and platform landing pages with Next.js, GSAP and interactive lesson previews — pages that show the learning experience instead of just listing modules, and convert. Written by the creative developer who ships this work for global clients.

Why most online course pages don't convert

Walk through ten edtech sites and you'll see the same pattern: a hero, a bullet list of "what you'll learn", a wall of module accordions, an instructor bio, a pricing table. It's a brochure. It tells you about the course but never lets you feel it — and feeling is what closes the sale. The visitor can't tell the difference between your program and the free playlist until they've already bounced.

I've spent 11+ years building award-winning, interactive web experiences (3× Awwwards Site of the Day, named Awwwards "Independent of the Year" twice, and a seat on the Awwwards jury) for clients across Norway, Denmark, Sweden, Malta and beyond. The same craft that makes a product site feel alive is what turns a course page from a brochure into a preview — and previews convert.

Three constraints shape every edtech build I take on:

• Show, don't list. The curriculum should be an interactive experience, not a table of contents.
• Trust in seconds. Students risk time and money; the page has to prove real outcomes fast.
• Fast on a student's phone. Your audience is on mid-range Android over spotty campus wifi — the page has to be light and instant, or the conversion never starts.

The craft: an interactive curriculum, not an accordion

The single highest-leverage move on a course page is making the curriculum interactive. Instead of a static accordion, pin the curriculum section and let each lesson reveal a live preview — a code snippet animating in, a short muted clip, a before/after — as the student scrolls. GSAP's ScrollTrigger makes this a pinned, scrubbed sequence.

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const lessons = gsap.utils.toArray<HTMLElement>('[data-lesson]')

ScrollTrigger.create({
  trigger: '[data-curriculum]',
  pin: true,
  start: 'top top',
  end: `+=${lessons.length * 100}%`,
  scrub: 1,
  onUpdate: (self) => {
    const active = Math.floor(self.progress * lessons.length)
    lessons.forEach((lesson, i) =>
      lesson.classList.toggle('is-active', i === active),
    )
  },
})

As the student scrolls the pinned section, each lesson's preview animates in on the right while the list highlights on the left. It reframes the entire pitch: they're not reading a syllabus, they're sampling the course. The pinning and scrub mechanics are covered in depth in my GSAP ScrollTrigger tutorial.

Lesson-preview video without tanking the page

Course pages want video — but a wall of autoplaying lesson clips is the fastest way to make a student's phone stutter and bounce. The discipline is the same one I use on award-winning video-heavy sites: one active clip at a time, lazy-loaded, poster frame until needed.

const previews = gsap.utils.toArray<HTMLVideoElement>('[data-preview]')

function activate(target: HTMLVideoElement) {
  previews.forEach((video) => {
    if (video === target) {
      video.play()
    } else {
      video.pause()          // never decode more than one clip at once
      video.currentTime = 0
    }
  })
}

The swap between previews only touches transform and opacity, so scrolling stays smooth even as a new clip decodes in the background. That's the difference between a preview that feels premium and one that feels broken on the exact device your students use.

Connecting to the LMS without going slow

Behind the marketing page sits real machinery: enrollment, payments, progress, an LMS or course API. The architecture that keeps it fast is Next.js's split between static and dynamic:

• The landing page is static (or ISR). Marketing copy, curriculum, testimonials — pre-rendered, served instantly from the edge, revalidated on a schedule so the team can update without a deploy.
• The dynamic bits stay dynamic. Live seat counts, a logged-in student's progress, checkout — a React Server Component or route handler talks to the LMS/payment API only where it's needed.

// Static marketing + fresh seat count, no full-page dynamic cost
export const revalidate = 300 // ISR: refresh curriculum every 5 min

async function SeatCounter({ courseId }: { courseId: string }) {
  const seats = await fetch(`${API}/courses/${courseId}/seats`, {
    next: { revalidate: 60 },
  }).then((r) => r.json())
  return <span>{seats.remaining} seats left</span>
}

This is the pattern that keeps a course page both fast and live — the exact same architecture I used on the interactive DeepSee 3D e-commerce case study, where a heavy interactive experience still had to load instantly. The trade-offs between static, ISR and dynamic are worth understanding before you scope; my guide to Core Web Vitals for animation-heavy sites covers how to keep it fast under load.

Custom build vs course-platform template

	Course-platform template (Teachable, etc.)	Custom (Next.js + GSAP)
Landing-page motion	Generic blocks	Interactive, brand-tuned
Curriculum as preview	Static accordion	Pinned, scrubbed, sampled
Mobile performance	Heavy, shared theme	Light, code-split, instant
Conversion funnel	Fixed	Exactly your flow
Brand differentiation	Looks like everyone	Unmistakably yours

Course-platform templates are perfect for hosting the course. But your landing page — the thing that has to out-convert every competitor and every free alternative — is where a custom build pays for itself. For the full route comparison, see creative developer vs template vs Webflow vs agency.

The result: a page that sells the learning

The outcome I aim for on every edtech build is a landing page that makes a visitor feel the value of the course before they reach the pricing — because a preview always out-converts a promise. That's the same interactive craft that has earned my work international recognition, pointed at a single goal: enrollments. See the range in the projects archive, and the interactive DeepSee case study for how far a scroll-driven experience can go.

FAQ

What makes a good edtech website design?

One that shows the learning instead of listing it — an interactive, scroll-driven curriculum, real lesson previews, fast-loading mobile performance, and proof of outcomes surfaced in seconds. The goal is to let a visitor sample the course, because a preview converts far better than a bullet list.

How do you keep a video-heavy course page fast?

Play only one clip at a time, lazy-load previews until they near the viewport, use poster frames, and animate only transform and opacity on swaps — so scrolling stays smooth on the mid-range phones your students actually use.

Can you connect the landing page to an existing LMS or course platform?

Yes. Next.js lets the marketing page stay static/ISR (instant, edge-served) while dynamic pieces — live seat counts, checkout, logged-in progress — talk to your LMS or payment API only where needed.

Is a custom site worth it over a course-platform template?

For hosting the course, a platform is fine. For the landing page that has to out-convert competitors and free alternatives, a custom, interactive build is where the return is — differentiation and conversion are the whole game.

Let's build your course's landing page

If you're an edtech startup, course creator or e-learning platform that needs a landing page that sells the learning, that's exactly what I build as a creative developer.

• See how I work and start a project on the hire page.
• Browse shipped, award-winning work in the projects archive.
• Ready to talk? Let's talk →

---

Written by Hon Tran — creative developer, founder of hontran.dev, and Awwwards jury member. 11+ years building award-winning, performance-first web experiences (GSAP, WebGL, Next.js) for clients worldwide. The first Vietnamese developer to win an international web award. hontran.dev · Behance.