Zoom for Teachers: A UX Design Case Study

Enhancement of the desktop version of the Zoom app to improve usability for teachers.

Design Hackathon — Jugaaadathon

Background

This is a project I did as part of a design hackathon — “Jugaadathon” conducted by GrowthSchool. It was a 48-hour event in which all participants were divided into groups of 5 people. The event started on Friday night and ended on Sunday night. Each team was given five problem statements, from which we had to choose one and work on it. This event was honestly the most exciting thing I’ve done in this field.

Our Team

Each one of us had never met or spoken to one another before this. We got along well right from the start. My team consists of Omna Gupta, Ishita, Vidula Khera, and Nikhil R and myself. You can check out this case study on their accounts as well.😁

Problem Statement

Due to the pandemic, Most of the schools adopted online tools such as zoom to teach and interact with students. But these tools are not able to recreate the actual interactive experience for a teacher to manage the students. Create a student-teacher classroom experience for the Zoom app to help teachers monitor and control classroom teaching.

Why did we choose this?

Each of us had our fair share of experience on zoom. We knew that this was a really serious concern now as schools didn’t have a lot many choices to tackle the pandemic and continue teaching students.

• This problem statement to make a virtual classroom more interactive was very relatable.
• The enthusiasm in each one of us when we were discussing this problem statement played a key role in deciding.
• To stay on the timeline, we thought Zoom will have enough insights available online for the desk research.
• We all could relate as either our cousin/siblings are in school or we know a few teachers who are struggling.
• In one round we all spoke about why our favourite PS should be chosen and worked upon. During this process, we all kind of tried to disprove each other's reasons. This helped us in gaining more clarity on the reasons as to why the Zoom problem should be taken ahead.

Plan of Action

We planned out what we needed to do once we had all the reasons for choosing this particular problem statement. We had to present this in a review with the panel the next morning at 10 am.

• Desk Research
• User Interviews
• Empathy Mapping
• User Journey Mapping
• How Might We Questions
• Ideation
• Wireframing
• UI Design
• Final Presentation Video

Timeline and Roles

Timeline, Tasks and Roles

We had an even tightly scheduled timeline but this is the one that actually happened. But hey, we still completed it on time 😁

Desk Research

Photo by Scott Graham on Unsplash

Why

Desk Research was the most prioritized method of research for us because the existing data has a lot to contribute in terms of us understanding the users and their behaviours in general.

We split up our research among ourselves.

• Omna handled the research on students
• Ishita handled the teachers' research.
• Nikhil and I handled Competitor Analysis.

Teachers Research

We looked into various documents and articles. We shared all our insights and information on one Google Doc.

Zoom is failing teachers. Here's how they would redesign it

A professor explores why Zoom classes deplete her energy (opinion)

Statistical Modeling, Causal Inference, and Social Science

Aims:

• Students should focus on the class or be attentive enough to understand what is being taught.
• Some way to distinguish between comments, questions and DMs. Some teachers get confused while switching between them.
• Need a way to highlight students who raise their hands.
• Some way to access documents quickly
• Media-rich presentations directly instead of playing a video while screen-sharing

Insights

• No efficient way to take attendance or rollcall.
• Unable to figure out who is talking while the screen is shared. Have to constantly switch to participants list to check who is talking.
• Eye gaze can’t be tracked like in a real classroom where the teachers could tell if a student was attentive or not
• Need to drop into each breakout room to speak about the same thing over and over
• Switching chats every time some student DMs.
• Students turn off their video. They can’t know if the students are still there or not.
• Students are frustrated with all their teachers having to learn the intricacies of Zoom
• Constantly switching between screens to check on the students.

Students Research

Although our problem statement focuses on the teachers’ side, we had to do this because the students’ perspective on why they behave in a certain way and what it is that is not sitting right with the teachers was an important thing we had to address.

What Students Are Really Thinking About Online Learning

Survey on online and distance learning - Results

Insights

• Students multitask during their classes, they chat with their friends on the call or some other platform
• They miss things like learning tools, desks/tables, chairs, library when they really need it.
• They surf the internet while attending online lectures.
• The students’ homes are not a learning environment like at school, where there are teachers and other students.
• When the students are surrounded by all these other temptations like phones or other electronics, they lose any will to study.

Competitor Analysis

Competitor Logos

Nikhil and I did a competitor analysis to get an idea of how they function and what was working for them that wasn’t for Zoom. We also made a note of what features they offer that wasn’t on Zoom.

