Role: Sole UI/UX Designer & Researcher
Tools: Figma, Miro
Designing a Zoom feature for Preschool and Kindergarten teachers who manage online classes during the pandemic.
Disclaimer: I do not work for Zoom. This was a personal project I decided to pursue in order to help Early Childhood Teachers.
*Early Childhood - Preschool to Kindergarten
Upload through Google images.
Select specific items and add them to a meeting.
Quickly access and present your media through the media sidebar.
Minimize the presentation view so you can focus on the participants.
Quickly reorder the items in your sidebar by dragging them.
This unique and new feature can help Zoom stand out from competitors.
Users would spend more time on the Zoom App
Zoom's business model focuses on selling subscriptions to large organizations. Since this feature is specific to presentations/facilitation, it would cater to large organizations that need to run meetings.
Early childhood teachers manage children with short attention spans and must learn to adjust to technology for both the students and themselves. I was curious to see how teachers adapted to a remote learning environment and what are their biggest struggles.
To learn more about how Early Childhood Teachers manage online classes and their struggles, I utilized multiple research methods. I conducted interviews, sent out surveys, read articles, and looked through the online communities on Reddit. These were my main findings:
Most teachers utilize Youtube videos, songs, and visuals for their classes. This includes opening multiple links on their computer or showing illustrated cards to their cameras.
Preschoolers and Kindergarteners have short attention spans, so many teachers have trouble maintaining students' focus in a remote setting.
Some teachers brought up how screen sharing takes a while on Zoom, because they would need to find the link, open it up, and share their screen - which would result in losing their students' attention.
My design process consisted of creating sketches, wireframes, and higher fidelity screens and then testing them out with users remotely. I tested out different flows and designs and continued to make changes and improve my project based on user feedback.
Teachers brought up cases where the feature would be useful for them, which helped provide more clarity of the problem.
Teachers often get frustrated managing multiple tabs on their browsers - they would sometimes lose a link they wanted to show, click the wrong tab, or last-minute search for a link they forgot to open.
Teachers liked the feature because it is useful and convenient for managing virtual classes. Many users noted how convenient it was to present media during meetings:
"I feel secure because I have everything at my fingertips!" - User talking about the media sidebar
Analyzing how users interact with elements helped me cater my designs specifically to Early Childhood Teachers.
There was the most friction on parts that lacked illustrations to help guide the users. This taught me that Early Childhood Teachers need more clarity through the use of visuals and descriptive text.
Here is a walkthrough of some of my design decisions.
In one round of testing, I presented two different versions of how a user would add media to their gallery.
The user selects what media type they want to upload and then a modal pops up, which displays the different methods of uploading.
The user hovers over the media type they want to upload, which then expands another dropdown where they can hover over and click the method of uploading.
liked the illustrations in Version 1
liked the efficiency of Version 2
in general, were stuck when there were no illustrations in the prototype
Based on the testing results, I settled on a design that kept the efficiency of Version 1 but incorporated the same illustrations from Version 2.
had trouble quickly differentiating between different media types, so I added icons and logos for easier differentiation.
In the media sidebar, the user can quickly access and present the media they uploaded for the live meeting. Here are the results I used to back up my decision to design the media sidebar.
need to share a lot of different media when running virtual classes
quickly play videos or show a picture when their students get distracted
expressed frustration in managing multiple tabs during classes
In the end, we want the feature to be successful. Here are some measures of success:
Will this new feature help maintain the current customers?
Can this new feature attract more organizations to use Zoom?
Will this new feature increase engagement with the app?
This project allowed me to design for a user group I had little knowledge about. I learned so much about the struggles of managing preschoolers and kindergarteners in a remote setting.
Throughout this process, I mainly tested with the same teachers so they became pretty familiar with my solution. I would like to test with new teachers in order to improve my designs.
I would like to implement the feature and then do in class testing in order to see how the feature helps teachers manage distractions and facilitate their classes.
For this project, I focused on a desktop version, but I would also like to work on designing for mobile and tablet displays.
I was able to improve my Figma skills and really analyze Zoom's design components. I made it a goal of mine to follow Zoom's design system as close as possible.
I am also proud of how I was able to come up with a solution that many of the teachers enjoyed and expressed how it would make their lives easier.
Made with 💖 by Katherine Ngo.