Karan Mhatre

My Role and the Design Process

We decided that this project required research and understanding into the current behavioural patterns of the users - the teachers, and the students, because the project required a broad understanding of the process and this was a critical business function.

1. Discovery Phase (Strategic)

• 1.1. User interviews
• 1.2. Contextual inquiry
• 1.3. Trial classes
• 1.4. Competitive analysis
• 1.5. Insights and feature prioritisation

2. Design Phase (Tactical)

• 2.1. User flow diagram
• 2.2. Wire framing, Prototyping, and User Testing
• 2.3. Interface design
• 2.4. Delivery

1. Discovery Phase

We planned a two week discovery phase - during which we gained insights that would help drive design and product decisions. We first created a list of objectives, that questions that we needed answered.

1.1. User Interviews

We conducted interviews with 5 students and 5 teachers. The goal was to understand what worked and didn't work with respect to the current classroom experiece. We also inquired into how their experience has been with group classroom settings (in tution classes, or school).

1.2. Contextual Inquiry

Contextual inquiry helped me derive insights into a teachers' work through observation. This revealed insights about their process that hd not come across in the interviews.

I contacted 3 teachers and asked for permission to sit in the classroom during their online class. During this time, the teacher shared their screen with me. I was able to clearly see not only how they used our product, but also what additional/external resources they used.

Upon sharing this idea with the design team, their interest piqued, prompting their participation in upcoming sessions. This allowed them to delve into the teachers' and students' perspectives, enriching their design approach.

My Design Class with students: Since our students build apps, the teaching team reached out to me and asked if I could conduct a product design session to help the kids understand basic design principles. This helped me tremendously in understanding the pain points of managing an online classroom of kids.

1.3. Trial Classes

We reached out and shortlisted 4 students to attend a trial class with a teacher on Google Meet. I, along with the product manager shadowed the teacher in these classes.

This allowed us to recreate a close-to-real scenario to the product we were building and gave us an opportunity to see how our class curriculum worked in a group setting.

1.4. Competitive analysis

Good Designers Redesign, Great Designers Realign - A List Apart

I started by reviewing the two most popular platforms for video conferencing - Google Meet, and Zoom. Since teachers and students were familiar with these two platforms (due to virtual schooling during COVID), we wanted to use this familiarity to make our interface as simple as possible.

1.5. Insights and Feature Prioritisation

At the end of the Discover Phase, we had a workshop with all the key stakeholders to analyse the research data and come up with a product plan.

Insights

• Students are easily distracted; Simplify student controls; minimize distractions.
• Students have a lot of questions and doubts; Introduce breakout rooms for personalized guidance.
• Students aren't comfortable with icons complex interfaces; Simplify screen sharing for students; add coach marks.
• Teachers utilised supplementary online tools like whiteboards and Google Images to enhance concept explanations.

The decision on feature prioritisation was made based on user insights as well as a feasibility analysis carried out by the engineering team.

Features and product ideas

• Teacher controlled video classroom
• Minimal student video classroom
• Breakout room
• Slideshows
• Coach marks and onboarding
• Multiple breakout rooms for group activities (Future phase)
• Dynamic slides that the students can interact (Future phase)
• More in-class rewards and celebrations (Future phase)
• Collaborative activities which multiple students can work together on (Future phase)

We also shared our suggestions and recommendations for the curriculum design team (who were in charge of designing the activities and training material for the group classes).

2. Design Phase

It was time to get tactical and put pen on paper (metaphorically, of-course).

2.1. User Flow design

I build the user flow diagrams for the new features we were looking to introduce. The purpose of this diagram was to help align the engineering team and other stakeholders on the specifics of the experience.

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

2.2. Wire framing and prototyping

Once the user flow was approved by the curriculum team, I created the wireframes and prototypes in Figma. At this stage, I tried a variety of different layouts and interaction methods.

I locked down on a framework that helped make the product match the user's mental model, as well as allowed for future features to be accommodated.

I relied on the established mental model of physical classrooms that teachers and students had been used to.

Key design challenges

• Build two unique experiences (teacher side and student side) while optimising for reusable components
• Student camera views to always be visible on the teacher side.
• Allow three modes of operation in the teacher side app - Camera view, slides view, activity view.

2.3. Interface design

I designed the platform using our existing design system.

2.4. Handoff and delivery

I met with the engineering team to explain the interactions and quick doubts. I prepared the files with specs in Figma. I did regular QAs with the team to ensure that there weren't any last minute surprises.

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]
• 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.

Over the next few months, we closely tracked key usage metrics, like breakout room usage, and ran follow-up surveys to help assist in the evolution of the product.

Learnings and Reflections

• The company saw the value in data driven decision making and gave me room for research. This allowed the whole team to feel more confident about what we were building. I learned how to take initiative and organise successful research sessions.
• This was one of the first project I did where I worked on a children's product. It was interesting to talk to kids and learn about their behaviours when it comes to apps and digital products. I had underestimated how well kids can understand interfaces.
• In retrospect, I would have collaborated even more with the curriculum team (The team in charge of how the class is to be run and what activities need to be performed). This would given me a better idea of the class experience - and I could've used this learning in the designs.