This was an important decision to do because from our desk research we had found that teachers were moving to different platforms from zoom because of its limitations and/or ease of access on other platforms.

Some other platforms we researched were:

• Google Classrooms
• Google Jamboard
• Microsoft Teams
• Airmeet
• Skype
• Adobe Connect

What Is Lacking In Zoom

• Zoom features are very hidden. We can bring many features out of the “More” or “Advanced Sections”
• An attendance system. This is obvious because Zoom is not primarily for teaching.
• Create teams and channels for different classes.
• Timed Quizzes for students to access during the video call. It has a polling system, but for only one question.

Target Users

We determined that it was wise to tackle this through age groups of students. Since our problem statement mentioned school teachers, we considered only schools as our focus. All other teaching centres and tuitions were out of the context for us now.

Why did we rule out age group below 13?

• Lack of self-motivation and more adult supervision is required

Why did we rule out age group above 17?

• Firstly, we had to focus on students from schools. Second, college students are more focused on their work as they have their careers to think about going forward. Even teachers aren’t that concerned in colleges.

So, 13–17 was our focus. They are tech-savvy and mischievous. Therefore, teachers have a tough time controlling them. This is also the age where discipline is a real concern for teachers. The teachers teaching the student of this age group were our primary users now.

User Interview

Photo by Steve Halama on Unsplash

We contacted teachers they knew and some via their friends. We also did one interview with a student to understand their perspective. Since we were on a time crunch, we had no time to do a screening and determine who will be our users for the interview. We had to take a shot and honestly, it worked out great. We had some great insights because they all faced issues with zoom. Some of them even moved out of Zoom to other platforms just like our research suggested.

Insights:

Unable to figure out who is asking doubt. They have to always ask who is speaking

Never uses breakout-rooms. They were disappointed with the feature and how difficult it was to find it.

There is no active discussion most of the teaching is one way

Most of the teachers can’t afford graphic or writing tablets to track their thoughts which makes it boring because there are no new insights or scope of new doubts because it’s all in the limited presentations

In group discussions, if they are in a breakout-rooms, you can’t look at the students all at once which makes it hard to jump from one to another and then talk to all of them.

Cannot share content, media and links easily on Zoom.

Faces a lot of problem in maintaining the record for attendance as has to submit the number of present students every day.

There is no submission feature for assignments and documents

Relies on the family to understand the platform

Use Kahoot and Quizlet to attempt interactive quizzes but need 2 devices to stay online and attempt the quiz as well.

Doubts have to be mailed to teachers after the class as chat is disabled due to student’s nuisance

Empathy Mapping

We did Empathy mapping to know the user and their perspective. We consolidated our desk research and all the learnings from the interviews into this. This exercise helped us in removing our own perspective and get into the shoes of the user and know their pain points, how they feel, think, what they say, and do while using the product. We made one for both the student and the teacher.

Empathy Map for Teacher

Empathy Map for Student

User Journey

We chose to do User Journey to understand the touchpoints of our users with the app. To be in the users' shoes and understanding each step helped us understand our user’s insights and their gaps and motivations concerning the app.

We only made one map for the teachers because this was we needed to understand. Making one for the student was pointless as that wouldn’t solve anything.

User Journey Map for Teacher

How Might We Questions

We practised the How Might We to turn the gaps/challenges into design opportunities and make maximum possible HMW questions. Framing HMW’s helped us in ideating for some of the problems in this step itself. Although that is not how we typically do it, we did it anyway as we had a pretty good idea about the direction we wanted to take our solutions in.

How Might We Questions

Ideation

Photo by AbsolutVision on Unsplash

This was a very competitive step for us because each of us had ideas of our own that we thought were the best. We had quite a long discussion with our ideas and the rationale we had behind them. To be honest, I wanted to include many of the ideas into our solutions here but we decided to focus on some of the core issues that our users faced.

The ideas that we decided to include in our solution are:

