Teado Teacher: a new UI/UX on the Cloud theme
A complete redesign of teacher.teado.ai (the same product as teacher.flyer.us, served on the Teado host) using the Cloud theme: one calm, dense, Cloudflare-style shell in FLYER purple, applied to every screen from sign-up and onboarding down to the smallest confirmation popup.
Research on the live product (80 routes crawled with the test account) · full screen census from partner-web source · clickable prototype · 5 verification passesOpen the clickable prototype → Start from onboarding All screens index
1Summary
Teacher.teado.ai today is the FLYER teacher app with a different host name: a Next.js Pages-Router app (partner-web) mixing antd, MUI and Tailwind, a large sidebar with 6 uppercase groups, a dark "Tạo" button, icon-heavy KPI tiles and modal-driven onboarding. It works, but it does not look like one product and it wastes space on 1440-px screens.
This PRD specifies a full re-skin and re-layout on the Cloud theme: a 60-px top bar with the school switcher, a global Create button and a ⌘K search; a 260-px sidebar with five sections in Teacher mode (nine in School mode); and one content pattern (breadcrumb → title → actions → tabs → content) shared by every page. Data tables, KPI cards, chips, drawers and confirmation modals are standardised. Nothing is removed: every route in partner-web and every modal, drawer, popover and tour has a Cloud-theme equivalent in the prototype.
ThemeColor.CLOUD switch, module by module (shell → classes/students/assignments → resources → AI → school setup), keeping the classic theme selectable in Settings for one release.2Context and research
What teacher.teado.ai is
The Teado host serves the same partner-web codebase as teacher.flyer.us. Two things differ: (1) the host picks the V4 onboarding (Welcome → Role → Basic info → Goals → Workspace ready) instead of FLYER's V3 flow, and (2) Teado has a Teacher mode (lite) and a School mode (full). Lite hides AI assistant, Bingo AI, challenge, exam management, finance and school setup; the sidebar footer shows "Switch to School mode".
Live crawl with the test account
Logged in as 0909469666: a multi-school account gated behind the School portal (4 schools). Work was done in Tung Nguyen's school (Owner · 4 classes · 16 students · 46.6 study hours). 80 routes were crawled in Teacher mode; the table below summarises what the account can reach.
| Area | Reachable in Teacher mode | Redirects to home (School mode only) |
|---|---|---|
| Home | / lands on Explore (not a dashboard); /report opens the weekly-report modal on load | — |
| Teaching | classes, student-list (+create), assigned-tests, report/attendance, quick-start | student-management, notification-list, profile routes |
| Resources | explore, program (+create, generate), exams (My library), creator, placement, study-lesson | — |
| Tools | flyer-ai (writing/speaking, record, upload), assistant, bingo-ai (page title "UNDEFINED" — untranslated) | challenge, school-calendar |
| Reports | all 20 report sub-pages | — |
| School | settings, billing, package, package-ai-speaking, school-portal (+system-performance) | centralized-exam (3), tuition (2), bank-account, sepay, teacher/list, invite-teachers, school-setup, school-settings, permission-management, store, course (2), transfer-diamond |
Source census
From partner-web/src (branch dev, Sep 2026): 133 page routes in src/pages (excluding /api and _components), 233 modal/drawer/popover/onboarding component files, 7 feature flags (tuition_fees, online_class, teacher_school_exam, teacher_school_game, trial_student, teacher_clone_voice, enable_is_mix) and 15 locale namespaces. Every one of them is mapped in §9.
3What is wrong with the current UI
Screenshots taken on 06 Sep 2026 from teacher.teado.ai with the test account, Teacher mode, school Tung Nguyen's school. Prototype screens are labelled as such.
- Three design systems on one page. antd tables and drawers, MUI tabs on class/student detail, Tailwind cards elsewhere. Border radii, font sizes and button heights differ between modules.
Class detail today: MUI pill tabs, icon KPI tiles, a dark "Lớp trực tuyến" button and a "Chào mừng tới … 👋" title, all in one viewClasses list today: antd table with grey filter chips and a different button style on the same screen - Sidebar does too much. Six uppercase groups, a dark "Tạo" button that floats above them, a wallet card and an "Add students" button in the footer, plus per-page guide bars. The active item is a grey pill, not the brand colour.
The sidebar today: dark "Tạo" button, six uppercase groups, "Thêm học sinh" and the wallet card in the footer, grey active pill
Students page today: guide bar under the top bar, one oversized KPI tile, then filters and dark buttons - No real home. Teacher mode lands on Explore; the report page opens a full-screen weekly-report modal on every login. Teachers have no single place that says "what needs my attention".
Landing page today is Explore (Khám phá), not a dashboard
Opening Reports after login: the weekly-report modal covers the whole page - KPI tiles waste space. Big icon + uppercase label + one number per tile; four tiles use a third of the viewport before the table starts.Assignments today: two tall tiles for two numbers, then the table starts below the fold
Prototype: four compact KPI cards in one row, table immediately under - Onboarding is scattered. V4 onboarding pages, a Welcome V3 modal, first-visit modals per route, driver.js tours, a Quick start page and a guide bar all overlap.
Quick start today: a separate 4-step page with a video, while the guide bar and route tours offer the same guidance elsewhere
Prototype: one onboarding flow, then a goal-driven Quick start and a single Help menu - Inconsistent overlays. On Teado, "create class" and "assign homework" are full pages with a back arrow, "add students" is a page, the weekly report and class info are modals, and row actions are popovers, with different header, footer and close patterns.
"Tạo lớp mới" today opens a full page with a back arrow and a footer
"Giao bài" today also opens a full page, with a floating submit bar; other actions are modals or popovers - Untranslated or leftover copy. Bingo AI page title renders "UNDEFINED"; mixed English/Vietnamese labels inside the same table (e.g. "Practice", "Starters" levels next to Vietnamese headers).
Bingo AI page today: the header reads "UNDEFINED" and the title is "Chào mừng tới 👋" with no name
Add students today: English page title "Create Students Page" on a Vietnamese UI - Mode switch is hidden. "Switch to School mode" is a sidebar item at the bottom with no explanation of what changes."Phiên bản cho trườ…" is truncated at the bottom of the sidebar; nothing explains that it unlocks exams, finance and school setup
4Goals, non-goals and success metrics
Goals
- One visual system (Cloud theme) on 100% of screens and overlays, including auth, onboarding and error states.
- A real Home that surfaces work to do (grading, deadlines, low-activity students) in under 3 seconds.
- Denser, scannable list pages: tables first, KPIs in one compact row, filters inline.
- Global actions in one place: Create, AI grading, Help, wallet, notifications, account, ⌘K.
- Consistent overlay rules (§10) so every module feels the same.
- Keep every existing capability and route; no feature is dropped in the redesign.
Non-goals
- No backend or API changes; the redesign is front-end only (partner-web).
- No change to pricing, packages or the lite/full gating rules.
- Student and parent apps are out of scope (only the two parent views inside partner-web are covered).
- Dark mode is not shipped in v1 (theme picker keeps colour swatches only).
Success metrics (first 8 weeks after rollout on the Teado host)
| Metric | Today (estimate) | Target |
|---|---|---|
| Time to first assignment for a new teacher (sign-up → assign) | ~2 days | same session (< 15 min) |
| Quick start completion (all steps) | ~20% | 45% |
| Weekly active teachers who open Reports | ~30% | 50% |
| Support tickets tagged "cannot find" | baseline | −40% |
| Teacher → School mode conversions | baseline | +25% |
5Design language: the Cloud theme
Tokens are taken verbatim from the Cloud theme frames at roadmap.flyer.vn/cloudtheme and from src/styles/cloud-theme.css in the feat/cloud-theme branch. Inter is the UI face; body text is 13.5 px; borders are hairlines (#e4e4e7); there are no drop shadows except on overlays.
Level colours (fixed, unchanged from production)
The seven CEFR levels keep the colours they already have in the product. They come from LEVEL_OBJECT in src/constants.ts, which is duplicated as LEVEL_OBJECT_V3 and cefrLevelOptions — the redesign reads one shared map so a level never changes colour between screens. Chips are solid fill, white text, 6 px radius, 12 px/600, as production renders them. Exam names (Starters, Movers, Flyers, KET, PET) keep their own outline tag beside the CEFR chip.
| Element | Spec |
|---|---|
| Top bar | 60 px, white, hairline bottom. Left: cloud mark, product name, school switcher, mode chip. Right: Create (brand), AI grading, Help, coins chip, bell with count, avatar. |
| Sidebar | 260 px, white, hairline right. ⌘K search, items 13.5 px/500, 8 px radius; active = brand-soft background + brand text; section labels 11 px uppercase #8e8e96. Footer: mode switch, Settings, wallet. |
| Page head | Breadcrumb 13.5 px muted → H1 24 px/650 → sub 13.5 px muted; actions right-aligned; optional tabs row with brand underline (inset 2 px). |
| Content | #fafafa, 24 px × 40 px padding. Cards white, 10 px radius, hairline. Grid gaps 16 px. |
| KPI card | Label 12.5 px muted (+ optional chip), value 28 px/650 tabular, delta line 12.5 px with ▲/▼ in green/red. |
| Table | Header #fafafa 12 px/600 muted, rows 11 px padding, hairline #eeeef0, hover #fcfcfd, right-aligned numerics, row ⋮ actions, pager bottom-right. |
| Buttons | Primary brand / secondary white with #d4d4d8 / danger outline red / text brand. 8 px radius, 13.5 px/600; sizes xs, sm, default, lg. |
| Chips | 6 px radius, 11.5 px/600, tonal pairs (green, amber, red, purple, blue, gray, outline); optional status dot. |
| Level chip | Fixed per CEFR level (see palette above), solid fill + white text, 12 px/600, 6 px radius. Exam-name tag sits to its left as an outline tag in the exam colour. |
| Overlays | Modal 560 px (sm 440 / lg 760 / xl 960) 14 px radius; drawer 640 px right (sm 460 / lg 860); popover 300 px anchored; toasts top-right with left colour bar; tour spotlight + card. |
| Icons | Line icons, 16 px in nav and buttons, 1.8 px stroke, currentColor. No emoji in UI chrome. |
6Information architecture
The sidebar is rebuilt around what a teacher does daily. Items keep their existing routes; only grouping, order and labels change. School mode adds four sections; Teacher mode stays short.
Route map
All 133 routes stay as they are. Detail pages get query-param tabs (?tab=) instead of MUI tab indices so that every tab is deep-linkable; the class page has 11 tabs, the student page 9, settings 4, billing 3, Bingo AI 3, store 2, tuition 5, explore 8.
7Shell and global patterns
- Create menu (top bar). One brand button replaces the sidebar "Tạo": Assign homework, Class, Students, Exercise or test, Program with AI, Challenge, Exam, Tuition invoice. Items respect the mode and flags.
- ⌘K palette. Jump to any screen, class or student; run actions (assign, create class, add students, challenge). Replaces the header search box.
- School switcher. Popover on the school name with role and student count per school; links to School portal and "Create school".
- Mode chip and switch. The current mode is always visible as a chip beside the school name; switching lives in the sidebar footer and in the account popover, with a toast confirming the change.
- Help menu. Quick start, User guide drawer, Interactive guide for this page, What's new, Report a bug, Feedback, Contact, Download app QR. This retires the per-page guide bar as a permanent element (it remains dismissible).
- Notifications. Bell with unread count → popover (6 latest, mark all read) → full list page with filters.
- Account popover. Profile, Theme, Language, Active code, Download app, Switch to parent, Switch mode, School portal, Log out.
- Guided tours. All 15 driver.js tours from production are implemented as one engine covering 107 steps. Each step names a real target; the engine measures that element, cuts the spotlight over it, positions the card beside it and navigates or opens the drawer the step needs. Back, Skip, Next and a step counter work, and every guide ends on a completion card offering the next one. The Help menu and the guide bar open a guides index, and each guide also has a page listing all its steps.
- Preview everywhere. Every card in Explore (tests, topic talks, study lessons, programs, video lessons, documents, playlists) and every program card shows a hover preview popover like production: thumbnail, parts with points and time, the first question or the unit list, and Preview / Assign / Open buttons. Program cards are 4-up portrait, matching production.
- Pop-up pages. Every modal, drawer and popover has a canonical URL (
/<name>, e.g./create-school,/assign-drawer) that renders it as a standalone page with the same body and footer. The ↗ icon in every overlay header opens it. This gives support, QA and analytics one link per pop-up. - Language. English and Vietnamese, switchable from the sidebar footer, the account popover, the onboarding header and the login page. Vietnamese copy uses the formal register (Thầy/Cô, học sinh, phụ huynh); the prototype ships a 2,300-entry dictionary plus number patterns, applied to every screen and overlay.
- Guide bar. Kept, but one line, panel-grey, closable, with three entries: View guide, User guide, What's new.
8Key flows
8.1 Sign-up → onboarding → first assignment
Onboarding runs full-screen on the Cloud grey background with a 3-px brand progress bar, one card per step, Back/Skip/Continue in the footer, and the language and log-out controls in the header. After the last step the user lands on Explore with the Welcome modal; Quick start is personalised by the chosen goal and shows a coin reward. First-visit prompts, tours and "Tour finished" share one visual (§10).
8.2 Assign homework (drawer, 3 steps)
Step 1 chooses the source (Teado library / My library / Programs / Playlists) with level, skill and type filters and inline Preview; Step 2 picks the class or individual students, start time, deadline and the four toggles (test mode, hide answers, late submission, notify parents); Step 3 confirms with the Zalo QR share card. The same drawer opens from Home, Explore cards, class tabs, student profile, Bingo AI and the Create menu.
8.3 AI grading
Hub → Writing tool (type or photos) or Speaking (record / upload, grading-type modal) → progress modal → result page with criteria bands, corrections table, transcript, pronunciation heatmap, detail modals (fluency, pronunciation, pitch), teacher note and "assign follow-up practice". Credits are shown in one note at the top of every grading page; wallet-permission and insufficient-balance modals are standardised.
8.4 Attendance and rewards inside the class
Attendance rides on the class timetable (settings drawer); the current session is a table with a 4-way segmented status per student, notes modal, unsaved-changes guard and finish confirmation; the Overview sub-tab and the Attendance report share the same table. Rewards use Wisdom Stones: reward modal with criteria tiles, groups, history drawer and the school Reward store (items + redemption approvals).
8.5 School mode: exams and tuition
Exam management is a 4-step create page (info → participants → structure & sessions → review) with the session-settings modal, a live Exam supervisor table and a score sheet with automatic shield conversion and certificates. Tuition is a three-column create page (set-up · students · preview), invoice groups, the invoice modal with QR payment, notification settings popover and SePay bank connection.
9Screen inventory — 100% coverage
Every row links to the live prototype. "Screen" rows are routes or deep-linkable tabs; "Overlay" rows are modals, drawers, popovers, tours or palettes, opened on top of a class page. The right column names the route or component in partner-web that the row replaces, so engineering can tick them off one by one.
teacher.teado.ai/create-school), reachable from the ↗ icon in its header, so any pop-up can be linked, shared and deep-tested on its own. Generated from teado-cloud-theme/manifest.js, which is also what the in-app "All screens" index and the verification script read — the three cannot drift apart.Auth & onboarding 15 screens · 4 overlays
Home & quick start 3 screens · 24 overlays
Interactive guides (driver.js tours) 0 screens · 19 overlays
Classes 13 screens · 21 overlays
Students 13 screens · 18 overlays
Assignments 9 screens · 12 overlays
Resources 25 screens · 15 overlays
My library & creator 11 screens · 28 overlays
AI grading & assistant 21 screens · 11 overlays
Challenge & games 3 screens · 3 overlays
| # | Prototype screen | Type | Canonical URL (every pop-up has its own page) | Source in partner-web |
|---|---|---|---|---|
| 1 | Challenges | Screen | teacher.teado.ai/challenge | pages/challenge/index.tsx |
| 2 | Challenge detail / report | Screen | teacher.teado.ai/challenge/X7K2P | pages/challenge/[code].tsx |
| 3 | Create challenge | Overlay | teacher.teado.ai/create-challenge | Challenge/ModalCreateChallenge |
| 4 | Challenge created | Overlay | teacher.teado.ai/challenge-success | Challenge/ModalCreateChallengeSuccess |
| 5 | End challenge session | Overlay | teacher.teado.ai/end-challenge | end session |
| 6 | Games | Screen | teacher.teado.ai/games | sidebar Games (teacher_school_game) |
Reports 21 screens · 3 overlays
Online teaching (calendar) 1 screens · 5 overlays
| # | Prototype screen | Type | Canonical URL (every pop-up has its own page) | Source in partner-web |
|---|---|---|---|---|
| 1 | Online teaching calendar | Screen | teacher.teado.ai/school-calendar | pages/school-calendar |
| 2 | New / edit event | Overlay | teacher.teado.ai/event-modal | school-calender/EventModal |
| 3 | Event popover | Overlay | teacher.teado.ai/event-view | school-calender/EventViewPopover |
| 4 | Show more events | Overlay | teacher.teado.ai/show-more-events | school-calender/ShowMorePopover |
| 5 | Recurring event scope | Overlay | teacher.teado.ai/recurring-scope | school-calender/RecurringEventScopeModal |
| 6 | Select students | Overlay | teacher.teado.ai/select-students-calendar | school-calender/ModalSelectStudentOnClass |
Exam management 6 screens · 6 overlays
Finance 6 screens · 10 overlays
School setup 12 screens · 15 overlays
Wallet, billing, settings 14 screens · 4 overlays
10States, feedback and small popups
| Pattern | Rule | Prototype example |
|---|---|---|
| Confirm destructive | Small centred modal, red hero icon, one-sentence consequence, secondary Cancel + solid red action. Never a browser confirm(). | Remove class, Delete assignment |
| Confirm neutral | Same modal, brand action, no hero icon. | Finish attendance |
| Success | Centred modal with green hero only when there is a next step (share code, download credentials); otherwise a toast. | Class created, Payment successful |
| Toast | Top-right, 3 s, left colour bar (green / red / amber / blue). Used for save, copy, send, export. | Any "Copy" button |
| Unsaved changes | Amber hero, "Leave without saving" (danger outline) + "Save and leave" (brand). | Attendance not saved, Save as draft? |
| Progress / AI working | Centred modal with brand hero, estimate, progress bar and "Run in background". | Grading with AI… |
| Paywall / limits | Centred modal, brand or amber hero, two actions (Later / See packages). | Premium, Seat limit, Insufficient balance |
| Row actions | ⋮ opens an anchored popover; destructive item last and red. | Student actions |
| Multi-step | Drawer with a step indicator in the body and Back/Next in the footer; success is step 3 inside the same drawer. | Assign homework |
| Tours | Spotlight hole + 320-px card with step counter, Skip and Next; first-visit prompt and completion modal share the brand hero. | Start guide |
| Empty | Folder icon in a grey tile, title, one line of help, primary action. | No online class linked |
| Session expired | Centred modal with lock icon, single Log in action. | Session expired |
11Implementation plan in partner-web
The feat/cloud-theme branch already adds ThemeColor.CLOUD, theme-cloud on <html>, cloud-theme.css and antd token overrides. This PRD extends that from a colour skin to a layout.
| Phase | Scope | Files (indicative) | Effort |
|---|---|---|---|
| 0 · Tokens | Finalise tokens in cloud-theme.css and CLOUD_THEME_TOKENS; Inter; icon set = existing public/static/icons/sidebar/*.svg as currentColor masks. | src/styles, providers/settings.tsx | 1 wk |
| 1 · Shell | New Topbar (school switcher, Create, Help, wallet, bell, avatar), Sidebar (sections per mode), PageHead (crumbs/title/actions/tabs), ⌘K palette, guide bar. | layouts/main/*, NavSection, AccountPopover, MenuPopover | 2 wk |
| 2 · Primitives | KpiCard, DataTable wrapper (antd Table with cloud tokens), Chip, Button sizes, Drawer/Modal/Popover wrappers with the header/footer rules of §10, Toast, EmptyState, Steps. | components/FlyerComponentsV2/cloud/* | 2 wk |
| 3 · Teaching | Home (new page at / for Teado host), Classes, class detail (query tabs, replace MUI tabs), Students, student detail, Assignments, assign drawer, attendance, rewards. | pages/classes, [classId], student-list, assigned-tests, dashboard/* | 3 wk |
| 4 · Resources & AI | Explore, programs (+builder, generate, schedule), My library, creator, placement, AI grading pages and result pages, assistant, Bingo AI. | views/exam-library, program, my-exams, creator, flyer-ai, bingo-ai | 3 wk |
| 5 · School mode | Reports (20), calendar, exams, tuition, bank, teachers, courses, store, roles, permissions, billing, packages, settings, auth and onboarding. | views/report, centralized-exam, tuition-management, school-setup, settings, signup, Onboarding/v4 | 3 wk |
| 6 · Rollout | Default Cloud on the Teado host; classic selectable in Settings → Theme for one release; then remove the classic layout code paths. | TeadoProvider, settings | 1 wk |
?tab= params on detail pages with a mapping from the old numeric MUI tab values so existing deep links still work. The i18n keys already exist for almost every string in the prototype (namespaces: common, onboarding, modal, class, flyer_ai, centralized_exam, tuition_management, my_exam, program, course, challenge, bingo_ai, bank_account, student_info_modal, auth); the prototype copy is English and should be wired to those keys, not hard-coded.12Verification: five passes
The request was to build 100% of the pages, down to the smallest popups, and to check it several times. Five independent checks were run; the last two are automated and can be re-run with verify.mjs against the deployed prototype.
src/pages (dynamic routes included) and mapped each to a prototype route; a second automated census on 06 Sep (loose match of every route and every modal/drawer/popover file against the manifest) found 1 route and 4 overlays not yet covered, all added since. Result: 133 / 133 routes registered in app/*.js; dynamic routes are served with sample ids.data-href and data-m reference in every rendered screen and overlay was resolved against the route and overlay registries. Result: 0 missing routes, 0 missing overlays (one dev-bar link was fixed in the process).| Check | Count | Result |
|---|---|---|
| Routes in partner-web src/pages | 133 | all mapped |
| Prototype screens (routes + tabs) | 173 | render OK |
| Prototype overlays | 201 registered · 198 in manifest | open OK |
| Standalone pop-up pages (canonical URLs) | 201 | render OK |
| Vietnamese dictionary entries + number rules | 2,313 + 60 | 92.5% of text nodes |
| Renders in verification (lite + full, incl. pop-up pages) | 484 | 0 errors |
| Interactive guides · steps | 15 · 107 | every step walked |
| Missing links / overlays | 0 / 0 | clean |
| Live routes crawled for parity | 80 | compared |
13Risks and open questions
- Three UI libraries. Replacing MUI tabs and mixed Tailwind cards module by module means two looks coexist during the rollout; mitigated by shipping the shell first (it wraps everything) and by the theme switch.
- Home page for the Teado host. Today
/is Explore in Teacher mode. A new Home changes where teachers land; the Quick start banner and Explore link keep the old path one click away. - Guide bar and tours. driver.js tours target DOM selectors; every tour must be re-pointed after the shell change (tour steps listed in
onboarding.json). - Vietnamese copy. The prototype dictionary is a design reference in the formal register; production labels must come from the locale files (and the missing Bingo AI title key must be added on the Teado host).
- Open: should the guide bar be removed entirely once the Help menu ships? Should School mode be the default for accounts with an Owner role? Should the weekly-report modal stop auto-opening on the report page?
14Sources
- Live product: https://teacher.teado.ai — crawled 06 Sep 2026 with the test account (80 routes, Teacher mode, school "Tung Nguyen's school").
- Cloud theme reference: https://roadmap.flyer.vn/cloudtheme and Downloads/flyer-cloud-theme/*.dc.html.
- partner-web source (branch dev / feat/cloud-theme, ~/partner-web-cloud): src/pages, src/components, src/views, src/layouts, src/locales/en/*.json, src/providers/teado/TeadoProvider.tsx, Onboarding/README.md.
- Prototype source: roadmap.flyer.vn/teado-cloud-theme (core.js, screens-*.js, modals.js, manifest.js, vi.js, theme.css).
- Verification script: scratchpad/pw/verify.mjs (Playwright), report verify.json.