2021 - UX Design - WhiteHatJR

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
- Conducting User Interviews with students and teachers
- Conducting a Behavioral Study on the existing product
- Wireframing, and Prototyping
- Assiting the central design team in interface design
- Collaborating with developers on feasibility and final execution
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.

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


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.

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.


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,
- Slideshows
- Breakout Rooms
- Teacher initiated prompt for the student to share their screen

Wireframes
I decided to create wireframes for the following flows,
- Teacher side: Basic Camera Configurations (with slides and activity)
- Default Camera View
- Slides View
- Activity View
- Teacher side: Breakout Rooms
- Student Side: Complete Product
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: To be used during the Introduction and Wrap-up stages of the class
- Slides View:To be used while teaching with visual aids
- Activity View: To be used while the teacher or student performs an activity



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
- Teachers can add students to a breakout room.
- Teachers can listen in on the main room if required to make sure the students are behaving.
- Teachers can end the breakout room once done.
- Students cannot initiate breakout rooms themselves. Only teachers can.




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.

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.


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,
- 6-student support
- Multiple breakout rooms
- Collaborative activities which multiple students can work together on
- More in-class rewards and celebrations
- Dynamic slides that the students can interact with