Bỏ qua để đến nội dung
DOL Wiki

DOL English - Account Screens Flow (Web V2 Active)

DomainsDOL EnglishUX1.518 words8 min read
active

Scope Gate

Phần tiêu đề “Scope Gate”
  • Active scope: single-user account.
  • Không triển khai household/parent-child, role switch, child PIN trong DOL English Web V2.
  • Các logic ecosystem đó thuộc Product KID và không dùng làm baseline active ở tài liệu này.

Principles

Phần tiêu đề “Principles”
  • Low-friction, inline edits, ít bước.
  • Ưu tiên bảo mật cho action nhạy cảm (re-auth, lock threshold, recovery path). Áp dụng Sensitive Identity Action Principle: mọi hành động thay đổi, gỡ bỏ định danh (Email, Phone) đều yêu cầu Re-Auth (Mật khẩu hoặc OTP Fallback).
  • Không dùng profile/account completion để hard-gate checkout ngoài rule contact bắt buộc (email verified + phone contact, không verify phone) ở luồng Pro/course.

Screen Map

Phần tiêu đề “Screen Map”
  • AM.INFO - Account Information
  • AM.SEC - Security & Sessions
  • AM.LINK - Linked Login Methods
  • AM.NOTIF - Notifications & Privacy
  • AM.LN - Learning Goal
  • SB.OV - Subscription Overview
  • SB.PGM - Program Package Manager (IELTS/TOEIC/SAT/Giao tiếp)
  • SB.CHANGE - Change Plan
  • BL.METHODS - Payment Methods
  • BL.HISTORY - Billing History
  • BL.PURCHASE - Purchase History
  • CR.HISTORY - Credit Usage History

AM.INFO - Account Information

Phần tiêu đề “AM.INFO - Account Information”

Purpose: Snapshot account and fast entry to common changes.

Elements:

  • Display name, avatar, optional basic profile fields.
  • Contact summary: email verify status + phone contact status.
  • Security summary: password status, last login method.
  • Quick actions:
    • Change primary email,
    • Add/Remove secondary login email,
    • Change phone,
    • Change password.
  • Goal/profile nudge block (non-blocking).

States:

  • AM.INFO.READY
  • AM.INFO.SAVE_OK
  • AM.INFO.SAVE_ERR

AM.SEC - Security & Sessions

Phần tiêu đề “AM.SEC - Security & Sessions”

Purpose: Bảo mật tài khoản và quản lý thiết bị đăng nhập.

Elements:

  • Change password form + strength hint.
  • Active sessions list (device, location/time if available).
  • Actions:
    • Logout this device,
    • Logout all devices.
  • Re-auth notice cho action nhạy cảm.

Rules:

  • Password fail lock: 5 lần liên tiếp -> 15 phút.
  • OTP unlock path khả dụng trong lock window.
  • New-device password login có step-up OTP.
  • Nếu vượt giới hạn thiết bị/session: chặn login mới, hiển thị danh sách phiên active để user logout từ xa rồi tiếp tục.
  • Rule hiển thị cho user phải bám theo số phiên/thiết bị active ở cấp account, không mô tả theo bucket desktop/tablet/mobile.

AM.LINK - Linked Login Methods

Phần tiêu đề “AM.LINK - Linked Login Methods”

Purpose: Quản lý phương thức đăng nhập social.

Elements:

  • Provider list: Google.
  • Action per provider: Link / Unlink.
  • Conflict/error messages rõ ràng khi link trùng identity.

States:

  • AM.LINK.READY
  • AM.LINK.LINKING
  • AM.LINK.UNLINK_CONFIRM
  • AM.LINK.ERROR

AM.NOTIF - Notifications & Privacy

Phần tiêu đề “AM.NOTIF - Notifications & Privacy”

Purpose: Điều chỉnh kênh thông báo và quyền riêng tư.

