Thiết Kế Website Edtech: Case Study Khóa Học Online

Landing page edtech có một nhiệm vụ khắc nghiệt: biến một người tò mò thành học viên đã ghi danh và trả tiền chỉ trong một lần scroll — trong khi phải cạnh tranh với cả trăm tutorial miễn phí trên YouTube. Bài thiết kế website edtech này mổ xẻ cách tôi dựng landing page khóa học online, e-learning và nền tảng bằng Next.js, GSAP và preview bài học tương tác — những trang cho thấy trải nghiệm học thay vì chỉ liệt kê module, và tạo ra chuyển đổi. Viết bởi chính creative developer làm ra những sản phẩm này cho khách hàng toàn cầu.

Vì sao phần lớn trang khóa học không chuyển đổi

Lướt qua mười website edtech, bạn sẽ thấy cùng một khuôn: một hero, một danh sách bullet "bạn sẽ học gì", một loạt accordion module, tiểu sử giảng viên, bảng giá. Đó là một tờ brochure. Nó kể về khóa học nhưng không bao giờ để bạn cảm được nó — mà cảm mới là thứ chốt đơn. Người xem không phân biệt được khóa của bạn với playlist miễn phí trước khi họ đã kịp thoát.

Tôi đã có hơn 11 năm xây dựng các trải nghiệm web tương tác đạt giải (3× Awwwards Site of the Day, 2 lần được vinh danh Awwwards "Independent of the Year", và một ghế trong ban giám khảo Awwwards) cho khách hàng ở Na Uy, Đan Mạch, Thụy Điển, Malta và nhiều nơi khác. Cùng tay nghề khiến một website sản phẩm "sống" chính là thứ biến một trang khóa học từ brochure thành bản preview — và preview thì chuyển đổi.

Ba ràng buộc định hình mọi dự án edtech tôi nhận:

• Cho thấy, đừng liệt kê. Curriculum nên là một trải nghiệm tương tác, không phải một mục lục.
• Tạo niềm tin trong vài giây. Học viên đánh đổi thời gian và tiền bạc; trang phải chứng minh kết quả thật thật nhanh.
• Nhanh trên điện thoại của học viên. Khán giả của bạn dùng Android tầm trung trên wifi chập chờn — trang phải nhẹ và tức thời, nếu không chuyển đổi chẳng bao giờ bắt đầu.

Tay nghề: curriculum tương tác, không phải accordion

Nước đi có đòn bẩy cao nhất trên một trang khóa học là làm cho curriculum tương tác. Thay vì một accordion tĩnh, hãy pin phần curriculum và để mỗi bài học hé lộ một preview sống — một đoạn code hiện lên có chuyển động, một clip ngắn tắt tiếng, một ảnh before/after — khi học viên scroll. ScrollTrigger của GSAP biến điều này thành một chuỗi pinned, scrub.

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),
    )
  },
})

Khi học viên scroll qua phần đã pin, preview của mỗi bài hiện lên ở bên phải trong khi danh sách bên trái sáng lên. Nó định khung lại toàn bộ lời chào: họ không đọc một đề cương, họ đang nếm thử khóa học. Cơ chế pin và scrub được trình bày chi tiết trong hướng dẫn GSAP ScrollTrigger của tôi.

Video preview bài học mà không làm trang giật

Trang khóa học muốn có video — nhưng một dàn clip bài học tự động phát là cách nhanh nhất khiến điện thoại học viên giật và thoát. Kỷ luật vẫn là thứ tôi dùng trên các website nặng video đạt giải: mỗi lúc chỉ một clip chạy, lazy-load, dùng poster frame cho tới khi cần.

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

function activate(target: HTMLVideoElement) {
  previews.forEach((video) => {
    if (video === target) {
      video.play()
    } else {
      video.pause()          // không bao giờ decode nhiều hơn một clip cùng lúc
      video.currentTime = 0
    }
  })
}

Việc chuyển giữa các preview chỉ chạm transform và opacity, nên scroll vẫn mượt ngay cả khi một clip mới đang decode phía sau. Đó là khác biệt giữa một preview cảm thấy cao cấp và một preview cảm thấy hỏng trên đúng thiết bị mà học viên bạn dùng.

Kết nối LMS mà không chậm đi

Phía sau trang marketing là bộ máy thật: ghi danh, thanh toán, tiến độ, một LMS hay course API. Kiến trúc giữ nó nhanh là sự phân tách tĩnh/động của Next.js:

• Landing page là tĩnh (hoặc ISR). Nội dung marketing, curriculum, testimonial — pre-render, phục vụ tức thời từ edge, revalidate theo lịch để đội ngũ cập nhật mà không cần deploy.
• Phần động vẫn động. Số ghế còn theo thời gian thực, tiến độ của học viên đã đăng nhập, checkout — một React Server Component hoặc route handler nói chuyện với LMS/payment API chỉ ở nơi cần.

// Marketing tĩnh + số ghế cập nhật, không tốn chi phí động cho cả trang
export const revalidate = 300 // ISR: làm mới curriculum mỗi 5 phút

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

Đây là khuôn giữ một trang khóa học vừa nhanh vừa sống — đúng kiến trúc tôi đã dùng trong case study 3D e-commerce DeepSee, nơi một trải nghiệm tương tác nặng vẫn phải tải tức thời. Đánh đổi giữa tĩnh, ISR và động rất đáng hiểu trước khi báo giá; Core Web Vitals cho web nhiều chuyển động nói về cách giữ nhanh khi tải nặng.

Code riêng vs template nền tảng khóa học

	Template nền tảng (Teachable, v.v.)	Code riêng (Next.js + GSAP)
Chuyển động landing	Block chung chung	Tương tác, tinh chỉnh theo brand
Curriculum như preview	Accordion tĩnh	Pinned, scrub, nếm thử được
Hiệu năng mobile	Nặng, theme chung	Nhẹ, code-split, tức thời
Phễu chuyển đổi	Cố định	Đúng luồng của bạn
Khác biệt thương hiệu	Giống mọi người	Không lẫn vào đâu

Template nền tảng khóa học hoàn hảo để host khóa học. Nhưng landing page của bạn — thứ phải vượt chuyển đổi mọi đối thủ và mọi lựa chọn miễn phí — mới là nơi bản dựng riêng đáng đồng tiền. Xem so sánh đầy đủ các hướng đi tại thuê creative developer hay dùng template, Webflow, agency.

Kết quả: một trang bán được sự học

Kết quả tôi nhắm tới trong mọi dự án edtech là một landing page khiến người xem cảm được giá trị khóa học trước khi họ tới bảng giá — vì một bản preview luôn thắng một lời hứa về mặt chuyển đổi. Đó chính là tay nghề tương tác đã mang lại cho tôi những ghi nhận quốc tế, hướng vào một mục tiêu duy nhất: lượt ghi danh. Xem phạm vi trong kho dự án, và case study DeepSee để thấy một trải nghiệm theo scroll có thể đi xa tới đâu.

FAQ

Một thiết kế website edtech tốt gồm những gì?

Một trang cho thấy việc học thay vì liệt kê — curriculum tương tác theo scroll, preview bài học thật, hiệu năng mobile tải nhanh, và bằng chứng kết quả xuất hiện trong vài giây. Mục tiêu là để người xem nếm thử khóa học, vì preview chuyển đổi tốt hơn nhiều so với một danh sách bullet.

Làm sao giữ một trang khóa học nặng video vẫn nhanh?

Mỗi lúc chỉ phát một clip, lazy-load preview cho tới khi gần viewport, dùng poster frame, và chỉ animate transform với opacity khi chuyển — để scroll mượt trên đúng những điện thoại tầm trung học viên dùng.

Bạn có kết nối landing page với LMS hay nền tảng khóa học sẵn có không?

Có. Next.js cho phép trang marketing giữ tĩnh/ISR (tức thời, phục vụ từ edge) trong khi phần động — số ghế theo thời gian thực, checkout, tiến độ đăng nhập — nói chuyện với LMS hay payment API của bạn chỉ ở nơi cần.

Có đáng làm site riêng thay vì template nền tảng khóa học không?

Để host khóa học, một nền tảng là ổn. Với landing page phải vượt chuyển đổi đối thủ và lựa chọn miễn phí, một bản dựng riêng, tương tác mới là nơi có lợi tức — khác biệt và chuyển đổi là toàn bộ cuộc chơi.

Cùng xây landing page cho khóa học của bạn

Nếu bạn là startup edtech, người tạo khóa học hay nền tảng e-learning cần một landing page bán được sự học, đó đúng là thứ tôi xây với vai trò creative developer.

• Xem cách tôi làm việc và bắt đầu dự án tại trang hire.
• Xem các dự án đã ship, đạt giải trong kho dự án.
• Sẵn sàng trao đổi? Cùng trò chuyện →

---

Viết bởi Hon Tran — creative developer, nhà sáng lập hontran.dev, và giám khảo Awwwards. Hơn 11 năm xây dựng các trải nghiệm web đạt giải, ưu tiên hiệu năng (GSAP, WebGL, Next.js) cho khách hàng toàn cầu. Lập trình viên Việt Nam đầu tiên đoạt giải web quốc tế. hontran.dev · Behance.