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 zero-to-one 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
Completion rates for recorded classes ran as low as 30–50%. Research and stakeholder interviews pointed to one pattern: without the peer presence and environmental cues of a real classroom, children experienced screen fatigue and isolation.
Lack of Interaction
Students feel disconnected without real-time engagement.
Boredom Fatigue
Long lectures and passive learning lead to drop-offs.
Sense of Isolation
Lack of peer interaction and classroom community.
Working with the content team, it became clear that adding quizzes wouldn't fix this — the environment itself was the problem. Our hypothesis: wrap the learning in a narrative so it feels like play, and the friction drops.
Primary Persona
Leo
Needs
- To feel noticed and valued while using the app
- Clear visual instructions and cues
- Rewards that arrive in the moment
Frustrations
- Loses focus during 45-minute video lectures
- Feels alone in front of a static screen
- Finds digital worksheets boring and repetitive
"I don't like video classes. The teacher just keeps talking, and I get bored."
Leo, 1st grade
Engagement in K-12 online learning is driven not only by teaching quality, but by interaction and peer companionship.
That triggered our first pivot: we dropped the "optimized video player" framing and moved to a story-led curriculum, with the interface built around narrative arcs rather than playback controls.
| 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.
Leadership backed the direction as the differentiator the business needed — but it introduced real complexity: real-time video, AR overlays, and multi-user syncing, all within device and cognitive limits.
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.
Immersive Classroom Learning Flow
Students get to know each other
Choose a class leader to guide the session.
Define the theme and objectives for the class.
Share learning materials with students.
Capture a moment and build connection.
Students speak in order, one by one.
Students speak at the same time.
Randomly select students to speak.
Engage with questions and instant feedback.
Choose a student assistant to help the class.
Interactive bell to resume the class.
Open the treasure box and celebrate achievements.
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
Attendance decline reduced by 4.3%
Attendance completion rate increased by 9%
Overall completion rate varies across grade levels
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.
User Feedback
Evaluation Metrics (5-point scale)
Key Takeaway
Unlike overall ratings, the interactive experience received unanimous positive feedback from both students and parents, achieving the highest score of 4.79 / 5.
"My child would give the interaction 1000 points. Parents noticed how engaged they were. During activities like selecting a class leader, kids stood up and raised their hands — they were eager to participate."
— Grade 1 student's parent
"Throughout the lesson, students were highly engaged and eager to participate. The experience felt new, the visuals were very appealing, and most kids would really enjoy it."
— Grade 6 student (female)
Reflection & Next Steps
Zero-to-one work here meant constant negotiation with business and engineering: designs had to serve pedagogy while staying within technical and resource constraints. The designer's job is to deliver the best possible experience within those constraints; otherwise even the most compelling ideas remain conceptual.
Next steps identified through follow-up research:
- Optimize interaction flow: improve answer feedback and waiting states for smoother, more responsive interactions.
- Enhance feedback mechanisms: introduce more contextual and personalized feedback for student responses beyond generic evaluations.
- Strengthen attention design: refine AI-driven calling and highlighting mechanisms to make "being noticed" more memorable and effective.
- Evolve reward system: expand beyond basic incentives with progression, competition, and richer reward layers.
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→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.