Designing a Real-Time Quiz System for Hybrid Classrooms
Industry
Edu-Tech
Client
My Classroom
Service
85” Touchscreen, Mobile (Android/iOS)
Date
March 2023
TL;DR
In 2023, I led the design of a real-time quiz system for MyClassroom, an edtech platform broadcasting lectures from a central studio to 49 city-based classrooms. The goal was to transform passive lectures into interactive experiences—without disrupting teaching flow.
We built an in-class quiz module that allowed instructors to launch quizzes via an 85″ touchscreen, while thousands of students answered in real time on their devices. The result?
🎓 +38% spike in attendance (40% → 78%)
📱 +42% increase in app time spent
🧠 Actionable insights for teachers on student readiness
Context
The Setup:
Renowned professors teach from a central studio equipped with an 85" touchscreen, while students attend from 49 physical centers nationwide.
The Gap:
There was no way for faculty to quiz students mid-lecture. Existing tools disrupted the teaching flow—teachers had to turn away from the camera, and students had no real-time engagement channel.
The Challenge
We needed to design a system that enabled:
Professors to conduct live quizzes seamlessly from the big screen
Students to respond instantly via the mobile app
Real-time feedback, gamified leaderboards, and low-latency performance
All without breaking the rhythm of teaching or requiring extra training.
My Role
I headed the product design team of 5 talented mid-level designers and collaborated closely with the AVP of Product, engineers, and educators. My responsibilities included:
Leading research and field observations
Facilitating design workshops and stakeholder alignment
Designing high-fidelity cross-platform UI for big-screen + mobile
Defining interaction patterns and a component system
Working with devs on handoff and implementation
Research & Discovery
We started by shadowing live classes and interviewing 10+ faculty and students. Here’s what we uncovered:
Professors often had to turn their backs to annotate, breaking engagement.
Students remained passive and distracted without real-time participation.
Tech apprehension was high—simplicity was non-negotiable.
These insights helped us shape the MVP around effortless control, a minimal learning curve, and high visual clarity.
User Stories (Selected)
As a professor,
I want to run quizzes without breaking lecture flow.
As a teaching assistant,
I want to upload notes and materials easily.
As a lecturer,
I want real-time student data so I can tailor my pace.
As a student,
I want to see my quiz score and ranking immediately.
Design Process
1. Synthesis & Prioritization
We conducted card-sorting and huddles with teachers to isolate core needs. We trimmed down to a feature set that could be delivered in 3 weeks.
2. Wireframes & Prototypes
We mapped two key flows:
How a teacher launches, controls, and ends a quiz
How a student joins, answers, and views results
We tested prototypes in real classrooms. This revealed the need for:
A movable quiz control panel (teachers could place it anywhere on the big screen)
A waiting screen that showed missing students in real time
High-contrast, legible components for large-screen readability
3. Visual & UI System
We designed:
Big-screen interfaces with grid-based layouts, large type, and white space for clarity
Mobile screens with reusable components and familiar metaphors
A modular system: timers, answer cards, question modals, leaderboards
The system respected accessibility and performance constraints across screen sizes.
Sample Screens
The prototype is attached at the end of the case study for your reference
Outcome & Impact
Attendance surged from 40% → 78% across centers
App engagement grew by 42%, showing deeper classroom attention
Teachers received real-time attendance + excitement cues (e.g., student bubbles, live join count)
MVP shipped in under 4 weeks, hitting all major success metrics
Collaboration & Trade-offs
We scoped the MVP tightly—scrapped many “wants” to deliver on core “needs” fast. I worked closely with engineers to define:
How quiz start trigger a broadcast to devices
How timers, attempts, and leaderboards sync in real time
Responsive layout behaviors across classroom screen types
Key Learnings
Design for real-world context: Testing on the actual 85″ screen revealed UI issues we never saw on Figma.
Clarity is king: High-res visuals, generous spacing, and contrast were critical for a luxury-grade learning experience.
Systems > Screens: Every component was designed to scale—both visually and technically.
Final Reflection
This project sharpened my system thinking and taught me how to scale product design for real-time, high-stakes environments. It’s a project I’m proud of—not just for what we built, but how we built it: fast, collaborative, and always user-first.
