Karan Mhatre

2021 - UX Design - WhiteHatJR

Designing an online classroom experience for teachers

WhiteHatJR Classroom Design Hero Image

The Project

Company: WhiteHatJR (Now Bjyus Future School) - Provides online tutoring for school children (ages 6-14).

Timelines: December 2020 to February 2021 (3 months)

The Goal: WhiteHatJR had been providing one-to-one classes for students. In these classes, a teacher would teach a single student at a time. We wanted to launch a new classroom experience in which a teacher would handle four students. This will help us cater to a more price-sensitive audience.

Project: To revamp the existing online classroom and adapt it to manage a class of four students as well as fix existing issues. The product was designed only for the desktop since our students accessed it only from the desktop computers. I was to design the teacher side experience and the student side experience.

Team: A 2 member team consisting of a Product Manager and me as the designer.

My Role

Design Process

Teachers were already comfortable with the exisiting classroom product that they’d been using for one-to-one teaching. Hence, we needed to understand very well how the used the existing product.

My Design Process My Design Process

User Personas

There were two users I was servicing, the teacher, and the student.

Teacher Persona Teacher Persona
Student Persona Student Persona

Behavioral Study and Teacher Interviews

We asked 3 teachers to conduct 4-to-1 classes on Google Meet. We recorded the classes and reviewed them for insights.

Also, since our students build apps, I conducted a product design session with 12 students to help them understand design principles. This helped me tremendosly in understanding the painpoints of managing an online classroom of kids.

Picture Representation of an Online Teacher Picture Representation of an Online Teacher

Insight #1: We realised that students were not well equiped to handle classroom controls such as muting-unmuting themselves, and this led to some distractions in the class. We decided to keep the student controls to a minimum and let the teacher guide the controls from their side instead to minimise the need to non-learning related conversations.

Insight #2: The teacher needed to help out individual students with their assignment when they were stuck, and during this the other students would get distracted. We needed some form of breakout rooms where the teacher could have personal conversations with a few selected students.

Insight #3: Students had a difficult time understanding how to share their screen. This was necessary since the teacher needed to review the work being done by the kids. We decided to add coach marks that could be initiated by the teacher.

Product Research

We reviewed the two most popular platforms for video conferencing - Google Meet, and Zoom. Since teachers (and students due to virtual schooling) were familiar with these two platforms, we wanted to use this familiarity to make our interface easier to understand.

Google Meet Design Research Google Meet Design Research
Zoom Design Research Zoom Design Research

Classroom Flow

We were to work upon the existing class flow, meaning no changes in the curriculum or teacher training were to be made. We introduced three new features,

User Flow Classroom User Flow

Wireframes

I decided to create wireframes for the following flows,

Teacher Side - Basic Camera Configurations

It was important that the teacher could always see all the students in the class. There were three views we needed to take care of,

Default Camera View Teacher Side: Default Camera View
Slide View Teacher Side: Slides View
Activity Screen Teacher side: Activity View

Teacher Side - Breakout Rooms

To enable the teacher to provide a personalised experience to students we decided to introduce breakout rooms. A breakout room is a room the teacher can create to have private discussion with a selected few students.

This is important to resolve doubts and queries, as well as help students that are lagging in their class activities.

User Stories

Breakout Room User Flow Breakout room user flow
Breakout Rooms Wireframes Breakout room wireframes
Breakout Rooms Camera Views Breakout room camera views
Breakout room controls Breakout room controls

Student Side - Wireframes

The key difference between any other video conferencing platform and ours was that our call was governed/controlled by a single person (the teacher), while the students had minimal control.

The student side was to be kept minimal in terms of controls. Students could not control other students (like how GMeet lets users mute each other).

A lot of this was borrowed from the existing product. Just the camera views needed to be created.

Student Side changes Student Side changes

Final Designs

The visual designs were completed with the help of the central design team to make sure that there was consistency in the visual language.

Teacher side final designs Teacher side final designs
Student side final designs Student side final designs

Impact and Future Scope

Over 10k+ students use this classroom daily.

Using this feature, WhiteHatJr was able to launch a new business vertical that attract a significantly large new userbase.[Confidential data hidden]

This helped us stay ahead of our competition by providing a superior classroom experience to the student and teacher.

We received an NPS of 60 from teachers on this release.

We plan to add the following in the upcoming releases,