DOL English Home Pre-login

DomainsDOL EnglishUX2.095 words10 min read

activebyDOL Product Design

Purpose

Vấn đề: Trang chủ DOL English cần giới thiệu nhanh toàn nền tảng để user hiểu được cả hướng học theo khóa, hướng tự học, và các năng lực hệ thống trước khi quyết định hành động.
Đối tượng chính: User mới, phụ huynh, học viên đang cân nhắc giữa học theo khóa và tự học.
Tín hiệu thành công: User hiểu nhanh cấu trúc platform và chọn đúng CTA đầu tiên ngay tại Home.

Reading Rule

Nếu chỉ cần hiểu feature navigation ở mức one-stop, mở ../ENG_Navigation_00_Overview.md trước.
File này chỉ giữ owner detail của Home pre-login và pre-auth discovery behavior.

Shell Fit

Home pre-login là public platform discovery surface của DOL English.
Nó giới thiệu các learning lanes và route user vào program landing, course flow, hoặc feature/module entry; nó không thay owner logic của các lane đó.
Public header của Home chỉ giữ logo + program/discovery entry + auth CTA; các lane sâu hơn phải sống ở body hoặc ở program page layer, không được chen lên thành platform navbar đầy đủ.

Experience Narrative (Ý tưởng tổng quan)

Home pre-login của DOL English là trang giới thiệu tổng ở cấp platform. Mục tiêu chính của trang là giúp user nắm được bức tranh chung trong thời gian ngắn: DOL có thể hỗ trợ học theo lộ trình khóa học, hỗ trợ tự học theo chương trình, và có các lớp quản lý học tập để duy trì tiến độ dài hạn.

Trang này không đi sâu đặc tả chi tiết từng tính năng. Thay vào đó, mỗi nội dung lớn được giới thiệu ở mức đủ hiểu và luôn có CTA rõ để user chuyển sang bước tiếp theo phù hợp với ý định hiện tại. Về bản chất, Home pre-login là lớp trải nghiệm học ở cấp platform, rồi mới dắt user đi sâu vào từng program và từng lane cụ thể.

Elements / Scope

Home page này là entry chính của domain DOL English ở trạng thái chưa đăng nhập.
Self-study app đích: tuhoc.dolenglish.
Element definitions:
- Header: là thanh điều hướng public tối giản gồm logo, program/discovery entry, và đăng nhập/đăng ký; mục đích là định vị platform, cho phép chọn chương trình để khám phá, và cung cấp điểm vào auth ổn định; hoạt động bằng vị trí cố định, CTA account rõ ràng, và không mang full feature nav.
- Hero Unified Platform: là khối định vị tổng cho DOL English; mục đích là trả lời nhanh nền tảng này dành cho ai và có gì khác biệt; hoạt động bằng thông điệp tổng + CTA theo hai hướng chính.
- Course Overview Block: là khối giới thiệu nhanh hướng học theo khóa; mục đích là cho user thấy giá trị của lộ trình có hướng dẫn; hoạt động bằng tóm tắt ngắn + CTA tư vấn/đăng ký.
- Self-study Overview Block: là khối giới thiệu nhanh hướng tự học; mục đích là cho user thấy khả năng tự luyện theo chương trình và skill; hoạt động bằng tóm tắt ngắn + CTA vào chương trình/lane luyện tập.
- Platform Feature Pillars: là cụm giới thiệu ba năng lực lớn Course Management, Learning Management, Vocabulary Notebook; mục đích là làm rõ hệ thống vận hành học tập liên thông; hoạt động bằng mô tả theo khung là gì -> giá trị -> hoạt động -> CTA.
- Learning Loop Narrative: là lớp diễn giải vòng Course -> Learning -> Vocabulary -> Learning; mục đích là giúp user hiểu các năng lực không tách rời nhau; hoạt động bằng narrative ngắn ngay dưới pillars.
- Program Quick Access Board: là bảng vào nhanh 4 chương trình (IELTS, SAT, TOEIC, Tự học giao tiếp); mục đích là giúp user chọn đúng đường học; hoạt động bằng title click vào landing chương trình và lane click vào điểm vào học tương ứng.
- Trust Stack: là cụm value proposition + social proof + partner + faq; mục đích là giảm do dự trước hành động; hoạt động bằng tín hiệu tin cậy theo tầng.
- Footer Links: là các liên kết phụ của hệ sinh thái; mục đích là tránh dead-end cuối trang; hoạt động bằng nhóm link theo chủ đề.