• Attendance — Teachers have to update their peers and report about students daily attendance. Currently, they do it by taking screenshots. Generally, the class starts with the majority of the students and ends with almost half of the students present. They have to repeat the lecture for those who join late (students fool teachers saying they were present earlier but couldn’t hear the teacher)
• Broadcast Speaking in Breakout-rooms — This idea came to us when we reviewed our Voice Of Customers, where one user had mentioned that they had to drop into every breakout room to talk to the groups about the same thing again and again.
• Speaker Spotlighting — Some of the students ask their doubts while the teacher is sharing their screen. There were so many instances that spotlighting in zoom didn’t function properly and teachers had to check the participants' list to see who is talking.
• Quizzing — We’ve introduced a new feature in zoom where teachers can push quizzes to their students. We added this because teachers find students to be at least more attentive during activities than during lectures. This surely improves the interactive experience for the teachers and students.
• Dashboard — We introduced a new dashboard for teachers to access. The current dashboard is something that is not quite user-friendly and is mainly used by admins. We used an already existing layout to give the teacher a dashboard which they should be fairly familiar with and of course user-friendly.
• We brought out several features that are normally hidden in Zoom. There are so many such things we found that when used efficiently, teachers can have a much simpler way to manage their online teaching.
• (We also included one other feature here that we all thought was essential. We found this in feature in AirMeet. Although we never mentioned this solution during our hackathon event, we still included this in our UI. This was the separate chat and questions tab)

Wireframing

With the reasons mentioned above in the ideation stage, we moved forward to make wireframes. We used Whimsical to create our wireframes. We did the pros and cons of the wireframes by putting our points down, which we got from the research and assumptions. We brainstormed these ideas for nearly 2 hours. Reasons for the rejection are all mentioned below.

• The first thing we did was to make sure that these new changes and features that we bring in don’t disrupt the flow for users who aren’t teachers. So we brought in the concept of “Teach” in the home screen of Zoom. After discussing this concept with all our team members we decided that this is the first new feature that we are bringing in. A paid plan for teachers which gives them the teach option where all these new features and changes lie.

We had more wireframes that we rejected straight away as we were sort of deviating from the problem and bringing in new features which didn’t solve any problems. The images below show those. Some are funny features like “Throw Chalk” which was actually wrongly written as throw phone in the wireframe below 😂

Rejected Menu Feature List

We also rejected one idea of messaging students who didn’t answer in the quiz from the results popup as shown below. This wasn’t solving anything in my opinion.

Rejected Quiz Wireframe

UI Design

Coming to the UI, we started doing this along with the wireframe stage. Just that we started making UI after a few wireframes were fixed. One thing we wanted to make sure is that we never wanted to deviate from the current layout so much that the users would feel that too much has changed and that they would have to learn all these new things. We also deviated from our wireframes a bit during our UI Corrections before the presentation.

Homepage

Teach Section UI

• The Homepage of Zoom has the new “Teach” section here, which teachers can access through the paid subscription.

Dashboard

Dashboard

Channel Creation and Content

• The new dashboard that we’ve introduced here shows all things that a teacher might need for their class like the time-table, some quick notes, the schedule for the day
• We have a help section on the top right for any assistance using this new system
• We brought out the channels from the chat section to this dashboard and made some changes. We now allow teachers to create channels for say each class but then group them into subjects as shown above.
• The teacher can go into the channels and by clicking on the channel groups, she can access the repository for that group, where all the data for that group is available. Data like the files uploaded, the attendance record, quizzes, and assignments. They can even create quizzes in the quiz tab. We haven’t created those screens here because those screens aren’t necessary here to solve the users’ problem.

Attendance

Attendance UI

• The attendance system we’ve introduced can be accessed from the participants' section. The teacher can randomly push the attendance request to their students. They can even push it multiple times in the same session. We have VOCs that support our decision here
• The first screen is the teachers’ screen and the second is the students’ screen.
• The data should automatically save to the new teachers' dashboard

“my whole phone is filled with screenshots of zoom’s participants panel — Best way to show attendence to the cordinator”

“Bache bahut pagal banate hae . Pehle toh class mai aa jayenge aur phir class ke khatam hone time sirf adhe hee bache hote hein” — loosely translating to “students make us go mad. They show up during the start of the class but by the end of it only half of the students remain”

Breakout Rooms

Breakout Rooms Creation

Improved Breakout rooms view and features

• We’ve updated the breakout room with our idea of Broadcast Voice along with the currently existing broadcast message.
• We also brought out the breakout rooms into the participants' section by default. Currently one has to enable this feature in the advanced features section on the Zoom settings
• The All Rooms screen (3rd image) shows that the teacher can see all the rooms now instead of the current view, which is just a list of names. It also shows that one group is spotlighted. This can be a group presentation use-case. Here all other groups are muted and just that one group and the teacher are unmuted. When a group is not spotlighted, the members inside can talk amongst themselves, but the teacher will be muted. For the Broadcast Voice, the teacher just has to unmute themselves and speak.
• The teacher can step into each room just like they could before too. But they can now switch between rooms with just the drop-down menu. Clicking on All rooms will take them to the previous screen.
• Some VOCs to support this

