DOL English Program Landing - IELTS Pre-login

DomainsDOL EnglishUX2.144 words11 min read

activebyDOL Product Design

Purpose

Vấn đề: User đang tìm hiểu IELTS cần một landing page rõ giá trị trước khi quyết định đăng nhập và vào app.
Đối tượng chính: Anonymous user (pre-login) quan tâm tự học IELTS theo lộ trình có cấu trúc.
Tín hiệu thành công: Tăng tỷ lệ chuyển từ landing IELTS 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 IELTS 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)

IELTS pre-login landing không chỉ giới thiệu chương trình mà còn cần cho user “thấy trước” cách họ sẽ học và cách họ sẽ được chấm bài. Mục tiêu là rút ngắn khoảng cách giữa lời giới thiệu và trải nghiệm sản phẩm thực tế.

Vì vậy trang có Skill Experience Showcase như một lớp demo tương tác theo skill, nhưng không tái hiện 1:1 toàn bộ UI thật trong diện tích nhỏ. Thay vào đó, showcase dùng cách kể chuyện theo trạng thái học: user thấy một bài đã làm xong ở tab Làm bài, đồng thời nhìn thấy ngay một vùng gợi mở điểm số + gợi ý cải thiện để được dẫn sang tab Kết quả.

Khi qua tab Kết quả, user không bị dồn toàn bộ tính năng vào một khối duy nhất. Showcase chuyển sang cấu trúc 2 tầng: tab chính (Làm bài, Kết quả) và sub-tab tính năng bên dưới tab Kết quả để minh bạch các năng lực nổi bật như chấm đa tiêu chí, sửa lỗi chi tiết, bài nâng cấp, gợi ý từ vựng và leaderboard cộng đồng. Cách này giúp user hiểu breadth của sản phẩm nhanh hơn mà không cần xem UI đầy đủ của trang thậ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 vị user đang ở landing IELTS, cho phép đổi sang program khác để so sánh, và không chen thêm full feature nav vào public header; hoạt động bằng Đăng nhập/Đăng ký luôn sẵn và switcher cho phép chuyển program để so sánh.
- Hero IELTS: là khối mở đầu nêu thông điệp mục tiêu band và lợi ích chính; mục đích là tạo động lực ban đầu và chốt ngữ cảnh IELTS ngay khi vào trang; hoạt động bằng headline + key signal trước khi user đi xuống các khối sâu hơn.
- Program Quick Matrix: là bảng truy cập nhanh các entry group chính trong IELTS; mục đích là cho user thấy ngay trải nghiệm học / kho bài tập / khóa học và đường vào nhanh theo nhu cầu; hoạt động bằng click từng mục để vào lane public phù hợp trước, rồi mới auth ở action sâu khi cần.
- Skill Experience Showcase: là khu demo tương tác theo skill và mode; mục đích là giúp user “thử bằng mắt” cả phần làm bài và phần chấm bài trước khi đăng nhập; hoạt động bằng đổi skill + đổi mode attempt/scoring, kèm auto-rotate, hover-pause, vùng gợi mở từ làm bài sang kết quả, và sub-tab tính năng ở tab kết quả.
- Trust Badges / Đối tác: là khối chứng thực từ đơn vị/nguồn uy tín; mục đích là củng cố niềm tin vào chất lượng chương trình; hoạt động bằng việc đặt sau phần trải nghiệm lõi để tăng xác tín quyết định.
- So sánh khác biệt nền tảng: là khối đối chiếu Luyện IELTS cũ vs DOL Tự học; mục đích là làm rõ lợi thế sản phẩm theo ngôn ngữ so sánh trực quan; hoạt động bằng việc tập trung vào khác biệt quy trình học/chấm/feedback, không sa vào UI chi tiết.
- Social Proof cộng đồng: là khối đánh giá, feedback học viên; mục đích là tăng tín nhiệm xã hội trước CTA chuyển đổi; hoạt động dưới dạng testimonial/review, nhấn hiệu quả học và trải nghiệm thực tế.
- FAQ: là khối giải đáp câu hỏi thường gặp; mục đích là gỡ các rào cản cuối trước khi auth; hoạt động bằng accordion ngắn trả lời trực tiếp chi phí/chương trình/cách học.
- Footer Links: là điều hướng phụ và thông tin cuối trang; mục đích là đảm bảo trang có lối thoát rõ và không dead-end; hoạt động bằng các link hệ thống/điều khoản/chương trình liên quan.
Skill Experience Showcase cho IELTS gồm 4 skill:
- 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 đã làm xong một bài, có lựa chọn đáp án đã chọn hoặc bài viết đã nộp.
- Result teaser panel (bên phải trong tab Làm bài): hiển thị điểm tóm tắt + 1-2 gợi ý cải thiện để kích thích user bấm sang Kết quả.
- Result sub-tabbar (chỉ hiện khi ở tab Kết quả): liệt kê rõ từng năng lực kết quả theo skill để user chuyển nhanh.
- Feature canvas: vùng nội dung chính thay đổi theo sub-tab được chọn, ưu tiên nêu giá trị và kết quả quan sát được.
Showcase mode contract:
- showcase_mode = attempt_preview | scoring_preview.
Result sub-tab contract cho Writing/Speaking:
- Điểm đa tiêu chí
- Sửa lỗi chi tiết
- 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,
- bài nâng cấp/đề xuất cải thiện,
- gợi ý từ vựng,
- leaderboard/context cộng đồng liên quan.
Core value by skill (đúc kết từ tính năng thật):
- Writing:
  - Giá trị cốt lõi là chấm sâu và chuyển hóa thành hành động cải thiện, không chỉ trả band.
  - Showcase ưu tiên thể hiện: chấm đa tiêu chí, sửa lỗi theo ngữ cảnh, viết bài nâng cấp, gợi ý từ vựng, bảng xếp hạng.
