๐Ÿ”‘
Mockup 1 of 11 โ€” Shared Screen
Sign In
๐Ÿ” All roles use this screen

The login screen all users see โ€” students, teachers and admins. Username and password, with demo quick-access buttons for each role.

  • Username + password login โ€” minimal, secure
  • PWA offline-ready design (tested for older Safari on iPad)
  • Demo quick-access: Student / Teacher / Admin buttons
  • Auto-routes to correct role dashboard on success
Open mockup
๐Ÿ“Š
Mockup 2 of 11
Student Dashboard

The first screen a student sees after signing in. Shows their streak, XP, upcoming assignments, and quick-launch buttons.

  • Assigned Tasks โ€” teacher-set modules with due dates
  • My Work โ€” view own projects & portfolio
  • Messages โ€” receive feedback from teacher
  • Help โ€” tutorials and support
  • Streak & XP gamification bar
Open mockup
๐ŸŽจ
Mockup 3 of 11
Custom Slide Builder

The core creative workspace. Students build presentation slides using a purpose-built canvas editor โ€” no PowerPoint needed.

  • Add Slide (+) โ€” create new canvas slide
  • Text / Image / Shape / Draw tools
  • Undo / Redo
  • Save โ€” persists locally, syncs online
  • Publish โ€” submits to teacher for review
  • Share โ€” submit presentation to teacher with one tap
Open mockup
๐Ÿ—‚๏ธ
Mockup 4 of 11
Portfolio Workspace

A student's personal archive of all their work โ€” browseable, filterable, and shareable for college/job applications.

  • Open Assigned Task โ€” launch teacher-set project
  • Submit for Review โ€” send to teacher
  • View Feedback โ€” read teacher annotations
  • Download / Export โ€” save to device
  • Filter by subject or date
Open mockup
๐Ÿง‘โ€๐ŸŽจ
Mockup 9 of 11
Avatar Builder

Students personalise their profile avatar โ€” choose skin tone, hair colour, hair style and eye colour. Saved choices appear in the nav bar across all pages.

  • 5 skin tones, 6 hair colours, 6 hair styles, 4 eye colours
  • Live SVG preview updates in real time
  • Avatar persists across all student pages via localStorage
  • Shirt colour matches chosen theme
  • Achievement unlocks add more customisation options
Open mockup
๐ŸŽจ
Mockup 10 of 11
Theme Picker

Students pick a colour theme that stays across every screen โ€” Classic Oak, Midnight Indigo, Minimal Slate or Calm Violet. Admins always see Classic Oak.

  • 4 colour themes โ€” live preview on selection
  • Theme saved to localStorage and applied on every page load
  • Admin and teacher views locked to Classic Oak
Open mockup
๐Ÿ“ฑ
Mockup 8 of 11
iPad / Mobile Layout

The same student experience optimised for tablet and mobile โ€” touch-first, 48 px tap targets, swipe navigation.

  • Touch-optimised 48 px minimum tap targets
  • Swipe gestures between sections
  • Compact nav bar for small screens
  • Add to Home Screen for full offline support (iOS)
Open mockup
๐Ÿ’ฌ
Mockup 11 of 11
Messages
Phase 2 feature preview

Teacher-to-student messaging โ€” fully monitored, safeguarding-first. Students see a simple inbox and thread view; admins see the complete message log with keyword-flagging.

  • Teacher โ†’ student only โ€” no peer messaging
  • Monitoring notice displayed in every thread
  • Keyword-flagged messages escalated to DSL
  • Full message log with Export CSV in admin dashboard
  • Reply works live in the demo โ€” type and press Enter
Open mockup