DOL English Home & Discovery - Concept Pack

DOL English - Concept Pack (from Screen Inventory)

Reading Rule

• Nếu câu hỏi là navigation canon, shell model, hoặc owner boundary của DOL English, đọc ../../../ENG_Navigation_00_Overview.md trước.
• File này chỉ là concept pack để triển khai screen inventory của Home & Discovery, không phải feature-master của navigation.
• Với pre-login, canon hiện hành là: public header chỉ giữ logo + program/discovery entry + auth CTA; triad Trải nghiệm học / Kho bài tập / Khóa học chỉ bắt đầu ở program page layer; ưu tiên browse-first nếu lane public tồn tại.

Purpose

• Chuyển HOME_ENG_Screen_Inventory.md thành concept có thể triển khai tuần tự trong docs-only pipeline.
• Giữ đúng phương pháp Content Spec -> IA Skeleton -> Style Lock -> UI Execution -> Audit.
• Ưu tiên UX-flow hiệu quả, UI ở mức vừa đủ để explore idea.

Source Inputs

• Inventory: HOME_ENG_Screen_Inventory.md
• Business docs: HOME_ENG_Detailed_Baseline.md, HOME_ENG_Home_Information_Architecture.md, HOME_ENG_Home_Navigation_Conversion_Flow.md
• State docs: HOME_ENG_Home_Pre_Login.md, HOME_ENG_Home_Post_Login.md (archived - post-login shell logic superseded by ENG_Navigation_Shell_Contracts.md, DEC-0096)

Concept Map (Inventory -> Concept Blocks)

Concept Block	Inventory IDs	Priority	Deliverable
C1 - Unified Home Hub	ENG-S01, ENG-S02	P0	Pre/Post home concepts + CTA hierarchy
C2 - Discover Menu Popover	ENG-S03	P0	Multi-column explore popover with clear landing links
C3 - Program Landing System	ENG-S04, ENG-S05, ENG-S06, ENG-S07, ENG-S08	P0	Shared concept template + per-program adaptation
C4 - Exercise Bank Access Gate	ENG-S09, ENG-S24	P0	Auth-first guest gate with returnTo and fallbacks
C5 - Module Entry Layer	ENG-S28, ENG-S29, ENG-S30	P0	Home feature-master concept for CM/LM/VOC
C6 - Auth & Placeholder Guardrails	ENG-S31, ENG-S33	P0	Cross-flow guest fallback and context preservation
C7 - PRA Handoff Surfaces	ENG-S25, ENG-S26, ENG-S27	P1	Attempt/result handoff concept from Home area perspective
C8 - Permission/Upsell states	ENG-S32	P1	Entitlement guard concept (premium/live entries)

---

C1 - Unified Home Hub (ENG-S01, ENG-S02)

Content Spec

• User state:
  • Pre-login: user mới đang cân nhắc giữa khóa học và tự học.
  • Post-login: user cần vào học nhanh theo đúng context.
• Primary intent:
  • Pre-login: chọn đúng lane hành động đầu tiên.
  • Post-login: giảm thời gian đến first learning action.
• Core value (3):
  1. Một home thống nhất cho cả khóa học + tự học.
  2. Điều hướng rõ sang chương trình, module và kho bài.
  3. Luôn giữ mạch context khi auth/deeplink/fallback.
• Proof blocks:
  • Program quick access.
  • Compact snapshot CM/LM/VOC.
  • Trust + community nudges.
• Primary CTA:
  • Pre-login: vào lane tự học hoặc tư vấn khóa học.
  • Post-login: Tiếp tục học.
• Fallback CTA:
  • Khám phá chương trình / Mở module phù hợp.

IA Skeleton

1. Hero định vị platform.
2. Lane selection (course / self-study).
3. Platform features (CM/LM/VOC) với CTA rõ.
4. Program quick access board.
5. Proof/trust/community.
6. Final action strip.

Style Lock

• Chosen style: Editorial SaaS.
• Visual intent: rõ lane quyết định, đọc nhanh trong 10 giây.
• Anti-goal: tránh biến thành dashboard dày số liệu hoặc card lồng card.
• Color/elevation constraints: nền trắng, neutral text đậm, 1 accent chính theo action.

UI Execution Notes

• Route canonical: /dol-english; alias /dol-english/home cùng content.
• 2 state pre/post phải dùng cùng IA khung, khác trọng số nội dung.
• Không để post-login quay về cấu trúc pre-login dài dòng.

Audit Target

• Information clarity: 2
• Visual hierarchy: 2
• Conversion clarity: 2
• Style consistency: 2
• Readability/responsive: 2
• Target score: >= 9/10

