DOL English Program Landing - Tu hoc Giao tiep Pre-login

DomainsDOL EnglishUX1.179 words6 min read

activebyDOL Product Design

Purpose

Vấn đề: User muốn cải thiện tiếng Anh giao tiếp cần landing riêng để hiểu rõ cách tự học trước khi vào app.
Đối tượng chính: Anonymous user có nhu cầu luyện giao tiếp thực tế theo lộ trình linh hoạt.
Tín hiệu thành công: Tăng tỷ lệ chuyển từ landing Tự học giao tiếp sang auth và vào đúng điểm học trong tuhoc.dolenglish.
Contract trạng thái: File này chỉ đặc tả pre-login.

Reading Rule

Nếu cần current truth của pre-login navigation, mở ../HOME_ENG_Home_Pre_Login.md và ../HOME_ENG_Home_Information_Architecture.md trước.
File này chỉ giữ owner detail của program landing Tự học giao tiếp pre-login.

Shell Fit

Đây là program-level pre-login discovery surface.
Public header ở tầng này chỉ giữ logo + program selector/discovery entry + auth CTA.
Trải nghiệm học / Kho bài tập / Khóa học là các entry group của chính trang program này; chúng không phải global navbar của Home public.

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

Landing Tự học giao tiếp pre-login cần thể hiện rõ năng lực thực chiến: user có thể luyện cả 4 skill theo ngữ cảnh giao tiếp, nhận chấm bài và nhận phản hồi nâng cấp để tiến bộ đều. Trọng tâm không phải mô tả chung chung, mà là cho user thấy trước trải nghiệm học và trải nghiệm chấm bài.

Skill Experience Showcase vì vậy là block cốt lõi của trang. User có thể chuyển giữa mode làm bài và chấm bài, xem nhanh các nhóm tính năng nổi bật và hiểu vì sao nền tảng phù hợp với nhu cầu giao tiếp thực tế.

Elements / Scope

Element definitions:
- Header chương trình: là thanh đầu trang với logo, program selector/discovery entry, và auth CTA; mục đích là giữ nhận diện program giao tiếp, cho phép đổi sang program khác để so sánh, và không chen full feature nav vào public header; hoạt động bằng cho phép đăng nhập ngay hoặc đổi sang program khác để so sánh.
- Hero giao tiếp: là khối mở đầu nêu định vị học giao tiếp thực tế; mục đích là chốt bối cảnh sử dụng và lợi ích chính trước các phần sâu hơn; hoạt động bằng thông điệp định hướng theo nhu cầu học thực chiến.
- Program Quick Matrix / Entry Points: là bảng entry nhanh tới nhóm nội dung giao tiếp; mục đích là giúp user thấy ngay trải nghiệm học / kho bài tập / khóa học của program này và loại bài có thể bắt đầu; hoạt động bằng click entry vào lane public phù hợp trước, rồi mới auth ở action sâu khi cần.
- Skill Experience Showcase: là khối demo tương tác 4 skill trong ngữ cảnh giao tiếp; mục đích là cho user hiểu rõ mô hình “làm bài + chấm bài” trước khi đăng nhập; hoạt động bằng đổi skill và mode attempt/scoring, có auto-rotate và hover-pause theo contract chung.
- Trust / Social Proof: là khối chứng thực từ người học/cộng đồng; mục đích là tăng độ tin cậy cho chương trình giao tiếp; hoạt động bằng phản hồi thực tế để giảm do dự trước CTA chuyển đổi.
- FAQ: là khối câu hỏi thường gặp; mục đích là gỡ các băn khoăn còn lại trước khi vào app; hoạt động bằng accordion tập trung vào cách học và giá trị sử dụng.
- Footer Links: là điều hướng phụ cuối trang; mục đích là tránh dead-end và hỗ trợ khám phá thêm; hoạt động bằng link tới các mục hệ thống/chương trình liên quan khi user cần.
Skill Experience Showcase cho Tự học giao tiếp gồm:
- Reading
- Listening
- Writing
- Speaking
Showcase mode contract:
- showcase_mode = attempt_preview | scoring_preview.
Scoring preview capability contract:
- multi-criteria score,
- lỗi chi tiết,
- bài nâng cấp,
- gợi ý từ vựng,
- leaderboard/context cộng đồng.
CTA trong phạm vi tài liệu:
- CTA chính: Bắt đầu học/Vào lộ trình (auth gate).
- CTA phụ: quay lại Self-study Hub.

Logic

State rule: landing này được đặc tả ở anonymous (pre-login).
Conversion rule: Landing Communication -> CTA chính -> /login hoặc /register -> returnTo -> program gateway trong tuhoc.dolenglish.
Program triad rule:
- Trang này phải surfacing rõ 3 entry group:
  - trải nghiệm học,
  - kho bài tập,
  - khóa học.
- Triad này là program-local navigation layer; nó không được yêu cầu xuất hiện như global navbar ở Home public.
Showcase mode rule:
- User có thể đổi mode attempt_preview/scoring_preview cho từng skill.
Rotation contract:
- skill_rotate_interval = 8s.
- feature_rotate_interval = 4s.
- Hover skill selector dừng rotate skill, feature vẫn rotate.
- Hover feature showcase dừng rotate feature.
Preview-to-action rule:
- CTA từ showcase hoặc quick matrix ưu tiên đi vào lane public hoặc listing public của program giao tiếp nếu lane đó đã tồn tại.
- auth gate chỉ bật ở attempt start, first persist action, hoặc step cần personalization thực sự.
Program guard rule:
- deeplink sai context fallback về Self-study Hub selector.
Post-login note:
- post-login landing riêng cho Communication chưa mở trong vòng này; flow sau login tuân theo HOME_ENG_Home_Navigation_Conversion_Flow.md.

UI / Behavior

Trạng thái chính là pre-login với CTA Đăng nhập/Đăng ký luôn sẵn.
Skill showcase phải giúp user nhận biết nhanh khác biệt giữa “làm bài” và “chấm bài”.
CTA từ showcase và CTA chính đều giữ returnTo để đảm bảo continuity sau auth.
Không đưa CTA cá nhân hóa post-login trong landing này.

Data model / API touchpoints

showcase_mode = attempt_preview | scoring_preview.
rotation_contract:
- skill_interval_seconds = 8
- feature_interval_seconds = 4
- pause_scope = skill_selector | feature_showcase
entry_source từ showcase:
- quick_access | assigned_challenge | recommendation.

References

Change log

2026-02-08: Làm rõ Elements / Scope theo format Là gì / Mục đích / Hoạt động cho từng block landing Tự học giao tiếp pre-login.
2026-02-07: Nâng cấp landing Tự học giao tiếp từ high-level sang contract pre-login đầy đủ.
2026-02-07: Thêm section Skill Experience Showcase cho 4 skill với mode attempt_preview/scoring_preview.
2026-02-07: Chốt interaction contract auto-rotate 8s/4s và hover pause behavior.