Logic

Home scope rule:
- Trang này là lớp giới thiệu tổng quan platform, không phải tài liệu đặc tả chi tiết feature-level.
Outside-in access rule:
- pre-auth browse được phép cho toàn bộ lớp khám phá (home/program/course/exercise listing).
- auth gate chỉ bật ở attempt start hoặc first persist action.
Unified platform rule:
- Home hiển thị đồng thời hướng khóa học và tự học trong cùng một trải nghiệm.
Program discovery triad rule:
- Ở cấp 1 program, discovery mặc định được đọc theo 3 lát cắt:
  - trải nghiệm học,
  - kho bài tập,
  - khóa học.
- Triad này chỉ bắt đầu sau khi user đã vào 1 program cụ thể.
- Ở tầng platform Home, triad không được sống như global navbar; nó chỉ được surfacing như program-local nav, entry row, hoặc section entry trong program page.
- Trải nghiệm học là lớp giới thiệu chắt lọc của kho + khóa + QLLT + STV trong program đó trước khi user đi sâu hơn.
- Kho bài tập cho phép browse public có tổng quan, rồi mới auth gate ở attempt start hoặc first persist action.
- Khóa học cho phép xem overview/value/features trước khi vào flow tư vấn/đăng ký hoặc auth phù hợp.
Public header rule:
- Header pre-login vẫn cần 1 chỗ chọn program, nhưng control đó chỉ mang nghĩa discovery entry.
- Nó không được giả làm logged-in program context switcher.
- Nó cũng không được kéo thêm Trải nghiệm học / Kho bài tập / Khóa học / QLLT / STV lên thành global nav ngang hàng.
CTA ownership rule:
- CTA khóa học dẫn tới flow tư vấn/đăng ký.
- CTA tự học dẫn tới program landing hoặc public listing/lane tương ứng; chỉ auth khi action thật sự cần quyền cá nhân hóa hoặc lưu dữ liệu.
- CTA từ pillars dẫn tới module tương ứng theo rule browse-first nếu lane public tồn tại, nếu không thì mới dùng auth-first + returnTo.
Entry intent taxonomy:
- Khám phá chương trình,
- Khám phá khóa học,
- Vào nhanh flow tự học.
Pillar contract rule:
- Mỗi pillar phải có đủ là gì -> giá trị -> hoạt động -> CTA.
Program quick access rule:
- Click program title -> canonical program experience landing.
- Click lane -> ưu tiên public lane/listing hợp lệ của program đó; nếu lane chưa có browse public thì mới auth-first + returnTo.
- Entry premium/chưa mở -> permission/upsell/waitlist flow.
Boundary rule:
- Home không thay program landing, không thay exercise bank, không thay dashboard module.

Complex Component Logic (Chi tiet thanh phan phuc tap)

Unified Home Composition

Unified Home Composition là logic trung tâm của Home pre-login: cùng một trang phải truyền đạt đủ ba lớp giá trị mà vẫn dễ đọc.

Cách hoạt động:

Lớp 1: giới thiệu định vị chung của platform.
Lớp 2: giới thiệu hai cách học chính (khóa học, tự học).
Lớp 3: giới thiệu các năng lực hệ thống (CM/LM/VOC) giúp duy trì tiến bộ dài hạn.

Nội dung bắt buộc:

Mỗi lớp đều có CTA rõ ràng.
Copy ưu tiên trả lời câu hỏi “user làm gì tiếp theo”.

