EduplaX - Website
Tổng quan
Trang Homepage và hệ thống Marketplace của EduplaX được thiết kế như cánh cổng đầu tiên chào đón người dùng bước vào thế giới học tập trực tuyến đa trải nghiệm. Giao diện homepage truyền cảm hứng học tập thông qua các thông điệp ngắn gọn, CTA rõ ràng như “Tìm hiểu thêm” hay “Trải nghiệm ngay”, dẫn thẳng người dùng đến kho khóa học phong phú tại marketplace.
Marketplace hoạt động như một nền tảng học trực tuyến hiện đại, nơi người học có thể duyệt qua các khóa học theo lĩnh vực, cấp độ, mức độ phổ biến hoặc chủ đề gợi ý. Các khóa học đều có trang chi tiết riêng: hiển thị nội dung bài giảng, thông tin giảng viên, đánh giá, liên kết thương mại và chính sách học thử. Người dùng có thể lựa chọn nhà phân phối, áp mã giảm giá và thanh toán ngay trong nền tảng.
Toàn bộ luồng sử dụng – từ khám phá khóa học, đăng ký, đến thanh toán – được tối ưu theo hướng đơn giản, rõ ràng và thân thiện với người dùng mới. Đây là nền móng cho định hướng “học mọi lúc, học mọi nơi” mà EduplaX đang xây dựng.
Ngày bắt đầu
12 thg 6, 2022
Khách hàng
EduplaX (WeAI)
Bối cảnh dự án
EduplaX là một nền tảng học tập đa chức năng, phục vụ nhiều nhóm đối tượng:
Học viên cần lộ trình rõ ràng, nội dung sinh động, khả năng theo dõi tiến độ dễ dàng.
Giảng viên cần công cụ quản lý bài giảng, tương tác và đánh giá hiệu quả.
Admin cần quản trị học viên, khóa học, doanh thu và thống kê.
Cái khó của dự án này không phải là thiết kế đẹp (đương nhiên vẫn phải phù hợp với thẩm mỹ đa số), mà là thiết kế đủ thông minh để dẫn dắt người dùng học – thay vì khiến họ “lạc giữa mê cung giao diện”.
Hành trình thiết kế EduplaX – Từ rối rắm đến “Ồ, hóa ra dùng học online cũng dễ”
Chapter 01. Đôi lúc, làm design không bắt đầu từ Figma
Mình bước vào dự án EduplaX với một đống file Notion, 3 cuộc họp kickoff và một đống vai trò: học sinh – giáo viên – quản trị viên – đơn vị hợp tác nội dung. Ai cũng cần một “hệ thống” riêng.
Và điều mình nhận ra là: mọi người đang bị “lạc”, vì không ai biết bắt đầu từ đâu. Thế là mình ngừng mở Figma và bắt đầu mở... Zalo. Mình nhắn từng người, gọi từng nhóm nhỏ, xin phỏng vấn nhanh để hiểu:
Họ vào đây để làm gì, và tại sao lại... chưa làm được?
💡 Key takeout 1: Insight đến từ việc hỏi đúng chứ không nhất thiết phải dùng thuật ngữ UX đao to búa lớn.
Những insight mình thu được từ giảng viên:
“Chị dạy online nhưng cảm thấy như đang vật lộn với cái hệ thống không phải dành cho người dạy này ấy.”
1. “Soạn bài đã mệt, tạo quiz còn mệt hơn”
“Chị chỉ muốn tạo vài câu hỏi trắc nghiệm mà phải click 5 bước mới xong. Mày có thấy giáo viên nào cầm phấn rồi phải làm 4 việc khác xong mới ra đề được không?”
=> Giao diện cần tối giản thao tác, ưu tiên keyboard + batch input, drag-drop trực quan.
2. “Không biết học viên đang ở đâu, làm gì”
=> Dashboard lớp học nên cung cấp tracking rõ ràng, có thể lọc theo học viên, chương, tiến độ học.
Những insight mình thu được từ người học:
1. “Vào Homepage là chị... bị loạn”
"Có nhiều khóa học, gợi ý, danh mục quá, chị không biết nên bắt đầu từ đâu!"
=> Thiết kế cần hướng dẫn rõ ràng, ưu tiên khóa đang học, roadmap rõ nét, đề xuất cá nhân hóa.
2. “Phần bài học không có cảm giác 'đã học xong'”
“Học xong một video mà chẳng rõ mình vừa hoàn thành bao nhiêu % khóa hay còn phần nào.”
=> Cần đánh dấu bài đã học, tích lũy điểm, cảm giác “level up” nhẹ nhàng.
3. “Không ai nhắc anh là anh lặn luôn”
=> Cần hệ thống notification / nhắc lịch học / theo dõi tiến độ đơn giản nhưng hiệu quả.
Những insight mình thu được từ Quản trị viên:
1. “Giao diện admin như bản Excel biết đi”
“Muốn lọc theo khóa học, theo giảng viên, theo lượt học mà phải đi lòng vòng.”
=> Admin dashboard cần cấu trúc rõ ràng, bảng điều khiển thông minh, có biểu đồ, lọc nâng cao, và báo cáo 1 chạm.
2. “Chị không có thời gian training cho admin mới”
=> Giao diện cần đủ trực quan để “người mới vào là dùng được ngay”, không cần học cách dùng hệ thống.
Desk Research
Bên cạnh phỏng vấn người thật, mình còn khảo sát thêm từ các nguồn:
Các nền tảng học lớn như: Coursera, Udemy, Kyna, Edumall
Báo cáo thị trường Edtech tại Việt Nam (2020 - 2021)
Phản hồi người dùng trên App Store / Google Play của các app học trực tuyến
Một số điểm mình note được:
Nền tảng | Điểm mạnh UX | Điểm cần học hỏi |
|---|---|---|
Udemy | Giao diện học sạch, điều hướng nhanh | Quá tải nội dung phụ trợ gây nhiễu |
Coursera | Learning path rõ ràng, có đánh giá peer-to-peer | Yêu cầu đăng nhập mới xem nội dung |
Kyna | Có hệ thống bài quiz sau mỗi chương | UI khá cũ, nhiều icon không rõ nghĩa |
Kết luận giai đoạn nghiên cứu
Người học không cần app “đầy đủ tính năng” – họ cần nền tảng “ít rào cản”.
Sự tối giản có định hướng, tính cá nhân hoá trải nghiệm học và giao diện cực dễ dùng cho giảng viên là 3 nguyên tắc cốt lõi mà mình rút ra để đưa vào thiết kế EduplaX.
Homepage: định hướng như bản đồ học tập.
Phần học: tối ưu tập trung + theo dõi tiến độ.
Tạo câu hỏi: đơn giản hóa thao tác, tránh "mệt" cho giáo viên.
Admin dashboard: thông minh, dễ lọc, trực quan.
Chapter 02. Vẽ Homepage cũng như dựng bản đồ
Homepage đầu tiên có đủ mọi thứ, nhưng thiếu thứ người dùng cần. Thế là mình xé nó ra, coi nó như một cái bản đồ khởi hành, mỗi “tuyến” là một hành trình:
Tuyến Học sinh → kiểm tra năng lực → học thử → theo dõi tiến độ
Tuyến Giáo viên → tạo bài → chấm điểm → nhìn thấy lớp học của mình sống động
Tuyến Admin → tổng quan → lọc báo cáo → xuất dữ liệu
Tuyến Biên tập viên nội dung → phối hợp → gửi nội dung → xuất bản
Mỗi tuyến được thể hiện bằng block riêng, button riêng, giọng văn riêng.
Mình không muốn ai phải “bấm đoán” khi vào trang.
💡 Key takeout 2: Đừng làm một homepage “đẹp đều” cho tất cả. Hãy làm một trang mà mỗi người đều thấy “có chỗ dành riêng cho tôi”.
Chapter 03. "Kêu gọi hành động" chứ không "ép buộc hành động"
Đây là trang mình gọi vui là “trang nắn gân” vì nó không phải nơi để học, không để test, cũng chẳng phải nơi có biểu đồ, nhưng lại là nơi gợi mở về cả một hành trình học tập thông minh phía sau.
Mình thiết kế trang này như một bản “pitch” nhẹ nhàng, thay vì liệt kê chức năng kiểu: “Chúng tôi có bài test, có AI, có đánh giá năng lực...”, thì mọi thành phần ở đây đều kể một câu chuyện nhỏ. Bạn học xong bài, hệ thống sẽ tự động đánh giá & gợi ý lộ trình. Bạn không biết bắt đầu từ đâu, chúng tôi cá nhân hóa bài học từ điểm xuất phát. Bạn học không theo khung, không sao, dữ liệu của bạn vẫn được theo dõi để update lộ trình hằng tuần.
Bên dưới mỗi khối nội dung đều có một nút CTA: “Trải nghiệm ngay”, và điều mình làm là khiến nút đó thật thân thiện. Vì thực chất, user vẫn chưa được học hay kiểm tra gì ở trang này cả, đây là phần dẫn nhập và mình muốn họ bấm nút ấy vì họ thấy tò mò chứ không phải bị ép.
Có những nút bấm không cần hiệu ứng hover lạ lẫm, chỉ cần đúng tâm trạng tò mò của user.
Chapter 04. Tạo component không phải để dev dễ, mà để team không mệt
Khi bắt đầu làm hệ component, mình hơi mệt vì thấy chẳng có gì đặc biệt. Nhưng rồi sau 3 vòng dev back-and-forth, mình mới thấm:
Một component tái sử dụng tốt là thứ cứu mình khỏi phải “gồng” mỗi khi client đổi yêu cầu.
Mình xây toàn bộ hệ thống theo Atomic Design, gắn luôn guideline spacing – state – font – interaction. Nhờ đó, khi team mở file, không có câu hỏi “dùng cái nào”, mà là “bóp nhỏ hay scale lớn?”
💡 Key takeout 4: Làm design system đàng hoàng là đang đầu tư vào sức khỏe tinh thần cho chính mình ở vòng revision 4 trở đi.
Chapter 05. Cái UI “hiểu user” mới là cái UI được user nhớ đến
Khi nhìn lại Homepage cuối cùng, mình thấy nó không quá hoành tráng. Không hiệu ứng 3D, không animation lộng lẫy. Nhưng giáo viên dùng được ngay, học sinh không phải hỏi và Admin cũng không cần training.
Và lúc đó mình nghĩ:
À, đây mới là giao diện đẹp: giao diện mà người ta dùng xong rồi mới nhận ra là nó đã giúp họ nhẹ nhõm thế nào.
💡 Key takeout 5: Thiết kế tốt không nằm ở cái “wow” ban đầu mà ở cái “ồ, may mà nó làm như này” sau khi dùng.
Chương 06. Đặt chân vào "khu chợ học"
Một người học luôn bắt đầu với một câu hỏi trong đầu:
“Liệu nền tảng này có phù hợp với mình không?”
Thế nên khi mình thiết kế Homepage của EduplaX, mình không muốn nói quá nhiều mà chỉ muốn cho người dùng một cảm giác đúng ngay từ cái nhìn đầu tiên. Vậy nên mình chọn mở đầu bằng một câu chào nhẹ nhàng:
“Nền tảng chuyển đổi số dành cho giáo dục”
và các CTA rõ ràng như “Trải nghiệm ngay”, “Tìm hiểu thêm” được gắn ở nhiều khối khác nhau.
Từ đây, chỉ cần một cú nhấp chuột, người dùng sẽ được dẫn đến một không gian khác. Không còn là trang giới thiệu mà là trang Marketplace. Khi mở trang Marketplace, người dùng như vừa được mở cửa bước vào thư viện hiện đại, đầy sách, ánh sáng và không ai làm phiền.
Mình thiết kế màn này theo tiêu chí “Thân thiện như Tiki, gọn gàng như Coursera”:
Giao diện nổi bật theo chuyên đề: Toán – Khoa học – Mỹ thuật…
Có phần “Khóa học dành cho bạn” cá nhân hóa nhẹ nhàng.
Cho phép xem nội dung khóa học trước khi đăng nhập là tính năng rất quan trọng để giảm rào cản hành động.
💡 Người học chưa chắc mua ngay, nhưng họ đang được cho phép tìm hiểu mà không bị ép buộc, và điều đó tạo ra cảm giác an tâm.
Chapter 07. Click vào một khóa học, thấy gì?
Giả sử người dùng chọn khóa "Career Essentials", họ sẽ được dẫn tới một trang chi tiết khóa học với thông tin trình bày gãy gọn gồm: mục tiêu, nội dung, giảng viên, lựa chọn mua từ các gian hàng ở các sàn TMĐT như Tiki – Shopee – Lazada.
Tại đây mình tạo ra nhịp thông tin:
Trên cùng: Thông tin ngắn gọn + CTA “Tham gia ngay”
Giữa trang: Preview nội dung bài giảng, số lượng quiz, practice
Cuối trang: Giới thiệu giảng viên + khóa học liên quan
Chapter 08. Đăng ký học liền, sẽ không thấy "phiền"
Người học bấm “Tham gia ngay” → Dẫn tới checkout page.
Mình thiết kế trang này theo tiêu chí: thủ tục nhanh, rõ, minh bạch.
Thông tin mua & học viên tách riêng, nhưng có thể “tick trùng”
Giao diện sạch sẽ, không quảng cáo xen ngang
Đa dạng phương thức thanh toán, đặc biệt là tích hợp sẵn VNPay.
Tổng kết dự án
Với EduplaX, mình không chỉ thiết kế một trang Homepage đơn thuần, mà là tạo ra một hành trình liền mạch từ nhận diện đến hành động – từ khi người dùng bắt gặp nền tảng lần đầu, cho đến lúc họ thực sự bắt đầu học.
💡 Tư duy thiết kế khởi đầu từ một câu hỏi:
"Làm sao để người học cảm thấy thoải mái, chủ động và được thấu hiểu ngay từ điểm chạm đầu tiên?"
Từ câu hỏi ấy, Homepage được xây dựng với cấu trúc gợi mở, trực quan:
Giới thiệu khéo léo hệ sinh thái giáo dục đa tầng (học sinh – giáo viên – tổ chức)
Sử dụng hình ảnh tích cực, màu sắc sống động, CTA rõ ràng
Chuyển mượt về các nhánh chức năng như đánh giá năng lực, học tập sáng tạo, hay tư vấn triển khai
Và khi người dùng nhấn “Trải nghiệm ngay”, hành trình không dừng lại – mà tiếp tục mở ra tại Marketplace.
📌 Marketplace là nơi học viên được tự chọn, tự xem, tự tin bắt đầu. Mình thiết kế marketplace như một "gian hàng tri thức", nơi khóa học được chia theo chủ đề dễ tiếp cận, nội dung được xem thử mà không cần đăng nhập và giao diện học liệu đơn giản, rõ ràng, tránh cảm giác “quá tải”.
Dự án EduplaX là dự án giúp mình trưởng thành hơn trong giai đoạn mới bước vào con đường thiết kế UI/UX. Trong thiết kế cho giáo dục, sự “thân thiện” đôi khi còn quan trọng hơn cả sự “ấn tượng”. Bởi khi người ta cảm thấy họ được hiểu thì họ sẽ ở lại và bắt đầu.
EduplaX - Website
Tổng quan
Trang Homepage và hệ thống Marketplace của EduplaX được thiết kế như cánh cổng đầu tiên chào đón người dùng bước vào thế giới học tập trực tuyến đa trải nghiệm. Giao diện homepage truyền cảm hứng học tập thông qua các thông điệp ngắn gọn, CTA rõ ràng như “Tìm hiểu thêm” hay “Trải nghiệm ngay”, dẫn thẳng người dùng đến kho khóa học phong phú tại marketplace.
Marketplace hoạt động như một nền tảng học trực tuyến hiện đại, nơi người học có thể duyệt qua các khóa học theo lĩnh vực, cấp độ, mức độ phổ biến hoặc chủ đề gợi ý. Các khóa học đều có trang chi tiết riêng: hiển thị nội dung bài giảng, thông tin giảng viên, đánh giá, liên kết thương mại và chính sách học thử. Người dùng có thể lựa chọn nhà phân phối, áp mã giảm giá và thanh toán ngay trong nền tảng.
Toàn bộ luồng sử dụng – từ khám phá khóa học, đăng ký, đến thanh toán – được tối ưu theo hướng đơn giản, rõ ràng và thân thiện với người dùng mới. Đây là nền móng cho định hướng “học mọi lúc, học mọi nơi” mà EduplaX đang xây dựng.
Ngày bắt đầu
12 thg 6, 2022
Khách hàng
EduplaX (WeAI)
Bối cảnh dự án
EduplaX là một nền tảng học tập đa chức năng, phục vụ nhiều nhóm đối tượng:
Học viên cần lộ trình rõ ràng, nội dung sinh động, khả năng theo dõi tiến độ dễ dàng.
Giảng viên cần công cụ quản lý bài giảng, tương tác và đánh giá hiệu quả.
Admin cần quản trị học viên, khóa học, doanh thu và thống kê.
Cái khó của dự án này không phải là thiết kế đẹp (đương nhiên vẫn phải phù hợp với thẩm mỹ đa số), mà là thiết kế đủ thông minh để dẫn dắt người dùng học – thay vì khiến họ “lạc giữa mê cung giao diện”.
Hành trình thiết kế EduplaX – Từ rối rắm đến “Ồ, hóa ra dùng học online cũng dễ”
Chapter 01. Đôi lúc, làm design không bắt đầu từ Figma
Mình bước vào dự án EduplaX với một đống file Notion, 3 cuộc họp kickoff và một đống vai trò: học sinh – giáo viên – quản trị viên – đơn vị hợp tác nội dung. Ai cũng cần một “hệ thống” riêng.
Và điều mình nhận ra là: mọi người đang bị “lạc”, vì không ai biết bắt đầu từ đâu. Thế là mình ngừng mở Figma và bắt đầu mở... Zalo. Mình nhắn từng người, gọi từng nhóm nhỏ, xin phỏng vấn nhanh để hiểu:
Họ vào đây để làm gì, và tại sao lại... chưa làm được?
💡 Key takeout 1: Insight đến từ việc hỏi đúng chứ không nhất thiết phải dùng thuật ngữ UX đao to búa lớn.
Những insight mình thu được từ giảng viên:
“Chị dạy online nhưng cảm thấy như đang vật lộn với cái hệ thống không phải dành cho người dạy này ấy.”
1. “Soạn bài đã mệt, tạo quiz còn mệt hơn”
“Chị chỉ muốn tạo vài câu hỏi trắc nghiệm mà phải click 5 bước mới xong. Mày có thấy giáo viên nào cầm phấn rồi phải làm 4 việc khác xong mới ra đề được không?”
=> Giao diện cần tối giản thao tác, ưu tiên keyboard + batch input, drag-drop trực quan.
2. “Không biết học viên đang ở đâu, làm gì”
=> Dashboard lớp học nên cung cấp tracking rõ ràng, có thể lọc theo học viên, chương, tiến độ học.
Những insight mình thu được từ người học:
1. “Vào Homepage là chị... bị loạn”
"Có nhiều khóa học, gợi ý, danh mục quá, chị không biết nên bắt đầu từ đâu!"
=> Thiết kế cần hướng dẫn rõ ràng, ưu tiên khóa đang học, roadmap rõ nét, đề xuất cá nhân hóa.
2. “Phần bài học không có cảm giác 'đã học xong'”
“Học xong một video mà chẳng rõ mình vừa hoàn thành bao nhiêu % khóa hay còn phần nào.”
=> Cần đánh dấu bài đã học, tích lũy điểm, cảm giác “level up” nhẹ nhàng.
3. “Không ai nhắc anh là anh lặn luôn”
=> Cần hệ thống notification / nhắc lịch học / theo dõi tiến độ đơn giản nhưng hiệu quả.
Những insight mình thu được từ Quản trị viên:
1. “Giao diện admin như bản Excel biết đi”
“Muốn lọc theo khóa học, theo giảng viên, theo lượt học mà phải đi lòng vòng.”
=> Admin dashboard cần cấu trúc rõ ràng, bảng điều khiển thông minh, có biểu đồ, lọc nâng cao, và báo cáo 1 chạm.
2. “Chị không có thời gian training cho admin mới”
=> Giao diện cần đủ trực quan để “người mới vào là dùng được ngay”, không cần học cách dùng hệ thống.
Desk Research
Bên cạnh phỏng vấn người thật, mình còn khảo sát thêm từ các nguồn:
Các nền tảng học lớn như: Coursera, Udemy, Kyna, Edumall
Báo cáo thị trường Edtech tại Việt Nam (2020 - 2021)
Phản hồi người dùng trên App Store / Google Play của các app học trực tuyến
Một số điểm mình note được:
Nền tảng | Điểm mạnh UX | Điểm cần học hỏi |
|---|---|---|
Udemy | Giao diện học sạch, điều hướng nhanh | Quá tải nội dung phụ trợ gây nhiễu |
Coursera | Learning path rõ ràng, có đánh giá peer-to-peer | Yêu cầu đăng nhập mới xem nội dung |
Kyna | Có hệ thống bài quiz sau mỗi chương | UI khá cũ, nhiều icon không rõ nghĩa |
Kết luận giai đoạn nghiên cứu
Người học không cần app “đầy đủ tính năng” – họ cần nền tảng “ít rào cản”.
Sự tối giản có định hướng, tính cá nhân hoá trải nghiệm học và giao diện cực dễ dùng cho giảng viên là 3 nguyên tắc cốt lõi mà mình rút ra để đưa vào thiết kế EduplaX.
Homepage: định hướng như bản đồ học tập.
Phần học: tối ưu tập trung + theo dõi tiến độ.
Tạo câu hỏi: đơn giản hóa thao tác, tránh "mệt" cho giáo viên.
Admin dashboard: thông minh, dễ lọc, trực quan.
Chapter 02. Vẽ Homepage cũng như dựng bản đồ
Homepage đầu tiên có đủ mọi thứ, nhưng thiếu thứ người dùng cần. Thế là mình xé nó ra, coi nó như một cái bản đồ khởi hành, mỗi “tuyến” là một hành trình:
Tuyến Học sinh → kiểm tra năng lực → học thử → theo dõi tiến độ
Tuyến Giáo viên → tạo bài → chấm điểm → nhìn thấy lớp học của mình sống động
Tuyến Admin → tổng quan → lọc báo cáo → xuất dữ liệu
Tuyến Biên tập viên nội dung → phối hợp → gửi nội dung → xuất bản
Mỗi tuyến được thể hiện bằng block riêng, button riêng, giọng văn riêng.
Mình không muốn ai phải “bấm đoán” khi vào trang.
💡 Key takeout 2: Đừng làm một homepage “đẹp đều” cho tất cả. Hãy làm một trang mà mỗi người đều thấy “có chỗ dành riêng cho tôi”.
Chapter 03. "Kêu gọi hành động" chứ không "ép buộc hành động"
Đây là trang mình gọi vui là “trang nắn gân” vì nó không phải nơi để học, không để test, cũng chẳng phải nơi có biểu đồ, nhưng lại là nơi gợi mở về cả một hành trình học tập thông minh phía sau.
Mình thiết kế trang này như một bản “pitch” nhẹ nhàng, thay vì liệt kê chức năng kiểu: “Chúng tôi có bài test, có AI, có đánh giá năng lực...”, thì mọi thành phần ở đây đều kể một câu chuyện nhỏ. Bạn học xong bài, hệ thống sẽ tự động đánh giá & gợi ý lộ trình. Bạn không biết bắt đầu từ đâu, chúng tôi cá nhân hóa bài học từ điểm xuất phát. Bạn học không theo khung, không sao, dữ liệu của bạn vẫn được theo dõi để update lộ trình hằng tuần.
Bên dưới mỗi khối nội dung đều có một nút CTA: “Trải nghiệm ngay”, và điều mình làm là khiến nút đó thật thân thiện. Vì thực chất, user vẫn chưa được học hay kiểm tra gì ở trang này cả, đây là phần dẫn nhập và mình muốn họ bấm nút ấy vì họ thấy tò mò chứ không phải bị ép.
Có những nút bấm không cần hiệu ứng hover lạ lẫm, chỉ cần đúng tâm trạng tò mò của user.
Chapter 04. Tạo component không phải để dev dễ, mà để team không mệt
Khi bắt đầu làm hệ component, mình hơi mệt vì thấy chẳng có gì đặc biệt. Nhưng rồi sau 3 vòng dev back-and-forth, mình mới thấm:
Một component tái sử dụng tốt là thứ cứu mình khỏi phải “gồng” mỗi khi client đổi yêu cầu.
Mình xây toàn bộ hệ thống theo Atomic Design, gắn luôn guideline spacing – state – font – interaction. Nhờ đó, khi team mở file, không có câu hỏi “dùng cái nào”, mà là “bóp nhỏ hay scale lớn?”
💡 Key takeout 4: Làm design system đàng hoàng là đang đầu tư vào sức khỏe tinh thần cho chính mình ở vòng revision 4 trở đi.
Chapter 05. Cái UI “hiểu user” mới là cái UI được user nhớ đến
Khi nhìn lại Homepage cuối cùng, mình thấy nó không quá hoành tráng. Không hiệu ứng 3D, không animation lộng lẫy. Nhưng giáo viên dùng được ngay, học sinh không phải hỏi và Admin cũng không cần training.
Và lúc đó mình nghĩ:
À, đây mới là giao diện đẹp: giao diện mà người ta dùng xong rồi mới nhận ra là nó đã giúp họ nhẹ nhõm thế nào.
💡 Key takeout 5: Thiết kế tốt không nằm ở cái “wow” ban đầu mà ở cái “ồ, may mà nó làm như này” sau khi dùng.
Chương 06. Đặt chân vào "khu chợ học"
Một người học luôn bắt đầu với một câu hỏi trong đầu:
“Liệu nền tảng này có phù hợp với mình không?”
Thế nên khi mình thiết kế Homepage của EduplaX, mình không muốn nói quá nhiều mà chỉ muốn cho người dùng một cảm giác đúng ngay từ cái nhìn đầu tiên. Vậy nên mình chọn mở đầu bằng một câu chào nhẹ nhàng:
“Nền tảng chuyển đổi số dành cho giáo dục”
và các CTA rõ ràng như “Trải nghiệm ngay”, “Tìm hiểu thêm” được gắn ở nhiều khối khác nhau.
Từ đây, chỉ cần một cú nhấp chuột, người dùng sẽ được dẫn đến một không gian khác. Không còn là trang giới thiệu mà là trang Marketplace. Khi mở trang Marketplace, người dùng như vừa được mở cửa bước vào thư viện hiện đại, đầy sách, ánh sáng và không ai làm phiền.
Mình thiết kế màn này theo tiêu chí “Thân thiện như Tiki, gọn gàng như Coursera”:
Giao diện nổi bật theo chuyên đề: Toán – Khoa học – Mỹ thuật…
Có phần “Khóa học dành cho bạn” cá nhân hóa nhẹ nhàng.
Cho phép xem nội dung khóa học trước khi đăng nhập là tính năng rất quan trọng để giảm rào cản hành động.
💡 Người học chưa chắc mua ngay, nhưng họ đang được cho phép tìm hiểu mà không bị ép buộc, và điều đó tạo ra cảm giác an tâm.
Chapter 07. Click vào một khóa học, thấy gì?
Giả sử người dùng chọn khóa "Career Essentials", họ sẽ được dẫn tới một trang chi tiết khóa học với thông tin trình bày gãy gọn gồm: mục tiêu, nội dung, giảng viên, lựa chọn mua từ các gian hàng ở các sàn TMĐT như Tiki – Shopee – Lazada.
Tại đây mình tạo ra nhịp thông tin:
Trên cùng: Thông tin ngắn gọn + CTA “Tham gia ngay”
Giữa trang: Preview nội dung bài giảng, số lượng quiz, practice
Cuối trang: Giới thiệu giảng viên + khóa học liên quan
Chapter 08. Đăng ký học liền, sẽ không thấy "phiền"
Người học bấm “Tham gia ngay” → Dẫn tới checkout page.
Mình thiết kế trang này theo tiêu chí: thủ tục nhanh, rõ, minh bạch.
Thông tin mua & học viên tách riêng, nhưng có thể “tick trùng”
Giao diện sạch sẽ, không quảng cáo xen ngang
Đa dạng phương thức thanh toán, đặc biệt là tích hợp sẵn VNPay.
Tổng kết dự án
Với EduplaX, mình không chỉ thiết kế một trang Homepage đơn thuần, mà là tạo ra một hành trình liền mạch từ nhận diện đến hành động – từ khi người dùng bắt gặp nền tảng lần đầu, cho đến lúc họ thực sự bắt đầu học.
💡 Tư duy thiết kế khởi đầu từ một câu hỏi:
"Làm sao để người học cảm thấy thoải mái, chủ động và được thấu hiểu ngay từ điểm chạm đầu tiên?"
Từ câu hỏi ấy, Homepage được xây dựng với cấu trúc gợi mở, trực quan:
Giới thiệu khéo léo hệ sinh thái giáo dục đa tầng (học sinh – giáo viên – tổ chức)
Sử dụng hình ảnh tích cực, màu sắc sống động, CTA rõ ràng
Chuyển mượt về các nhánh chức năng như đánh giá năng lực, học tập sáng tạo, hay tư vấn triển khai
Và khi người dùng nhấn “Trải nghiệm ngay”, hành trình không dừng lại – mà tiếp tục mở ra tại Marketplace.
📌 Marketplace là nơi học viên được tự chọn, tự xem, tự tin bắt đầu. Mình thiết kế marketplace như một "gian hàng tri thức", nơi khóa học được chia theo chủ đề dễ tiếp cận, nội dung được xem thử mà không cần đăng nhập và giao diện học liệu đơn giản, rõ ràng, tránh cảm giác “quá tải”.
Dự án EduplaX là dự án giúp mình trưởng thành hơn trong giai đoạn mới bước vào con đường thiết kế UI/UX. Trong thiết kế cho giáo dục, sự “thân thiện” đôi khi còn quan trọng hơn cả sự “ấn tượng”. Bởi khi người ta cảm thấy họ được hiểu thì họ sẽ ở lại và bắt đầu.
EduplaX - Website
Tổng quan
Trang Homepage và hệ thống Marketplace của EduplaX được thiết kế như cánh cổng đầu tiên chào đón người dùng bước vào thế giới học tập trực tuyến đa trải nghiệm. Giao diện homepage truyền cảm hứng học tập thông qua các thông điệp ngắn gọn, CTA rõ ràng như “Tìm hiểu thêm” hay “Trải nghiệm ngay”, dẫn thẳng người dùng đến kho khóa học phong phú tại marketplace.
Marketplace hoạt động như một nền tảng học trực tuyến hiện đại, nơi người học có thể duyệt qua các khóa học theo lĩnh vực, cấp độ, mức độ phổ biến hoặc chủ đề gợi ý. Các khóa học đều có trang chi tiết riêng: hiển thị nội dung bài giảng, thông tin giảng viên, đánh giá, liên kết thương mại và chính sách học thử. Người dùng có thể lựa chọn nhà phân phối, áp mã giảm giá và thanh toán ngay trong nền tảng.
Toàn bộ luồng sử dụng – từ khám phá khóa học, đăng ký, đến thanh toán – được tối ưu theo hướng đơn giản, rõ ràng và thân thiện với người dùng mới. Đây là nền móng cho định hướng “học mọi lúc, học mọi nơi” mà EduplaX đang xây dựng.
Ngày bắt đầu
12 thg 6, 2022
Khách hàng
EduplaX (WeAI)
Bối cảnh dự án
EduplaX là một nền tảng học tập đa chức năng, phục vụ nhiều nhóm đối tượng:
Học viên cần lộ trình rõ ràng, nội dung sinh động, khả năng theo dõi tiến độ dễ dàng.
Giảng viên cần công cụ quản lý bài giảng, tương tác và đánh giá hiệu quả.
Admin cần quản trị học viên, khóa học, doanh thu và thống kê.
Cái khó của dự án này không phải là thiết kế đẹp (đương nhiên vẫn phải phù hợp với thẩm mỹ đa số), mà là thiết kế đủ thông minh để dẫn dắt người dùng học – thay vì khiến họ “lạc giữa mê cung giao diện”.
Hành trình thiết kế EduplaX – Từ rối rắm đến “Ồ, hóa ra dùng học online cũng dễ”
Chapter 01. Đôi lúc, làm design không bắt đầu từ Figma
Mình bước vào dự án EduplaX với một đống file Notion, 3 cuộc họp kickoff và một đống vai trò: học sinh – giáo viên – quản trị viên – đơn vị hợp tác nội dung. Ai cũng cần một “hệ thống” riêng.
Và điều mình nhận ra là: mọi người đang bị “lạc”, vì không ai biết bắt đầu từ đâu. Thế là mình ngừng mở Figma và bắt đầu mở... Zalo. Mình nhắn từng người, gọi từng nhóm nhỏ, xin phỏng vấn nhanh để hiểu:
Họ vào đây để làm gì, và tại sao lại... chưa làm được?
💡 Key takeout 1: Insight đến từ việc hỏi đúng chứ không nhất thiết phải dùng thuật ngữ UX đao to búa lớn.
Những insight mình thu được từ giảng viên:
“Chị dạy online nhưng cảm thấy như đang vật lộn với cái hệ thống không phải dành cho người dạy này ấy.”
1. “Soạn bài đã mệt, tạo quiz còn mệt hơn”
“Chị chỉ muốn tạo vài câu hỏi trắc nghiệm mà phải click 5 bước mới xong. Mày có thấy giáo viên nào cầm phấn rồi phải làm 4 việc khác xong mới ra đề được không?”
=> Giao diện cần tối giản thao tác, ưu tiên keyboard + batch input, drag-drop trực quan.
2. “Không biết học viên đang ở đâu, làm gì”
=> Dashboard lớp học nên cung cấp tracking rõ ràng, có thể lọc theo học viên, chương, tiến độ học.
Những insight mình thu được từ người học:
1. “Vào Homepage là chị... bị loạn”
"Có nhiều khóa học, gợi ý, danh mục quá, chị không biết nên bắt đầu từ đâu!"
=> Thiết kế cần hướng dẫn rõ ràng, ưu tiên khóa đang học, roadmap rõ nét, đề xuất cá nhân hóa.
2. “Phần bài học không có cảm giác 'đã học xong'”
“Học xong một video mà chẳng rõ mình vừa hoàn thành bao nhiêu % khóa hay còn phần nào.”
=> Cần đánh dấu bài đã học, tích lũy điểm, cảm giác “level up” nhẹ nhàng.
3. “Không ai nhắc anh là anh lặn luôn”
=> Cần hệ thống notification / nhắc lịch học / theo dõi tiến độ đơn giản nhưng hiệu quả.
Những insight mình thu được từ Quản trị viên:
1. “Giao diện admin như bản Excel biết đi”
“Muốn lọc theo khóa học, theo giảng viên, theo lượt học mà phải đi lòng vòng.”
=> Admin dashboard cần cấu trúc rõ ràng, bảng điều khiển thông minh, có biểu đồ, lọc nâng cao, và báo cáo 1 chạm.
2. “Chị không có thời gian training cho admin mới”
=> Giao diện cần đủ trực quan để “người mới vào là dùng được ngay”, không cần học cách dùng hệ thống.
Desk Research
Bên cạnh phỏng vấn người thật, mình còn khảo sát thêm từ các nguồn:
Các nền tảng học lớn như: Coursera, Udemy, Kyna, Edumall
Báo cáo thị trường Edtech tại Việt Nam (2020 - 2021)
Phản hồi người dùng trên App Store / Google Play của các app học trực tuyến
Một số điểm mình note được:
Nền tảng | Điểm mạnh UX | Điểm cần học hỏi |
|---|---|---|
Udemy | Giao diện học sạch, điều hướng nhanh | Quá tải nội dung phụ trợ gây nhiễu |
Coursera | Learning path rõ ràng, có đánh giá peer-to-peer | Yêu cầu đăng nhập mới xem nội dung |
Kyna | Có hệ thống bài quiz sau mỗi chương | UI khá cũ, nhiều icon không rõ nghĩa |
Kết luận giai đoạn nghiên cứu
Người học không cần app “đầy đủ tính năng” – họ cần nền tảng “ít rào cản”.
Sự tối giản có định hướng, tính cá nhân hoá trải nghiệm học và giao diện cực dễ dùng cho giảng viên là 3 nguyên tắc cốt lõi mà mình rút ra để đưa vào thiết kế EduplaX.
Homepage: định hướng như bản đồ học tập.
Phần học: tối ưu tập trung + theo dõi tiến độ.
Tạo câu hỏi: đơn giản hóa thao tác, tránh "mệt" cho giáo viên.
Admin dashboard: thông minh, dễ lọc, trực quan.
Chapter 02. Vẽ Homepage cũng như dựng bản đồ
Homepage đầu tiên có đủ mọi thứ, nhưng thiếu thứ người dùng cần. Thế là mình xé nó ra, coi nó như một cái bản đồ khởi hành, mỗi “tuyến” là một hành trình:
Tuyến Học sinh → kiểm tra năng lực → học thử → theo dõi tiến độ
Tuyến Giáo viên → tạo bài → chấm điểm → nhìn thấy lớp học của mình sống động
Tuyến Admin → tổng quan → lọc báo cáo → xuất dữ liệu
Tuyến Biên tập viên nội dung → phối hợp → gửi nội dung → xuất bản
Mỗi tuyến được thể hiện bằng block riêng, button riêng, giọng văn riêng.
Mình không muốn ai phải “bấm đoán” khi vào trang.
💡 Key takeout 2: Đừng làm một homepage “đẹp đều” cho tất cả. Hãy làm một trang mà mỗi người đều thấy “có chỗ dành riêng cho tôi”.
Chapter 03. "Kêu gọi hành động" chứ không "ép buộc hành động"
Đây là trang mình gọi vui là “trang nắn gân” vì nó không phải nơi để học, không để test, cũng chẳng phải nơi có biểu đồ, nhưng lại là nơi gợi mở về cả một hành trình học tập thông minh phía sau.
Mình thiết kế trang này như một bản “pitch” nhẹ nhàng, thay vì liệt kê chức năng kiểu: “Chúng tôi có bài test, có AI, có đánh giá năng lực...”, thì mọi thành phần ở đây đều kể một câu chuyện nhỏ. Bạn học xong bài, hệ thống sẽ tự động đánh giá & gợi ý lộ trình. Bạn không biết bắt đầu từ đâu, chúng tôi cá nhân hóa bài học từ điểm xuất phát. Bạn học không theo khung, không sao, dữ liệu của bạn vẫn được theo dõi để update lộ trình hằng tuần.
Bên dưới mỗi khối nội dung đều có một nút CTA: “Trải nghiệm ngay”, và điều mình làm là khiến nút đó thật thân thiện. Vì thực chất, user vẫn chưa được học hay kiểm tra gì ở trang này cả, đây là phần dẫn nhập và mình muốn họ bấm nút ấy vì họ thấy tò mò chứ không phải bị ép.
Có những nút bấm không cần hiệu ứng hover lạ lẫm, chỉ cần đúng tâm trạng tò mò của user.
Chapter 04. Tạo component không phải để dev dễ, mà để team không mệt
Khi bắt đầu làm hệ component, mình hơi mệt vì thấy chẳng có gì đặc biệt. Nhưng rồi sau 3 vòng dev back-and-forth, mình mới thấm:
Một component tái sử dụng tốt là thứ cứu mình khỏi phải “gồng” mỗi khi client đổi yêu cầu.
Mình xây toàn bộ hệ thống theo Atomic Design, gắn luôn guideline spacing – state – font – interaction. Nhờ đó, khi team mở file, không có câu hỏi “dùng cái nào”, mà là “bóp nhỏ hay scale lớn?”
💡 Key takeout 4: Làm design system đàng hoàng là đang đầu tư vào sức khỏe tinh thần cho chính mình ở vòng revision 4 trở đi.
Chapter 05. Cái UI “hiểu user” mới là cái UI được user nhớ đến
Khi nhìn lại Homepage cuối cùng, mình thấy nó không quá hoành tráng. Không hiệu ứng 3D, không animation lộng lẫy. Nhưng giáo viên dùng được ngay, học sinh không phải hỏi và Admin cũng không cần training.
Và lúc đó mình nghĩ:
À, đây mới là giao diện đẹp: giao diện mà người ta dùng xong rồi mới nhận ra là nó đã giúp họ nhẹ nhõm thế nào.
💡 Key takeout 5: Thiết kế tốt không nằm ở cái “wow” ban đầu mà ở cái “ồ, may mà nó làm như này” sau khi dùng.
Chương 06. Đặt chân vào "khu chợ học"
Một người học luôn bắt đầu với một câu hỏi trong đầu:
“Liệu nền tảng này có phù hợp với mình không?”
Thế nên khi mình thiết kế Homepage của EduplaX, mình không muốn nói quá nhiều mà chỉ muốn cho người dùng một cảm giác đúng ngay từ cái nhìn đầu tiên. Vậy nên mình chọn mở đầu bằng một câu chào nhẹ nhàng:
“Nền tảng chuyển đổi số dành cho giáo dục”
và các CTA rõ ràng như “Trải nghiệm ngay”, “Tìm hiểu thêm” được gắn ở nhiều khối khác nhau.
Từ đây, chỉ cần một cú nhấp chuột, người dùng sẽ được dẫn đến một không gian khác. Không còn là trang giới thiệu mà là trang Marketplace. Khi mở trang Marketplace, người dùng như vừa được mở cửa bước vào thư viện hiện đại, đầy sách, ánh sáng và không ai làm phiền.
Mình thiết kế màn này theo tiêu chí “Thân thiện như Tiki, gọn gàng như Coursera”:
Giao diện nổi bật theo chuyên đề: Toán – Khoa học – Mỹ thuật…
Có phần “Khóa học dành cho bạn” cá nhân hóa nhẹ nhàng.
Cho phép xem nội dung khóa học trước khi đăng nhập là tính năng rất quan trọng để giảm rào cản hành động.
💡 Người học chưa chắc mua ngay, nhưng họ đang được cho phép tìm hiểu mà không bị ép buộc, và điều đó tạo ra cảm giác an tâm.
Chapter 07. Click vào một khóa học, thấy gì?
Giả sử người dùng chọn khóa "Career Essentials", họ sẽ được dẫn tới một trang chi tiết khóa học với thông tin trình bày gãy gọn gồm: mục tiêu, nội dung, giảng viên, lựa chọn mua từ các gian hàng ở các sàn TMĐT như Tiki – Shopee – Lazada.
Tại đây mình tạo ra nhịp thông tin:
Trên cùng: Thông tin ngắn gọn + CTA “Tham gia ngay”
Giữa trang: Preview nội dung bài giảng, số lượng quiz, practice
Cuối trang: Giới thiệu giảng viên + khóa học liên quan
Chapter 08. Đăng ký học liền, sẽ không thấy "phiền"
Người học bấm “Tham gia ngay” → Dẫn tới checkout page.
Mình thiết kế trang này theo tiêu chí: thủ tục nhanh, rõ, minh bạch.
Thông tin mua & học viên tách riêng, nhưng có thể “tick trùng”
Giao diện sạch sẽ, không quảng cáo xen ngang
Đa dạng phương thức thanh toán, đặc biệt là tích hợp sẵn VNPay.
Tổng kết dự án
Với EduplaX, mình không chỉ thiết kế một trang Homepage đơn thuần, mà là tạo ra một hành trình liền mạch từ nhận diện đến hành động – từ khi người dùng bắt gặp nền tảng lần đầu, cho đến lúc họ thực sự bắt đầu học.
💡 Tư duy thiết kế khởi đầu từ một câu hỏi:
"Làm sao để người học cảm thấy thoải mái, chủ động và được thấu hiểu ngay từ điểm chạm đầu tiên?"
Từ câu hỏi ấy, Homepage được xây dựng với cấu trúc gợi mở, trực quan:
Giới thiệu khéo léo hệ sinh thái giáo dục đa tầng (học sinh – giáo viên – tổ chức)
Sử dụng hình ảnh tích cực, màu sắc sống động, CTA rõ ràng
Chuyển mượt về các nhánh chức năng như đánh giá năng lực, học tập sáng tạo, hay tư vấn triển khai
Và khi người dùng nhấn “Trải nghiệm ngay”, hành trình không dừng lại – mà tiếp tục mở ra tại Marketplace.
📌 Marketplace là nơi học viên được tự chọn, tự xem, tự tin bắt đầu. Mình thiết kế marketplace như một "gian hàng tri thức", nơi khóa học được chia theo chủ đề dễ tiếp cận, nội dung được xem thử mà không cần đăng nhập và giao diện học liệu đơn giản, rõ ràng, tránh cảm giác “quá tải”.
Dự án EduplaX là dự án giúp mình trưởng thành hơn trong giai đoạn mới bước vào con đường thiết kế UI/UX. Trong thiết kế cho giáo dục, sự “thân thiện” đôi khi còn quan trọng hơn cả sự “ấn tượng”. Bởi khi người ta cảm thấy họ được hiểu thì họ sẽ ở lại và bắt đầu.