“Meri class mai 70 bache hae aur mai 3 sections ko padhata hu , Aap soch sakte ho mai har group mai ja ja kar same hee brief dunja toh meri kya halat ho gyi. Meri halat chordo , Time kitna waste hoga?” — loosely translating to “ I have 70 students in one class and 3 such classes. Just think about it, I have to go into each group and brief them the same thing over and over again. Just imagine my condition. Actually just think about how much time is wasted doing this.”

Speaker Spotlight

Speaker Spotlight UI

• The speaker spotlight is the new update we’ve brought to Zoom where the speaker gets automatically spotlighted as a popup window.
• The students can raise their hands during the session, through which the teacher get the notification as shown in the first screen. The teacher can choose to unmute or close. Unmuting will popup the speaker and dim everything else. Closing the notification will send it to a list under participants as shown in the third image.
• The notifications are listed here. Clicking on them will bring up the popup and closing will remove the name from the list.

Quiz

Quizzing Feature Teachers’ UI

Quiz Students’ UI

• The quiz feature is newly introduced by us. The teacher can share a quiz they have prepared beforehand (in the dashboard) with the students to keep the engagement going on. This increases the interactive experience between the teacher and the students.
• All a teacher has to do is go into participants and click on “Share Quiz” and a popup will show all the available quizzes. The quiz just gets shared to the students and the teacher later gets the quiz result as seen in image 3.
• Image 4 shows the students’ screen during the quiz. It is a timed quiz and the students have to answer all the question under the given time. All settings for this can be changed from the dashboard, but this is not the scope of our project.

Our Figma Link if you want to check out the screen in higher resolution

Figma File

Final Presentation

Now that we had completed all the tasks, it was time for our final presentation. Each team was given 7 minutes to present everything they had done from start to finish. We not only had to present our solution but also explain our research and our decisions along the way.

If you ask me, that is a lot to talk about under 7 minutes.😅😂

To add to this seemingly impossible task, we had to do a video of this presentation. Yes. It wasn’t live. We recorded ourselves speaking while presenting sections of the project. Ishita handled all the research phase, Omna handled the wireframes and I handled the UI presentations. Vidula and Nikhil were in charge of creating the compiled video.

If recording ourselves fumbling in the presentation wasn’t enough embarrassment, we even had to speed up our videos to fit everything under those 7 minutes. If you’re thinking what I was thinking, then you’re almost right. Chipmunk Voice! 🤣🤣 But thankfully it wasn’t so bad either. I have Vidula to thank for that.

Final Presentation

Feedback From Mentors

Our Winning Moment

What’s Next?

What’s next? I slept for 18 hours straight after staying awake for almost 60 hours.😂

• All jokes apart, we would definitely revisit some of the UI screens to correct some flow issues that we noticed but couldn’t get to in time.
• We would definitely want to interview more users to get a better picture and expand our scope.
• Some interactive features that we couldn’t include due to the drift of focus like introducing subjects based symbol directory. For example, Math could have a directory of integral signs, trigonometric expressions, greek alphabet, etc.
• I would want to improve on the dashboard UI that we’ve created. I still feel that there is a lot of room to improve here.
• What we couldn’t do in this hackathon was a working prototype of all this. I am definitely going to come back to that and create one where users can use this new feature.
• From the above-mentioned prototype, we can do a usability test to determine if our users find our solutions helpful in any way.

Learnings

• I personally learned how we can function better as a team from this whole event. I couldn’t have possibly made it this far without my team with me at every step. So Teamwork is one thing that I take away from this.
• I learned that we have to prove our assumptions and hypotheses wrong instead of proving them right during our research and ideate stages. Subconsciously, I think we all bring in bias and that is something I will work towards.
• Although I have now learned to do some good research work, I still have to learn how to do such good research in such a short amount of time. It will definitely improve my skill in UX.

To wrap it all up, I would say it was a really great experience that we had with this Jugaadathon and I think I can speak on behalf of everyone for this. I would happily do this again and again. But not consecutively, I need my rest too.😅

Thank you GrowthSchool for this amazing opportunity and the support. You rock!🤟

If this article helped you in any way or you just found this interesting, I’d appreciate it if you can leave some claps and your feedback!