Elements:

  • Channel toggles: email, web push, Zalo (nếu có).
  • Privacy actions:
    • Download data (nếu bật),
    • Delete account.
  • Visibility settings:
    • profile share mode: Private / Public,
    • block-level sharing toggles: Progress & Streak, Achievements, Knowledge posts,
    • sensitive data luôn private mặc định.

Rules:

  • Destructive actions cần re-auth.
  • Default mode luôn là Private; user chỉ public khi chủ động bật.

AM.LN - Learning Goal

Phần tiêu đề “AM.LN - Learning Goal”

Purpose: Tạo/chỉnh mục tiêu học tập để cá nhân hóa gợi ý.

Elements:

  • Program selector.
  • Goal selector theo program:
    • exam lane (IELTS/TOEIC/SAT) -> target score theo ngưỡng program + ngày thi dự kiến (optional).
    • Giao tiếp -> mục tiêu năng lực giao tiếp (ví dụ: phản xạ hội thoại, nghe hiểu đời sống/công việc) + mốc thời gian kỳ vọng (optional).
  • Target picker dùng goal_scale_profile_id theo catalog chuẩn, không dùng score input chung cho mọi chương trình.
  • Summary card trước khi lưu để user rà lại mục tiêu đã chọn.
  • Save / Skip (non-blocking).

Rules:

  • Goal là optional.
  • Không hard-gate payment/feature khi thiếu goal.
  • Goal update success hiển thị popover nhanh.

SB.OV - Subscription Overview

Phần tiêu đề “SB.OV - Subscription Overview”

Purpose: Xem trạng thái gói và quản lý lifecycle.

Elements:

  • Portfolio by program:
    • IELTS,
    • TOEIC,
    • SAT,
    • Giao tiếp.
  • Mỗi program card:
    • current tier,
    • mechanism (Auto-renew hoặc One-time),
    • cycle/duration hiện tại,
    • next billing/expiry,
    • entitlement status.
  • Credit summary + trạng thái usage lock (nếu downgrade Pro Max -> Pro).
  • Actions per program:
    • Manage package,
    • Upgrade,
    • Schedule downgrade,
    • Cancel auto-renew (effective end-of-cycle),
    • Renew one-time (khi sắp hết hạn).
  • Retained-credit message khi downgrade Pro Max -> Pro.

Rules:

  • Upgrade hiệu lực ngay + prorated charge.
  • Downgrade hiệu lực kỳ kế tiếp, không refund giữa kỳ.
  • One-time không có downgrade/cancel refund giữa kỳ.

SB.PGM - Program Package Manager (IELTS/TOEIC/SAT/Giao tiếp)

Phần tiêu đề “SB.PGM - Program Package Manager (IELTS/TOEIC/SAT/Giao tiếp)”

Purpose: Quản lý gói chi tiết theo từng chương trình.

Elements:

  • Program switcher (IELTS | TOEIC | SAT | Giao tiếp).
  • Program-specific timeline:
    • start date,
    • next billing/expiry,
    • queued package (nếu có overlap queue).
  • Action set per program:
    • Change plan,
    • Cancel auto-renew,
    • Renew one-time,
    • View purchase history (filtered by program),
    • View credit usage history (filtered by program).

Rules:

  • Mỗi hành động chỉ tác động program hiện tại.
  • Không cho phép action làm thay đổi entitlement của program khác.

SB.CHANGE - Change Plan

Phần tiêu đề “SB.CHANGE - Change Plan”

Purpose: Chọn gói mới trước checkout.

Elements:

  • Program context chip (chương trình đang quản lý).
  • Mechanism selector:
    • Auto-renew,
    • One-time.
  • Tier options (Pro, Pro Max) theo eligibility.
  • Cycle/duration options theo mechanism:
    • Auto-renew -> Monthly | Annual (12m auto-renew),
    • One-time -> 3 tháng | 6 tháng.
  • Payment method availability note theo mechanism đang chọn:
    • Auto-renew -> Card + Momo,
    • One-time -> Card + Momo + Bank QR/Chuyển khoản.
  • Savings badges theo adjacent ladder.
  • Realtime summary + CTA Continue to payment.

