DOL English Program Landing - TOEIC Pre-login

DomainsDOL EnglishUX1.867 words9 min read

activebyDOL Product Design

Purpose

Vấn đề: User quan tâm TOEIC cần landing page riêng để hiểu rõ cách tự học trước khi đăng nhập.
Đối tượng chính: Anonymous user (pre-login) muốn tự học TOEIC với lộ trình rõ.
Tín hiệu thành công: Tăng tỷ lệ chuyển từ landing TOEIC 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; trạng thái sau đăng nhập được tách riêng.

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 TOEIC 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 TOEIC này; chúng không phải global navbar của Home public.

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

TOEIC pre-login landing cần biến lợi ích sản phẩm thành trải nghiệm có thể “nhìn thấy trước” bằng demo tương tác. User nên hiểu nhanh rằng hệ thống không chỉ có kho bài mà còn có cơ chế làm bài và chấm bài rõ ràng theo từng nhóm kỹ năng.

Skill Experience Showcase là lớp chính để truyền tải điều đó. User có thể đổi giữa mode làm bài và chấm bài, đồng thời quan sát nội dung tự xoay để nắm nhanh điểm mạnh nền tảng trước khi quyết định đăng nhập.

Tương tự IELTS, showcase TOEIC không mô phỏng đầy đủ màn hình thật mà kể chuyện theo tiến trình học. Tab Làm bài hiển thị trạng thái đã làm xong kèm teaser điểm/gợi ý, từ đó kéo user sang tab Kết quả. Tab Kết quả dùng sub-tab để tách từng năng lực chấm/giải thích/cải thiện giúp user hiểu nhanh mà không bị quá tải.

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à định vị user ở TOEIC landing, 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 Đăng nhập/Đăng ký luôn rõ và switcher hỗ trợ chuyển program.
- Hero TOEIC: là khối giới thiệu mục tiêu điểm và định vị chương trình TOEIC; mục đích là tạo hook ban đầu cho user mới vào trang; hoạt động bằng thông điệp chính trước khi đi vào các khối tương tác.
- Program Quick Matrix: là bảng truy cập nhanh các nhóm nội dung TOEIC; mục đích là cho user thấy trải nghiệm học / kho bài tập / khóa học của TOEIC và đường vào nhanh theo nhu cầ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 theo skill/mode; mục đích là thể hiện trực tiếp trải nghiệm làm bài và chấm bài của TOEIC; hoạt động bằng chuyển skill và mode attempt/scoring, kèm auto-rotate + hover-pause theo contract.
- Trust Badges / Đối tác: là khối chứng thực uy tín; mục đích là củng cố niềm tin về chất lượng nội dung và phương pháp; hoạt động bằng vị trí sau showcase để tăng xác suất chuyển đổi.
- So sánh khác biệt nền tảng: là khối so sánh Luyện TOEIC cũ vs DOL Tự học; mục đích là nêu rõ điểm vượt trội của mô hình học/chấm mới; hoạt động bằng việc tập trung vào khác biệt giá trị, không đi sâu thông số dashboard.
- Social Proof cộng đồng: là khối testimonial và phản hồi học viên; mục đích là tăng bằng chứng xã hội và giảm rủi ro cảm nhận; hoạt động bằng review ngắn có ngữ cảnh kết quả/thay đổi học tập.
- FAQ: là khối câu hỏi thường gặp; mục đích là xử lý băn khoăn cuối trước auth CTA; hoạt động bằng accordion theo các câu hỏi chuyển đổi chính.
- Footer Links: là điều hướng phụ ở cuối trang; mục đích là đảm bảo user luôn có đường đi tiếp phù hợp; hoạt động như fallback điều hướng và không thay flow chính qua CTA chủ đạo.
Skill Experience Showcase cho TOEIC gồm:
- Reading
- Listening
- Writing & Speaking
Showcase architecture (chi tiết):
- Primary tabbar: Làm bài và Kết quả.
- Attempt preview panel: mô phỏng trạng thái đã nộp bài và đáp án đã chọn.
- Result teaser panel (trong tab Làm bài): hiển thị điểm tóm tắt + hint “xem giải thích/leaderboard” để kích thích chuyển tab.
- Result sub-tabbar (chỉ hiện trong tab Kết quả): tách rõ các nhóm năng lực kết quả của TOEIC.
- Feature canvas: đổi theo sub-tab, nhấn vào giá trị học và khả năng cải thiện.
Showcase mode contract:
- showcase_mode = attempt_preview | scoring_preview.
Result sub-tab contract cho TOEIC:
- Điểm theo tiêu chí
- Giải thích chi tiết / Linear Thinking
- Sửa lỗi trọng tâm
- Bài nâng cấp
- Gợi ý từ vựng
- Bảng xếp hạng
Scoring preview capability contract:
- multi-criteria score,
- lỗi chi tiết,
- đề xuất nâng cấp bài,
- gợi ý từ vựng,
- leaderboard/context cộng đồng.
Core value by skill (đúc kết):
- Reading:
  - Giá trị cốt lõi là đọc hiểu đúng và hiểu vì sao đúng/sai.
  - Showcase ưu tiên thể hiện: chấm trắc nghiệm, giải thích chi tiết, Linear Thinking, gợi ý từ vựng mới và leaderboard theo chính xác/tốc độ.
