Playground

Competitor secondary research showed that while there was a lot of concern for Kids’ social well-being, there wasn’t really a strong presence of social media product tailored for young Kids in the current landscape. Popular social media sites were geared towards the older crowd. Elementary school apps were surveillance based to share daily updates and miscellaneous selfies.

Surveys with nine parents gave insight that although all the Parents used social media and communicated with their friends, family and work via different forms of digital messaging, only 33.4% allowed their Kids to use social media services. They had reservations on age appropriateness, cyber bullying, strangers, and lack of reading skills.

And then dug deeper with empathy mapping to better understand the two users wants and worries, whom would ultimately make the decision to use the product.

The research showed us our end user would be the Kids with the permission of the Parents. The hard part- in addition to working within the constraints of a Teacher’s time to monitor, and gaining Parental consent- would be to make the Playground attractive enough for the Kids to want to play on it instead of doing their normal screen time activities.

I then took the major components from the mind map and put them into an effort/impact priority matrix. This helped visualize what to concentrate and move forward on. I aimed to build an ideal site, while giving attention to the fact that the school is running the platform, so they will have capacity constraints. I prioritized video based group activity chatrooms for our young Kids and whittled off single user activities or anything that involved too much reading and typing.

A feature roadmap further clarified and prioritized the must have features for the site, leading to a site map that mapped the new Playground within the existing Google Classroom.

With our product features in place, I started building out the Teachers’ task flow to set up the Playgrounds’ activities. Then, I went through the Kids’ task flow to navigate the Playground. I started the Parental task flow but then realized they would ideally really just be sitting close to their child, so there wasn’t a need for a separate flow.

Referencing the existing Google Classroom site and the two task flows, I mapped out the user flow, showing both Student and Teacher flows as one. I thought about what would let the Teacher create the activity for the Kids. And what freedoms the Kids would have.

After I had immersed myself in the world of Google Material Design, to keep constraints of designing within the existing Google Classroom, I created a simple styletile with just the Google iconic universal colors, Classroom brand colors and typefont.

I started my sketching working off the existing Google Classroom Peoples’ page, adding contact information buttons to connect the Kids’ outside of the Classroom. Next, I ideated on the Playground page. Parents had thought their Kids were too young for social media since they couldn't read. With this in mind, I focused more on video chatting, messaging with emoticons and stickers, and voice messaging.

I wasn't sure I had pinpointed the playground layout in my sketches. In building the digital wireframes, I copyworked the original Google Classroom to begin the login flow. It really helped me to build out the Playground using the Google Classroom components to launch off. I finally landed on a three column layout built off of the existing two column Classroom layout. The Playground was finally taking shape in the right direction. I continued to think Google-y and edited down, minimizing the extraneous features such as the bulletin board and single player activities in Google Kids Space, bringing the focus instead on interactive communication and play.

I then turned my attention to finetune the Playground activities card. Yes, it was built off a Google Classroom component but the hierarchy of information needed to be addressed.  Was it Kid friendly with all the words? I finally got it down to bare minimum.

I then designed a landing page to introduce the Playground to it's potential new users. Displaying all the UI components and features of the new site.

I moderated an animated high fidelity usability test in person and remotely for four participants- one Teacher, one Mom, one Dad, and one five year old Kid. Adult participants tested both the Teacher’s set up flow and the Kid’s play flow.

The goal was to determine if users could:

And then we moved onto the Student’s flow, where I had allowed myself to be more creative to embed a Kid’s playful spirit into the framework of the Classroom interface. Here, the users explored the playground in its entirety, experiencing the daily emotion meter, instant messenger chat, timed playground sessions, video group chatrooms and stories.

First to test was the five year old. She loved it, thought it was a live site and wanted to tell everyone she was invited to a party. Kept asking afterwards if she could go back and play, and when told it wasn’t real, asked if it could be real. I was elated.

The Teacher and the Mom both also had a strong positive experience in the Playground. Finally, the last participant, the Dad, gave a very difference reception. He thought it wasn’t minimal or Google-y or Kid-friendly enough. I was crushed.

I pushed harder to make “Kids + Friends” the priority feature even more prominent on the Playground. To make it easier for Kids to navigate- less words, bigger images, streamline and remove excess. I became ruthless and cut out the Stories feature. Although it was brought in as a getting you know you tool, in the end, it was just not interactive enough between Kids. I removed the already minimized single person activities. A new interactive Playground banner was put in its place, an area where the avatars display where the Kids are in their respective activities. This way, once they got to the Playground, they could quickly see where their friends were, and click to join them.

A virtual reflection of real life interaction.

Continue to work on responsive prototypes to reflect iterations. Consider adding even more personality to the Playground, separating more from Classroom. Test, iterate and repeat.

Working within constraints while seemingly prohibitive at first, can actually help focus a lot of new ideas that can turn out to be ideal solutions. Working within an existing and strong design system, having material design to fall back on as a design library was amazing. Having Google's newly launched Kid's Space to pull ideas from was lucky timing.

Another learning is that, even with the best intention in feature prioritization, it may still need finetuning to really get the point across. Testing and iterating is of utmost importance to ensure the design holds true and can deliver.