Rules:

  • Nếu feature mở được bằng Pro: hiển thị cả Pro + Pro Max, chờ user chọn.
  • Nếu feature cần Pro Max: chỉ hiển thị Pro Max.
  • Không hiển thị đồng thời toàn bộ method list của cả hai mechanism.
  • Khi đổi mechanism: reset selection method/cycle không tương thích.

BL.METHODS - Payment Methods

Phần tiêu đề “BL.METHODS - Payment Methods”

Purpose: Quản lý phương thức thanh toán đã lưu.

Elements:

  • Saved method list (masked).
  • Actions:
    • Add,
    • Set default,
    • Remove.

Rules:

  • Action nhạy cảm cần re-auth.
  • Checkout là protected flow; guest phải login trước khi tiếp tục.
  • Checkout cho Pro/Pro Max hoặc đăng ký khóa học yêu cầu email verified + phone contact; không ép goal/profile và không verify phone.

BL.HISTORY - Billing History

Phần tiêu đề “BL.HISTORY - Billing History”

Purpose: Tra cứu giao dịch, invoice, trạng thái thanh toán.

Elements:

  • Transaction list: date, amount, cycle, status.
  • Invoice download link (nếu có).
  • Failure/retry status summary.
  • Link điều hướng nhanh:
    • Open Purchase History,
    • Open Credit Usage History.

States:

  • BL.HISTORY.EMPTY
  • BL.HISTORY.READY
  • BL.HISTORY.ERROR

BL.PURCHASE - Purchase History

Phần tiêu đề “BL.PURCHASE - Purchase History”

Purpose: Theo dõi lịch sử mua gói/top-up và trạng thái thanh toán theo item.

Elements:

  • Purchase table:
    • date/time,
    • program,
    • item type (subscription, one-time, top-up, renewal),
    • mechanism/cycle hoặc duration,
    • amount,
    • status,
    • invoice.
  • Filters:
    • program,
    • item type,
    • date range,
    • status.
  • Drill-down:
    • purchase detail,
    • linked credit events (nếu có).

States:

  • BL.PURCHASE.EMPTY
  • BL.PURCHASE.READY
  • BL.PURCHASE.ERROR

CR.HISTORY - Credit Usage History

Phần tiêu đề “CR.HISTORY - Credit Usage History”

Purpose: Minh bạch toàn bộ biến động credit và lý do tiêu dùng/refund.

Elements:

  • Ledger table:
    • timestamp,
    • program,
    • event type (add, spend, refund, expire),
    • source (topup, subscription_quota, manual_adjust, system_refund),
    • delta,
    • balance after,
    • linked reference (attemptId, resultId, jobId) khi có.
  • Filters:
    • program,
    • event type,
    • source,
    • date range.
  • Summary cards:
    • current balance,
    • spent this cycle,
    • refunded this cycle.

States:

  • CR.HISTORY.EMPTY
  • CR.HISTORY.READY
  • CR.HISTORY.ERROR

References

Phần tiêu đề “References”

Change log

Phần tiêu đề “Change log”
  • 2026-03-16: Làm rõ screen-level contract cho contact: email có verify status riêng; phone là contact-only và checkout không yêu cầu verify phone.
  • 2026-03-04: Mở rộng scope program active: thêm Giao tiếp vào portfolio/account subscription surfaces (SB.OV, SB.PGM).
  • 2026-03-03: Đồng bộ baseline auth active: social chỉ còn Google; thêm rule xử lý khi vượt giới hạn device/session; cập nhật checkout contact gate (email verified + phone contact).
  • 2026-02-27: Mở rộng flow Account cho subscription/credit: thêm SB.PGM, BL.PURCHASE, CR.HISTORY; đồng bộ SB.CHANGE theo contract mechanism-first + dynamic payment-method visibility.
  • 2026-02-20: Refactor file về DOL English Web V2 active scope (single-user), loại bỏ household/parent-child/child-PIN khỏi flow account active.