- Speaking:
  - Giá trị cốt lõi là phản hồi phát âm-ngữ pháp-nội dung ở mức có thể luyện lại ngay.
  - Showcase ưu tiên thể hiện: điểm theo tiêu chí, sửa lỗi chi tiết kèm hướng cải thiện, chấm phát âm từng từ, phát hiện lỗi ngữ pháp, bài nói nâng cấp, gợi ý từ vựng từ bài nói, bài mẫu điểm cao từ cộng đồng.
- Reading:
  - Giá trị cốt lõi là đúng nhanh và hiểu sâu lý do đúng/sai.
  - Showcase ưu tiên thể hiện: bài trắc nghiệm theo đoạn đọc, chấm điểm kèm giải thích chi tiết, phương pháp Linear Thinking, hướng dẫn đọc hiểu logic/hiệu quả, gợi ý từ vựng lưu về sổ từ vựng, leaderboard theo độ chính xác và tốc độ.
- Listening:
  - Giá trị cốt lõi là nghe-hiểu-chốt đáp án với giải thích rõ ràng.
  - Showcase ưu tiên thể hiện: bài nghe dạng audio/conversation, trạng thái đã chọn đáp án và đã nộp, điểm tóm tắt ở teaser panel, giải thích từng câu theo Linear Thinking, gợi ý từ vựng từ bài nghe, hint leaderboard thi đua.
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 để đổi chương trình.

Logic

State rule: landing này được đặc tả ở anonymous (pre-login).
Conversion rule: Landing IELTS -> 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 giữa attempt_preview và scoring_preview ở từng skill.
Attempt-to-result bridge rule:
- Trong tab Làm bài, luôn có result teaser panel để mời user chuyển sang tab Kết quả.
- Click vào teaser sẽ tự động mở tab Kết quả và focus vào sub-tab liên quan nhất với gợi ý.
Result sub-tab rule:
- Tab Kết quả dùng sub-tabbar để tách các năng lực chính thay vì dồn mọi thông tin vào một màn.
- Mỗi sub-tab phải có CTA rõ để user hiểu nếu vào app thì sẽ xem được chi tiết ở đâu.
Rotation contract:
- skill_rotate_interval = 8s.
- feature_rotate_interval = 4s.
- attempt_to_result_delay = 6s khi user không tương tác.
- Hover vào skill selector thì dừng rotate skill, feature vẫn rotate.
- Hover vào feature showcase thì dừng rotate feature.
Preview-to-action rule:
- từ showcase hoặc quick matrix, CTA ưu tiên đi vào lane public hoặc listing public của IELTS 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 chương trình fallback về Self-study Hub selector.
Post-login note:
- hành vi sau đăng nhập quản lý tại HOME_ENG_Program_IELTS_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 CTA Đăng nhập/Đăng ký ở header.
Program switcher cho phép user chuyển nhanh giữa IELTS, SAT, TOEIC.
Skill showcase ưu tiên cho phép user “đọc nhanh và chạm nhanh” vào hai mode làm bài/chấm bài, đồng thời hiểu rõ các năng lực chi tiết qua sub-tab ở tab kết quả.
Tab Làm bài mặc định hiển thị trạng thái đã làm xong; vùng bên phải hiển thị điểm tóm tắt + gợi ý cải thiện để tạo tò mò chuyển tab.
Tab Kết quả hiển thị sub-tabbar tính năng để minh bạch “học viên được gì” thay vì gom chung mọi thứ trong một khung.
CTA từ showcase và CTA chính đều giữ returnTo để tránh rơi flow.
Không dùng CTA cá nhân hóa như 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 (IELTS):
- multi_criteria_score
- 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 cho click từ showcase về auth/module:
- quick_access | assigned_challenge | recommendation.

References

Change log

2026-02-08: Nâng cấp Skill Experience Showcase với kiến trúc 2 tầng tab (Làm bài/Kết quả + result sub-tabbar) và cầu nối result teaser từ tab làm bài.
2026-02-08: Bổ sung core value theo từng skill (Reading, Listening, Writing, Speaking) dựa trên bộ tính năng thực tế.
2026-02-08: Thêm contract attempt_to_result_delay và showcase_result_feature để chuẩn hóa hành vi auto-chuyển và minh bạch năng lực kết quả.
2026-02-08: Làm rõ Elements / Scope theo format Là gì / Mục đích / Hoạt động cho từng block landing IELTS pre-login.
2026-02-07: Thêm section Skill Experience Showcase cho 4 skill IELTS với mode attempt_preview/scoring_preview.
2026-02-07: Chốt interaction contract auto-rotate 8s/4s và hover pause behavior cho showcase.
2026-02-07: Bổ sung scoring preview capability contract (multi-criteria score, lỗi chi tiết, bài nâng cấp, vocab gợi ý, leaderboard context).