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 the Lead UX Designer, I led the zero-to-one design of "Immersive Classroom." Our vision was to completely reimagine remote learning — moving away from static video grids and passive consumption toward an interactive, gamified platform using storytelling and multi-user interaction to simulate the dynamic environment of a physical classroom.
We had to design a dual-sided platform: the student experience needed to feel like an immersive game that captured fleeting attention, while the teacher experience needed to be a powerful, streamlined command center. The ambition was high — we weren't just redesigning a UI; we were attempting to fundamentally change how children interact with educational content through their screens.
Discover & Insight
Students were dropping off from online classrooms with completion rates as low as 30–50%. Through user research and stakeholder interviews, a clear pattern emerged: traditional online education suffers from a profound lack of interactive elements. Children experienced severe screen fatigue, feeling isolated in a digital void without the peer pressure and environmental cues of a real classroom.
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.
Collaborating closely with educational content creators to unpack the pedagogy, we realized that simply adding quizzes or digital flashcards wouldn't solve the core issue. The environment itself was uninspiring. We hypothesized that if we could mask the learning process within a narrative — making it feel like play — we could drastically reduce the cognitive friction of remote learning.
Persona: Leo — 6-year-old, 1st grade
Wants: feeling valued while using the app · clear visual instructions and cues · real-time rewards.
Frustrations: gets easily distracted during 45-minute video lectures · feels isolated staring at a static screen · finds traditional digital worksheets boring and repetitive.
"I don't like the video classes because I can't see what my friends are doing, and the teacher just talks the whole time." — Lele
Engagement in K-12 online learning is driven not only by teaching quality, but by interaction and peer companionship.
This led to our first major pivot. We discarded the idea of an "optimized video player" and shifted our entire product strategy toward a story-led curriculum. The UI and UX had to seamlessly integrate with narrative arcs, requiring much tighter collaboration between design and content teams. We weren't just designing buttons — we were designing virtual worlds.
| 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 |
Finding Signal
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.
This signal validated our hypothesis: immersion drives retention. We doubled down by integrating AR-driven interactions and gesture recognition. Instead of clicking a button to answer a question, students could use hand gestures the camera would recognize, triggering AR stickers on their screens. This physical-to-digital loop created a highly active learning posture.
Learning becomes engaging when it feels like an experience, not a task.
When we presented this direction to the executive team, the reaction was overwhelmingly positive — it was the differentiator the business needed. However, it introduced immense technical and UX complexity: real-time video, AR overlays, and multi-user syncing without overwhelming device processing power or the user's cognitive load.
Content
Immersion
Make learning feel like exploration.
Interaction
Engagement
Increase attention & participation.
Structure
Scalability
Support diverse teaching scenarios.
System Architecture
The immersive classroom adopts a multi-layered interface to support rich learning content and diverse interaction methods. This significantly increases both technical and UX complexity, making a scalable and unified product 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
Designing engaging and contextualized learning experiences through interactive learning content and interactive assessment. By integrating traditional knowledge with contextualized learning, students learn through realistic scenarios, deepening their understanding and applying knowledge directly in the learning process.
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 Mode
High-frequency interactions with audio, video, and content tightly integrated.
2Role-Playing Interaction
Students actively participate through interactive role-playing scenarios.
3Engaging Interaction
Students' expressions appear on screen, strengthening peer connection.
4Instant Feedback & Reinforcement
Lightweight audio and video feedback keeps students focused.
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
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
In the 0-to-1 design and implementation of the immersive classroom, close collaboration with business and engineering teams is essential. The design must support rich pedagogical needs while remaining feasible within technical and resource constraints — a constant balance between ideal experiences and real-world limitations. The role of a designer is to craft the best possible experience within these 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
With the introduction of a new recorded-class model for immersive classrooms, there was a need to rapidly develop supporting teacher-side capabilities. To accelerate delivery, the initial version was built upon the existing teacher interface, where a generalized interaction publishing workflow was designed and extended — enabling flexible configuration and quick deployment of diverse teaching interactions.
Problem
During class, interactions require a lengthy workflow and frequent operation on the control panel. Meanwhile, teachers need to check notes while teaching, causing their visual focus to shift away from the main screen. This disrupts the interaction flow and results in a suboptimal student experience.
Due to the constraints of the semi-body 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 semi-body 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 semi-body 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 semi-body 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.
NPS Increase
in Satisfaction
What I Learned: Reflections on a 0→1 Journey
Building Immersive Classroom from zero to one was a masterclass in cross-functional collaboration. The biggest lesson: UI/UX cannot exist in a vacuum, especially in ed-tech. The success of this platform hinged entirely on aligning interaction design with the pedagogical goals of the educational content creators — technology and design had to serve the story, not the other way around.
I also gained a deep appreciation for designing dual-sided platforms with conflicting user needs. Balancing the hyper-stimulating, vibrant world required for child engagement against the calm, structured, low-cognitive-load environment required for teacher efficiency pushed me to expand my design vocabulary.
Ultimately, this project reinforced my belief that good design solves human problems. By addressing the isolation and screen fatigue inherent in remote learning, we didn't just build a better video player — we created a space where children actually wanted to learn.