- Listening:
  - Giá trị cốt lõi là nghe đúng ngữ cảnh và cải thiện khả năng suy luận từ audio.
  - Showcase ưu tiên thể hiện: bài nghe dạng conversation, trạng thái đã chọn/đã nộp, điểm teaser, giải thích câu hỏi theo Linear Thinking, gợi ý từ vựng từ bài nghe, hint leaderboard.
- Writing & Speaking:
  - Giá trị cốt lõi là phản hồi chất lượng cao để học viên cải thiện đầu ra chủ động.
  - Showcase ưu tiên thể hiện: chấm đa tiêu chí, sửa lỗi chi tiết, gợi ý nâng cấp, gợi ý từ vựng, và góc nhìn thi đua 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 TOEIC -> CTA chính -> /login hoặc /register -> returnTo -> program gateway TOEIC 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.
Program signal rule:
- showcase phải làm rõ cả phần luyện tập và phần chấm bài trước khi đẩy user sang auth.
Showcase mode rule:
- User chuyển mode attempt_preview/scoring_preview ở từng skill group TOEIC.
Attempt-to-result bridge rule:
- Trong tab Làm bài, luôn có result teaser panel để mời user qua tab Kết quả.
- Click teaser sẽ mở tab Kết quả và focus vào sub-tab liên quan nhất với hint hiện có.
Result sub-tab rule:
- Tab Kết quả dùng sub-tabbar để phân tách năng lực, không dồn toàn bộ thông tin trong một khối.
- Mỗi sub-tab cần CTA rõ để user hiểu điểm vào chi tiết trong app.
Rotation contract:
- skill_rotate_interval = 8s.
- feature_rotate_interval = 4s.
- attempt_to_result_delay = 6s khi user không tương tác.
- 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 TOEIC 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ự.
Fallback rule:
- deeplink sai chương trình quay về Self-study Hub selector.
Post-login note:
- hành vi sau đăng nhập quản lý tại HOME_ENG_Program_TOEIC_Landing_Post_Login.md và HOME_ENG_Home_Navigation_Conversion_Flow.md.

UI / Behavior

Trạng thái hiển thị chính: pre-login với Đăng nhập/Đăng ký ở header.
Program switcher giúp user chuyển nhanh qua IELTS/SAT khi cần so sánh.
Skill showcase cho phép user xem nhanh sự khác nhau giữa phần làm bài và phần chấm bài, đồng thời thấy rõ từng năng lực qua sub-tab trong tab Kết quả.
Tab Làm bài mặc định ở trạng thái đã làm xong và hiển thị teaser điểm/gợi ý cải thiện.
Tab Kết quả hiển thị sub-tabbar để tăng tính minh bạch và khả năng khám phá nhanh.
CTA vào app luôn giữ returnTo để không rơi khỏi luồng TOEIC.
Không dùng CTA cá nhân hóa dạng Tiếp tục học trong landing pre-login.

Data model / API touchpoints

showcase_mode = attempt_preview | scoring_preview.
showcase_primary_tab = attempt_preview | scoring_preview.
showcase_result_feature (TOEIC):
- multi_criteria_score
- linear_thinking_explanation
- error_feedback
- upgrade_version
- vocabulary_suggestion
- leaderboard_context
rotation_contract:
- skill_interval_seconds = 8
- feature_interval_seconds = 4
- attempt_to_result_delay_seconds = 6
- pause_scope = skill_selector | feature_showcase
entry_source từ showcase:
- quick_access | assigned_challenge | recommendation.

References

Change log

2026-02-08: Nâng cấp Skill Experience Showcase TOEIC với kiến trúc 2 tầng tab, result teaser, và result sub-tabbar.
2026-02-08: Bổ sung core value theo nhóm Reading, Listening, Writing & Speaking cho TOEIC.
2026-02-08: Thêm contract attempt_to_result_delay và showcase_result_feature cho TOEIC pre-login.
2026-02-08: Làm rõ Elements / Scope theo format Là gì / Mục đích / Hoạt động cho từng block landing TOEIC pre-login.
2026-02-07: Thêm section Skill Experience Showcase cho TOEIC với mode attempt_preview/scoring_preview.
2026-02-07: Chốt interaction contract auto-rotate 8s/4s và hover pause behavior.
2026-02-07: Bổ sung scoring preview capability contract cho TOEIC pre-login landing.