Identifying the Design Problem
The shift to remote learning, predominantly via platforms like Zoom, during COVID-19 has been tough for K-5 students and teachers. Traditional participatory elements are missing, prompting the need for interaction designers to find innovative solutions. Essential functions for a remote learning app for children would include…
Easy and simple tools for chatting, polls, and raising handsTop-notch security features so no one besides the students and teacher could enter the classroomA colorful, responsive, child-friendly interfaceVirtual replications of important teaching tools like visual aids, worksheets, videos and other media, games, and physical modelsEasy way for students to interact with each other and their teachersWays for students to express themselves and socialize
Competitive Analysis
Animal Crossing: New Horizons
Analogous Competitor
We chose Animal Crossing: New Horizons for its engaging incentive structure, opportunities for social interaction, and collaborative open-world environment. While it isn’t related to remote learning, it offers an ecosystem that kids love spending time in — we hope to learn from how ACNH mediates interactions and tasks.
Players can use craft tools to create their own buildings, characters as they like, allowing for personal expression.
Friends can join and collaborate with one another in their perspective islands. They may play, use their resources, compete, and explore with one another.
Animal Crossing: New Horizons successfully creates an immersive environment with characters that kids feel connected to despite its format as a traditional video game.
Zoom
Direct Competitor
Zoom is currently the most popular app for teachers and students to do remote learning during COVID-19, so it would be our main source of competition.
Zoom is a platform used by teachers, families, book groups, coworkers, city councils, and more. This can be a good or bad thing--the app is not designed for one specific purpose or audience, making it an imperfect solution for any specific purpose/audience.
“Breakout groups” are smaller sections of the main group meeting where a small group can have a discussion together and then return to the main group. Setting up breakout groups is very cumbersome and time-consuming for the meeting administrator.
ClassDojo
Direct Competitor
ClassDojo was designed to supplement an in-person classroom, not replace it, so it does not include any synchronous video calling.
Its functionality allows teachers to recognize students for “creating a positive culture” by “working hard, being kind, helping others or something else.” (source: https://www.classdojo.com/)
Allows students to express themselves by sharing a personal portfolio of their work along with photos, videos, and drawings
Has options for parents to get involved in the classroom and chat with teachers
Learning A-Z
Partial Competitor
Learning A-Z is an education app designed to help teachers to teach science, language, literature and so on. Its target customers are a part of ours.
3 types of instruction: whole class, small group and one-to-one interaction.
At-home tools designed for parents to engage in their kids’ learning.
Most of instruction is one-direction: from teachers to kids. Lack of channels for students to give feedback (if kids have problems or feel confused about homework) to teachers.
Hubs by Mozilla
Partial Competitor
VR classroom like setting that provides a refreshingly new perspective to online/remote learning possibilities.
Imaginative 3-d graphic environments are highly interactive and engaging through VR/AR/XR Technology
Teachers and students can communicate via chat and audio
Someware comes with tools like a pen and camera
Requires additional hardware such as an Oculus
Competitor Findings
Competitors show a divide between educational/virtual classroom apps for kids and enterprise-oriented video apps like Zoom.
Current solutions lack depth in virtual interaction for children's learning needs.
Optimal approach combines features from both educational and enterprise video realms.
Competitors explore innovative methods like virtual reality (Hubs by Mozilla) and immersive gaming (Animal Crossing: New Horizons).
Scaling complexities may hinder widespread adoption in public schools.
Children's educational apps prioritize colorful, animated designs with clear affordances.
User Interview Analysis
The next step involved gathering potential candidates to interview. Our project was made during the COVID-19 pandemic era which made it hard to gather potential users for interview. I had the opportunity to interview two educators and one student that fit into our K-5 grade demographic
Gathering and consolidating data
After my interviews, I along with my teammates: Alyssa Downs, Matthew Wolfgram, and Li Zhu, consolidated all of our data about what the common issues were amongst parents, students, and teachers in the fields.
Finding commonality
We found that teachers needed more engagement, students wanted more personalization, and that students need more socialization amongst peers.
Coming up with Possible Solutions
We sought to explore a more cohesive way to accommodate the collaborative needs of children at different grade levels and with different needs. Conversations with K-5 students, parents, and teachers conveyed qualms about the lack of feedback, variety, and personalization.
Implementation
We wanted to be responsive to those with different levels of connectivity and parental supervision or students that may need accommodations to help them learn most fruitfully. Next we went on to creating personas.
Personas
Based on interview results, my team created four diverse personas - two students (kindergarten and fourth grade), a second grade teacher, and a parent of a fifth grader. We aimed for representation across various demographics including language, socioeconomic status, and technology proficiency. To address concerns about socialization, one student was outgoing while the other was shy. Different genders were also represented. These personas were developed collaboratively by myself and teammates Alyssa Downs and Matthew Wolfgram.
Scenarios
Reserved Raquel
-
Raquel is nervous about her first week of kindergarten. It’s only been two days, and she is feeling timid, especially because of her limited English skills. The day before, her teacher Mrs. Dennis asked the class to bring an item the next day for show and tell. Raquel has a soft toy crab that she got at the beach over summer vacation. She loves her toy, but is dreading having to show it to the class.
Mrs. Dennis tells her students that she is going to give them a couple of minutes to record themselves talking about their items, and then they will watch them as a class. She explains that they are encouraged to have fun and express themselves using the recording features on their app.
-
Description text goes hereRaquel sees her screen change to show a view of herself, a red microphone button, a blue help button, and a few colorful buttons along the bottom of the screen. Raquel curiously clicks on one of the buttons and sees a bunch of colorful border options pop up. She settles on an animated border showing a tropical island and waves. When she clicks on the next button, she sees a bunch of stickers. She clicks on a sticker with a dolphin and it appears on her video display. She puts it on the left side of the screen. Then she sees a kitten sticker, and she puts it on her head, which makes her laugh.
Suddenly, her teacher appears on screen and says they have one minute left, and to click on the “raise hand” emote on their screens if they are having trouble. Hurriedly, Raquel clicks on the red microphone button and begins her presentation. Holding up her toy crab, she explains that she got it at the beach with her family in the summer. She clicks a green check button, and her video is submitted.
-
She watches with anticipation as each of her classmates’ videos are shown. Suddenly, her teacher announces, “Ok, next we have Raquel,” and Raquel’s video begins. Raquel sees her video playing, and on the side of the screen, she sees the faces of her classmates watching her video. At the end, her teacher says, “Wow, that sounds like a fun vacation!” Her classmates clap for her and send her stickers, which appear on her screen in little bursts. As the next student’s video starts, Raquel realizes that recording her video was fun, and her classmates’ and teacher’s reaction made her feel proud of herself. She looks forward to the next time she will be asked to share with the class.
This Scenario was created by Jia
User Flow Diagram
I crafted a user flow diagram based on scenarios, sketches, and storyboards. It maps out student interactions, from accessing the Homescreen to engaging with features like assignments, messaging, socializing, and studying, as well as interactions within the classroom environment.
Paper Prototype
After establishing the user flow diagram, my group created lo-fi paper prototypes to explore detailed interactions. These prototypes helped us conduct usability tests and identify areas for improvement. We divided interactions for personas Reserved Raquel and Overachiever Owen among us. I focused on developing a paper prototype for the latter half of Reserved Raquel’s scenario. It involved her presenting a video in class for show-and-tell, receiving encouragement from classmates and teachers, receiving supportive stickers, and getting a private message from the teacher, leaving her happy and relieved.
Wireframes
After getting feedback from various user tests, our team focused on creating various wireframes using Figma.
This was our initial iteration
Link: Wireframe
Iterations
Homeroom Screen
We received feedback on the home screen in my paper prototype usability tests that the screen might be too complicated and unfamiliar to elementary students, since it resembled a social media feed. When redesigning the page, we made the community section of the page more reminiscent of a bulletin board, and included information that students found helpful on whiteboards in their classrooms—the daily agenda and upcoming events.
Main Lecture Room
This includes a view of classmates, a larger view of the teacher, and buttons that open tools to send reaction stickers and take notes. During our usability tests, we found that some of the features weren’t as easily accessible as we thought. We found that creating a react or sticker like emoji would help students find the send sticker function. In our final iteration, we decided to keep the section on the the middle of the screen and vertically (as seen above).
Video Recording Room
During the usability testing, we found that users thought this section was really fun for the students and the teachers using it. However, some concerns that we had to address was to make sure we could reduce distraction while we made sure the main focus was on creating the video. So we changed the screen layout to make the video the main focus with a smaller menu for effects on the left hand side of recording.
Hi-Fi Prototype
For our high-fidelity digital prototype our team used the Figma software for each of our interfaces. While others on my team worked on other areas of the app, my focus was on the classroom. We used the collaborative tools in Figma and our design style guide to make sure that we kept the app experience cohesive in its visual look and its functionality.
Main Lecture Room
-
Description text goes here“I feel like the reactions were lacking, the clapping and the thumbs up so more symbols. Maybe more symbols for i agree, i disagree, i'm confused, clapping and thumbs up seem to be the same thing.”
-
Description text goes here“I love Flipgrid because I think it’s a fun way for kids to talk about their art. They like to make videos, they like to add borders, they like to add stickers. … They can add their little personalization touches. So for instance, some of my students, they like to put borders around it. Some of them like to put a rainbow gradient. Others, when they’re talking, they want a little unicorn sticker to sit right on their shoulder. I think having the choice, you know? The choice is so important to students. They want to be able to personalize, they want to be able to have that choice for how they want to communicate. … I know that some of them told me they don't like presenting, but presenting for them was a lot easier when they were doing it virtually instead of standing in front of the class.”
-
DescriptI was inspired by these interview comments to design a feature in Homeroom where students could record themselves giving a presentation and then submit their video and watch the presentations as a class. It was important to include options for students to personalize their videos and have fun to make it an engaging and positive experience. One of our scenarios was about a shy kindergarten student who was doing a presentation for show and tell. I decided to design the video recording screen based on that scenario.ion text goes here
Click on image or here to view main lecture
Main Lecture Screen
Ability to view menu to toggle to and from settings
Sticker function (activated by tapping the pink sticker)
Sending sticker to selected classmate
Style Guide
Our team created and decided to move forward with this style guide
“We decided on a simple design style guide for my team so that we could create visually consistent interfaces for our app. We looked for modern and child-friendly colors, fonts, and design inspiration. When reading about child UX research, we learned that UX patterns for children are different from UX patterns for adults. For example, adults might find a recurring character to be patronizing or irritating, but kids tend to appreciate characters. This research led me to create a series of stylized school-themed characters for the app, including a smiling apple for the logo. Children typically also like bright colors and illustrations. I tried to include a range of fun colors without being overwhelming.”
Initial Sketches
Final Logo Designs
Final Style Guide
Final Thoughts
Our app, Homeroom, aimed to recreate classroom experiences for students aged 5-10, prioritizing simplicity and creative engagement. Different from Zoom or Microsoft Teams, it emphasized child-friendly aesthetics, incorporating mascots and bright colors. The digital prototype focused on key classroom interactions, with plans for future enhancements including emoticons, improved sticker sending, and additional features like flashcards and note-taking screens.
You can view the deck slide here