---

C2 - Discover Menu Popover (ENG-S03)

Content Spec

• User state: pre + post login.
• Primary intent: vào đúng landing chương trình hoặc lane luyện tập trong 1 click.
• Core value:
  1. Không cần lướt Home vẫn vào đúng route.
  2. Tách rõ program title vs lane entry.
  3. Có fallback an toàn khi route sai.
• Proof blocks:
  • Cột chương trình.
  • Cột lane luyện tập.
  • Khu khóa học/feature link.
• Primary CTA: click program title.
• Fallback CTA: quay về Home hoặc program landing hợp lệ.

IA Skeleton

1. Cột chọn program.
2. Khu lane actions theo program đang chọn.
3. Khu links phụ (khóa học, feature).
4. Footer nudge hoặc quick help.

Style Lock

• Chosen style: Premium Minimal.
• Visual intent: gọn, rõ cấu trúc điều hướng, không nhiễu.
• Anti-goal: icon-heavy và nhồi quá nhiều badge.

UI Execution Notes

• Click title lớn (vd Tự học IELTS) luôn tới program landing canonical.
• Click lane luyện tập ưu tiên đi vào public lane/listing hoặc program landing phù hợp; chỉ auth-first nếu route đó thực sự protected.
• Không đặt logic route phân tán trong từng item; map qua flow helper chung.

Audit Target

• Target score: >= 8/10.

---

C3 - Program Landing System (ENG-S04..ENG-S08)

Content Spec

• User state: pre + post login cho IELTS, SAT, TOEIC, Communication.
• Primary intent:
  • Pre-login: hiểu giá trị chương trình và chọn đúng lane công khai để đi sâu hơn trước khi auth.
  • Post-login: chọn đường vào bank/challenge phù hợp nhanh.
• Core value:
  1. Mỗi program có thông điệp và taxonomy riêng.
  2. Cùng một khung điều hướng để giảm học lại UI.
  3. Luôn nối được sang bank/attempt với context hợp lệ.
• Proof blocks:
  • Skill showcase.
  • Quick entry matrix.
  • Challenge/recommendation (post-login).
• Primary CTA:
  • Pre-login: Khám phá chương trình hoặc Vào lane phù hợp.
  • Post-login: Vào kho bài.
• Fallback CTA: quay về Home hoặc Program selector.

IA Skeleton

1. Program hero.
2. Skill experience showcase.
3. Quick entry matrix.
4. Post-login community/recommendation block.
5. Final action strip.

Style Lock

• Chosen style: Storytelling Learning.
• Visual intent: kể chuyện học tập theo program, không cứng dạng dashboard.
• Anti-goal: clone y chang giữa 4 chương trình.

UI Execution Notes

• Dùng shared structure + content profile per program.
• ENG-S08 invalid program fallback phải deterministic.
• Communication post-login chưa có spec sâu: giữ variant nhẹ + CTA an toàn.
• Pre-login program landing không được bị hiểu như auth wall; nếu có public lane/listing thì user đi sâu được trước khi chạm auth gate.

Audit Target

• Target score: >= 8/10.

---

C4 - Exercise Bank Access Gate (ENG-S09, ENG-S24)

Content Spec

• User state: guest/member.
• Primary intent: không làm mất context khi user đi vào bank protected.
• Core value:
  1. Guest biết lý do cần đăng nhập.
  2. Đăng nhập xong quay đúng bank route đã chọn.
  3. Route sai có fallback rõ.
• Proof blocks:
  • Context route hiện tại.
  • CTA login.
  • CTA fallback.
• Primary CTA: Đăng nhập để vào kho bài.
• Fallback CTA: Về landing chương trình.

IA Skeleton

1. Context message.
2. Auth CTA.
3. Fallback actions.

Style Lock

• Chosen style: Premium Minimal.
• Anti-goal: dùng thẻ lớn nhiều lớp gây nặng.

UI Execution Notes

• auth-first + returnTo là bắt buộc.
• Skill/program invalid phải resolve về route hợp lệ gần nhất.

Audit Target

• Target score: >= 9/10 (flow correctness nặng hơn visual).

---

C5 - Module Entry Layer (ENG-S28, ENG-S29, ENG-S30)

Content Spec

• User state: pre + post.
• Primary intent: từ Home đi vào đúng module (CM, LM, VOC) theo nhu cầu hiện tại.
• Core value:
  1. Module role rõ ràng (quản lý khóa, quản lý luyện tập, sổ từ vựng).
  2. CTA đúng context.
  3. Không dead-end với guest.