Boundary:

Không đẩy quá sâu nội dung chi tiết của từng module vào Home.
Không biến Home thành global feature navbar cho Trải nghiệm học / Kho bài tập / Khóa học; lớp đó chỉ bắt đầu ở trang program.

PQAB là navigation block chiến lược để user vào nhanh chương trình tự học.

Cách hoạt động:

Hiển thị 4 nhóm chương trình ổn định.
Title program dẫn vào program experience landing tương ứng.
Lane entry dẫn vào program-local lane hoặc listing public nếu tồn tại; auth chỉ bật ở action sâu cần quyền cá nhân hóa/lưu dữ liệu.

Nội dung bắt buộc:

IELTS, SAT, TOEIC, Tự học giao tiếp.
Các lane học chính theo từng program.
Đường đọc ở cấp program phải giữ được triad:
- trải nghiệm học,
- kho bài tập,
- khóa học.

Boundary:

Không thay filter/browsing logic của exercise bank.

UI / Behavior

First viewport phải cho thấy ngay đây là nền tảng có cả khóa học và tự học.
Mọi block giới thiệu lớn phải có CTA hành động rõ.
Public header phải ngắn, program-led, và không cạnh tranh với body-level feature reveal.
Nếu user đã đăng nhập mà truy cập route pre-login, hệ thống điều hướng về home post-login.

State model / Edge cases

Anonymous click self-study lane: browse-first nếu lane public tồn tại; chỉ auth ở attempt start, first persist action, hoặc step cần personalization thực sự.
Anonymous click course CTA: đi flow lead/booking (auth tùy step).
Authenticated vào pre-login route: redirect sang post-login home.
Deeplink sai program/lane: fallback về program selector hợp lệ.

Dependencies / Integration

Register: auth + returnTo.
Payment: entitlement và premium routing.
Course Management, Learning Management, Vocabulary Management: module đích từ pillars.
Program Landing và Exercise Bank: tầng điều hướng tiếp theo cho tự học.

Data model / API touchpoints

home_state = pre-login.
platform_pillar_id = course_management | learning_management | vocabulary_notebook.
pillar_intro_structure = what | value | how | cta.
learning_loop_order = course_management > learning_management > vocabulary_notebook > learning_management.
home_entry_type = course_enrollment | self_study_program | self_study_lane | feature_overview.
entry_source = home_hero | course_block | selfstudy_block | platform_pillars | program_quick_access | trust_stack.

Metrics / Analytics

home_prelogin_course_cta_click_rate.
home_prelogin_selfstudy_cta_click_rate.
home_prelogin_pillar_click_rate.
home_prelogin_program_title_click_rate.
home_prelogin_lane_click_rate.
home_prelogin_to_auth_start_rate.
home_prelogin_to_consultation_start_rate.

References

Change log

2026-03-27: Chốt public header = logo + program/discovery entry + auth CTA, làm rõ triad trải nghiệm học / kho bài tập / khóa học chỉ sống ở program page layer, và đổi các rule mơ hồ từ auth-first sang browse-first khi lane public tồn tại.
2026-03-26: Bổ sung Reading Rule để giữ ENG_Navigation_00_Overview.md là file đọc đầu tiên cho navigation; file này chỉ giữ owner detail của Home pre-login.
2026-03-26: Làm rõ Home pre-login như lớp trải nghiệm học ở cấp platform, thêm program discovery triad (trải nghiệm học / kho bài tập / khóa học), và chốt title click của program về canonical program experience landing.
2026-02-18: Bổ sung rõ outside-in access contract (pre-auth browse allowed, auth gate tại attempt start/first persist action) và intent taxonomy ở Home pre-login.
2026-02-14: Thu gọn scope đúng vai trò Home pre-login: giới thiệu platform nhanh, không mở rộng sang tài liệu ngoài Home.
2026-02-14: Giữ mô hình Home unified cho cả khóa học và tự học trong cùng một trang.

DOL English Home Pre-login