Zoom Media Gallery: Designing for Early Childhood Teachers

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 teachers need to quickly incorporate and organize different tools and content in order to keep young children engaged during virtual learning.

*Early Childhood - Preschool to Kindergarten

The Solution: Zoom Media Gallery

A feature where users can upload different forms of media ahead of time and then quickly access and present the media during Zoom meetings.

Upload different forms of media to your personal gallery for future meetings.

Upload through Google images.

Add media to your meetings ahead of time.

Select specific items and add them to a meeting.

Media uploaded to a meeting can quickly be accessed during the live meeting.

Quickly access and present your media through the media sidebar.

Minimize the presentation view so you can focus on participants.

Minimize the presentation view so you can focus on the participants.

Reorder the items in your sidebar.

Quickly reorder the items in your sidebar by dragging them.

BUSINESS IMPACT

What can this feature do for Zoom?

Competition

This unique and new feature can help Zoom stand out from competitors.

Increase Usage

Users would spend more time on the Zoom App

Cater to large organizations

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.

The Process

BACKGROUND

Why Early Childhood Teachers?

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.

USER RESEARCH

Interviews, surveys, articles, & Reddit.

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:

Early Childhood Teachers...

need to share a lot of different media when running virtual classes.

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.

have trouble keeping their students focused in a remote environment.

Preschoolers and Kindergarteners have short attention spans, so many teachers have trouble maintaining students' focus in a remote setting.

"The students are in the comfort of their own home, so I am competing with a lot of distractions." - User Interview

wish there was a faster way to share content while facilitating classes.

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.

"I use Youtube to distract the kids, but it takes a while to screen share." - User Interview

Test, iterate, & repeat.

From Sketches to Screens

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.

Takeaways

More clarity of the problem.

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.

Did users like the feature?

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

Design considerations.

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.

TEST, ITERATE, & REPEAT

Design Decisions

Here is a walkthrough of some of my design decisions.

Add Media

In one round of testing, I presented two different versions of how a user would add media to their gallery.

VERSION 1

The user selects what media type they want to upload and then a modal pops up, which displays the different methods of uploading.

VERSION 2

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.

The Results

3/4

liked the illustrations in Version 1

4/4

liked the efficiency of Version 2

4/4

in general, were stuck when there were no illustrations in the prototype

The Final Design

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.

Media Type

1/4

had trouble quickly differentiating between different media types, so I added icons and logos for easier differentiation.

Media Sidebar

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.

4/4

need to share a lot of different media when running virtual classes

4/4

quickly play videos or show a picture when their students get distracted

3/4

expressed frustration in managing multiple tabs during classes

WHAT ARE THE OUTCOMES WE WANT TO SEE?

Measures of Success

In the end, we want the feature to be successful. Here are some measures of success:

01

Increase in retention rate

Will this new feature help maintain the current customers?

02

Increase in conversion rate

Can this new feature attract more organizations to use Zoom?

03

Increase in engagement

Will this new feature increase engagement with the app?

A CLOSER LOOK

The Final Design

01

Upload media to the gallery

02

Select items for specific meetings

03

View the media in meeting details

04

Present items during meetings

A fun and challenging project.

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.

Next Steps

Test with new teachers

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.

In Class Testing

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.

Responsive Design

For this project, I focused on a desktop version, but I would also like to work on designing for mobile and tablet displays.

Reflection

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.

katherinengo13@gmail.com  |  LinkedIn