• Primary CTA: Mở module.
• Fallback CTA: Đăng nhập để mở đầy đủ.

IA Skeleton

1. Feature cards trio.
2. Quick explanation per card.
3. CTA row.

Style Lock

• Chosen style: Bento Product.
• Anti-goal: card quá đồng dạng, không có điểm neo quyết định.

UI Execution Notes

• Guest click module ưu tiên public overview/lane nếu có; nếu route module thực sự protected thì mới auth flow + giữ route module.
• Post-login mở module route tương ứng ngay.

Audit Target

• Target score: >= 8/10.

---

C6 - Auth & Placeholder Guardrails (ENG-S31, ENG-S33)

Content Spec

• User state: guest.
• Primary intent: không bị chặn mù ở route protected.
• Core value:
  1. Nói rõ “vì sao bị chặn”.
  2. Có hành động ngay.
  3. Giữ context route.
• Primary CTA: Đăng nhập.
• Fallback CTA: Quay lại route hợp lệ.

IA Skeleton

1. Guard message.
2. Login CTA.
3. Route fallback CTA.

Style Lock

• Chosen style: Premium Minimal.
• Anti-goal: placeholder quá trống không có hướng đi.

UI Execution Notes

• Logout phải giữ route context và render guard hợp lệ.
• Không được redirect user về root mù nếu có returnTo hợp lệ.

Audit Target

• Target score: >= 9/10.

---

C7 - PRA Handoff Surfaces (ENG-S25, ENG-S26, ENG-S27)

Content Spec

• User state: post-login (guest có auth-required state riêng).
• Primary intent: hoàn thành vòng Attempt -> Result -> Next action không đứt.
• Core value:
  1. Metadata contract rõ.
  2. Kết quả hiển thị ngắn gọn, action rõ.
  3. Sync impact sang LM/VOC minh bạch.
• Primary CTA: Quay lại ngữ cảnh trước hoặc Làm bài tiếp.
• Fallback CTA: Về route hợp lệ.

IA Skeleton

1. Contract validation.
2. Attempt core action.
3. Result summary + sync status.
4. Next-action row.

Style Lock

• Chosen style: Editorial SaaS.
• Anti-goal: dồn quá nhiều phân tích sâu của LM vào PRA result.

UI Execution Notes

• source_context, program, exercise_id, returnTo phải pass trước render chính.
• Invalid contract luôn có deterministic fallback.

Audit Target

• Target score: >= 9/10.

---

C8 - Permission / Upsell States (ENG-S32)

Content Spec

• User state: guest hoặc member chưa đủ entitlement.
• Primary intent: chuyển trạng thái “không đủ quyền” thành hành động tiếp theo rõ ràng.
• Core value:
  1. Không mơ hồ lý do bị khóa.
  2. Nêu rõ unlock path.
  3. Vẫn giữ đường thoát an toàn.
• Primary CTA: Nâng cấp / Mở quyền.
• Fallback CTA: Quay về route công khai.

IA Skeleton

1. Permission explanation.
2. Upsell CTA.
3. Safe fallback.

Style Lock

• Chosen style: Editorial SaaS.
• Anti-goal: hard sell nặng gây vỡ flow học.

UI Execution Notes

• Tách rõ auth required vs entitlement required để tránh copy lẫn.

Audit Target

• Target score: >= 8/10.

---

Global Flow Acceptance Checklist (Home & Discovery)

• ENG-S01/S02 có dual-state pre/post rõ.
• ENG-S03 title click vào program canonical landing đúng context.
• ENG-S04..S07 có pre/post behavior nhất quán theo contract.
• ENG-S09 và các protected CTA dùng auth-first + returnTo.
• ENG-S24 fallback đúng program khi skill/program invalid.
• ENG-S31/S33 không có guest dead-end.
• Logout giữ route context và render state hợp lệ.

Handoff Summary (for next implementation pass)

• Locked style summary:
  • Home Hub: Editorial SaaS
  • Discover/Guardrails: Premium Minimal
  • Program system: Storytelling Learning
  • Module entry: Bento Product
• Ưu tiên triển khai:
  1. C1 + C2 + C4 (flow kernel)
  2. C3 (program system)
  3. C5 + C6 + C7 + C8
• Unresolved gaps:
  • Communication post-login spec chưa đầy đủ.
  • Route-state matrix file được reference nhưng hiện chưa có trong thư mục Home & Discovery.
  • Permission/upsell copy contract chưa có tài liệu chuyên biệt cho toàn domain.