Immersive Classroom:
A Zero-to-One Gamified
Learning Platform
The K12 online education market has long been fractured into two extremes. On one end are premium live classes (100–500 RMB per lesson) with an impressive 80–90% completion rate but inaccessible to many families. On the other are affordable recorded courses (50–100 RMB per lesson) with a dismal 30–50% completion rate. The opportunity: could we build a product that scales like a recorded class but engages like a live, premium experience?
Our Vision
As Senior Product Designer, I led the 0-to-1 design of "Immersive Classroom" — replacing static video grids with a gamified platform that uses storytelling and multi-user interaction to recreate the dynamics of a physical classroom.
The platform is dual-sided: for students, something that feels like a game; for teachers, a streamlined command center. Two very different design problems sharing one system.
Discover & Insight
Recorded classes finished at just 30–50%. Research and stakeholder interviews put the cause in the environment rather than the teaching: without peers or the cues of a real classroom, children disengaged — and more quizzes would not fix that. Engagement in K-12 online learning turns on interaction and companionship as much as content quality, so we dropped the “optimized video player” framing and rebuilt the class as a story-led world.
| Feature | Traditional Platform | Immersive Classroom | Value Delivered |
|---|---|---|---|
| Environment | Static video grid | Story-driven backgrounds | Deeper immersion |
| Interaction | Chat & hand-raise | Video interaction | Stronger engagement |
| Motivation | Grades | Gamified rewards | Intrinsic motivation boost |
Testing the Hypothesis
During an early concept test, we introduced a simple prototype: the teacher appeared inside a desert exploration adventure instead of a static white screen. Students' behavior shifted immediately — they were no longer passively watching, but actively exploring.
The signal validated the hypothesis, so we pushed further into AR and gesture recognition: students answer with hand gestures the camera reads, triggering AR stickers on screen — a physical-to-digital loop that keeps them in an active posture.
Learning becomes engaging when it feels like an experience, not a task.
Content
Immersion
Make learning feel like exploration.
Interaction
Engagement
Increase attention & participation.
Structure
Scalability
Support diverse teaching scenarios.
System Architecture
The multi-layered interface supporting this range of content and interaction made a unified, scalable architecture essential.
Content Design for Immersive Learning
Interactive content and assessment place knowledge inside realistic scenarios, so students apply what they learn as they learn it.
Immersive Scenario-Based Learning
Students learn through narrative-driven scenarios, transforming abstract knowledge into concrete experiences while enhancing engagement and emotional connection.
Immersive Group Photo Interaction
By capturing group moments within immersive learning scenarios, students experience learning as a journey of exploration and discovery.
Interactive Design for Engaging Learning
Enhancing classroom engagement through real-time interaction, immersive scenarios, and instant feedback.
1Dynamic Stage
Flexible layouts for audio, video and content.
2Role-Playing
Students act out the lesson, not watch it.
3Peer Presence
Classmates' reactions show up on screen.
4Instant Feedback
Quick audio and video cues keep focus.
2 Modes × 3 Interaction Formats
A flexible interaction system combining configurable stage control and real-time engagement, supporting multiple speaking formats to enhance participation and classroom immersion.
Dynamic Stage Mode
A configurable interaction mode that allows teachers to freely arrange and control student video windows during class.
Real-time Interaction Mode
A default interaction mode where student video windows are activated instantly for spontaneous, in-the-moment engagement.
Dynamic Stage Mode
Teachers can initiate student video interactions closely integrated with learning content, enhancing classroom immersion, increasing peer interaction frequency, and fostering a stronger sense of learning companionship.
Role-Based Learning & Skill Acquisition
Students take on different roles throughout the learning process, each associated with specific abilities. This approach enhances engagement and creates a stronger connection between interaction and learning content.
Fostering Engagement & Enhancing Student Visibility
Interactive participation highlights student performance, builds an engaging classroom atmosphere, and strengthens peer connection and learning presence.
Feedback Mechanism: Coin Reward Feedback & AI Teacher Feedback
- Video Interaction: The system provides coin-based reward feedback.
- Student Verbal Response: The AI teacher model delivers personalized voice feedback, fostering a stronger sense of connection between teachers and students.
Impact & Results
Across all three grade bands, immersive classes held attention longer than the recorded baseline — and the gap widened with every lesson, which is exactly where recorded courses normally lose students.
Course completion rate
Increase in completion
Attendance decline reduced
User satisfaction
Reflection & Next Steps
Zero-to-one here meant constant negotiation with business and engineering: the design had to serve the pedagogy and still fit the technical and resource limits. Ideas that ignore those limits stay conceptual.
Next Steps
Interaction flow
Tighter answer feedback and waiting states, so a response never feels dropped.
Feedback quality
Contextual, personalized replies to what a student actually said — not a generic verdict.
Attention design
Sharpen the AI calling and highlighting so “being noticed” is memorable, not routine.
Reward system
Move past flat incentives into progression, competition and layered rewards.
Background
The new recorded-class model needed teacher-side capabilities fast, so v1 extended the existing teacher interface with a generalized interaction publishing workflow — flexible configuration, quick deployment of varied teaching interactions.
Problem
But publishing an interaction took too many steps, and checking notes pulled teachers' eyes off the main screen — breaking the flow for students.
Due to the constraints of the waist-up recording setup, teachers must focus visually on the preview screen during instruction, while performing interaction operations on a separate control panel.
Problem Breakdown
Starting from the operational challenges teachers face in the waist-up recording setup, we defined clear design goals and proposed strategies to optimize the teaching experience.
Framework Design
Build a clear and consistent information architecture for the waist-up recording setup, helping teachers focus on teaching while reducing operational burden.
Product Capabilities
Lesson Content
Interaction Controls
Content Preview
Instructor Notes
Page Structure
Design Iteration: From Complexity to Clarity
From Complexity to Clarity
V1 Direct Migration
Directly migrated the control panel to the preview screen.
Issue: Redundant information and visual clutter.
V2 Simplified Content
Reduced unnecessary elements and highlighted the current step.
Remaining Problem: Interaction states and controls were still not suitable for the preview screen.
V3 State Clarity
Clarified current interaction states and streamlined actions.
Improvement: Removed non-essential information to improve focus.
V4 Visual Optimization
Refined visual hierarchy and interaction feedback.
Outcome: A cleaner, more intuitive interface aligned with the teaching flow.
Design Solution
By reducing operational complexity and emphasizing real-time status feedback, the design enables teachers to effortlessly manage turn-based speaking sessions with clarity, control, and minimal cognitive load.
Final Design: Group Photo Interaction Workflow
Using the group photo interaction as an example, this end-to-end workflow shows how teachers initiate and manage in-class interactions — streamlined operations with clear, real-time guidance.
Impact & Results
Through interviews, field testing, and surveys, we validated the design in real teaching scenarios and measured a significant improvement in teacher satisfaction.
User Interviews
Conducted 1:1 interviews with lead teachers in the early stage to understand real teaching behaviors and operational habits.
Field Testing
Deployed the prototype in a waist-up recording environment and observed teachers' real-time usage, focusing on usability and interaction flow.
Survey Study
Collected structured feedback post-launch to evaluate usability, learning curve, and overall satisfaction.
User Satisfaction Score
in Satisfaction
What I Learned: Reflections on a 0-to-1 Journey
The biggest lesson: in EdTech, interaction design only works when it's aligned with the pedagogy. Technology and design had to serve the story, not the other way around.
Designing for conflicting needs also stretched me — the vivid, stimulating world children need sits directly against the calm, low-load environment teachers need to work efficiently.
Addressing the isolation and fatigue built into remote learning is what mattered here — not building a better video player, but a space children wanted to be in.