2020 / Design Systems

Inclusive Design - CubbyClass

2020 December - 2020 March

10 weeks

My Role

Interaction Design, Motion Design


Leon Zhang, Joyce Lin, Chandler Simon, Ariel Chang.

Project Overview

As part of a class project for Design Systems, our team created Cubby Class is an online peer to peer platform designed to help relive stress of parents educating their children through helping children develop autonomy.

Click below to view full product trailer

A Focus on Inclusive Design Features

Tablets are actually a very friendly technology for younger children and it’s frequently the first device they learn to use because they are able to use their hands for the interactions rather than a mouse or trackpad that requires finer motor control.

Color blindness accessibility features.

We created different color themes to assist people with various states of colorblindness. The screens here that are looping demonstrates how the different color theme will look from their point of view. In these themes, some colors are changed for better contrast, and certain buttons and components are changed for better contrast in relation to each other.

Large Text Support for low vision

Some people with low vision may need additional support in the text size, so we created options to change the text size in the interface. This also gives the opportunity for everyone to customize the interface to their comfort level.

Native Language Support.

This platform and voice assistant can be formatted in different languages, as well as having a translation option on text that other parents put in.

Full process walk through

1.0 Research

Prompt: Design a product for remote use during Covid that shows understanding of inclusive design.

1.1 Initial Design thinking :

Covid is a serious issue impacting many lives around the world. Designing an impactful product means narrowing down the scope first.

1.2 Deep dive into the problem space (Quantitate Data):

With our topic narrowed, we drafted out our first round of online surveys to understand what challenges parents and their children faced together. These surveys were designed to gain a holistic approach without going too in-depth.

1.3 Qualitative Data (Group Interviews)

We dived deeper into the problem area by interviewing 8 parents individually, and parents with their children together. Each session lasted approximately 30 minutes here are some questions we asked them :
For Children: What is your favorite activity to do with your mom/dad?
For Parent : (If applicable) How is the parenting dynamic between you and your partner during quarantine?
For Parent: What activities do you do with your kids at home before quarantine?

1.4 User Needs

From our interviews, we highlighted quotes and stories that reflected data and trends that were common in our survey to understand user needs and pain points.

1.5 Synthesized Insights

Our findings both quantitive and qualitative are synthesized together using affinity diagrams to create insights that directly relate to our user pain points.

1.6 Proposed Problem Statement

After identifying our users, and user needs we proposed our initial problem statement in order to start defining our design and conclude our initial research.

2.0 Design

2.1 User Personas

From the synthesized interviews and surveys above, multiple personas were created to minimize stereotyping and to better identify our exact relationship with specific stakeholders.

ThePrimary Persona will be the parent and the child, they are the target user. They are grouped together since they have a very tightly knit relationship.
The Secondary Persona will be the teacher since they will also be impacted directly or indirectly by a product or design we are proposing.
The Excluded Persona is someone who is not our user group. However, it is important to consider who might this group be, to understand the potential limits of our prosed designs.
Finally we created an Anti Persona, although usually not as important, when designing for children it is crucial to consider who do we want to keep away from our product.

2.2 Place-ona and Potential harms

Understanding the context of use and what potential harms may come with the design allow us to effectively minimize them.

2.3 Brainstorm & Ideations

With our requirements clearly gathered we went a step back and brainstormed different potential solutions and how they connected to each other.

2.4 Context of use (Storyboard)

After down selecting, we focused on a peer to peer product that could help parents relieve the stress of educating their children during COVID through better time management and strengthening a bond between parents and children.

In our first scene, we see our parent's pain point of stress and anxiety from working at home and taking care of their child at the same time.
However, help is here! School introduces a new online platform that helps parents during quarantine.
The platform offers a new way for online learning, with visual scheduling designed in an intuitive way for young children to comprehend.
With each parent hosting one class and help session per week, every parent can now rest and take a break for the majority of the week, we are all in this together!

2.5 Jobs to be Done (Objectives)

With our ideal user experience captured in our storyboard, we honed in on specific jobs to be done before prototyping.

2.6 Journey Mapping to Information Architecture

Using this Journey Map we were able to create an information architecture that allows us to understand what interactions the product needed to include.

2.7 On boarding Task Flow

A separate detailed onboarding task flow was created, this allowed us to test and improve the process with parents.

3.0 Usability Testing

The Cubby Class project team conducted two usability test sessions on May 12th and May 13th 2020, with 4 total individuals ( 2 parents, 2 children) remotely using animated Figma prototypes. The purpose of the test was to assess the usability of the app’s interface design, information flow, and information architecture.

3.1  Target User Testing Session

Each individual session lasted approximately 30 minutes. During the session, each task scenario is explained by the test administrator. No assistance was provided, however each user is asked to talk out loud and explain their actions and thoughts. After each task, the administrator asked the participant to rate the experience on a 5-point scale with prompts such as

The Prompted Tasks for Children Include :
  • Join a class that is about to start
  • Raise your hand to ask the teacher a question
  • Speak to your teacher
  • Draw the math solution
  • Undo your writing
  • Erase the writing
The Prompted Tasks for Parents Include :
  • Create a club to host
  • Create description of the club activity
  • Add to your schedule
  • Select times in your schedule where you are free to host a study group.
  • Finish the schedule

3.2 Testing Synthesized Results

Raw data is documented throughout the testing process using a rainbow table method to identify key metrics such as task success rate, time on task and errors. In general, all children participants found the functions to be clear and straightforward. However, the parents voiced a few areas worth of redesign. 

The test identified a few areas for redesign, including (Redesigning the club activity experience below):
  • Children
  • Having audio support during navigation, what button to click
  • Using iPad or even iPhone is easier for children than a laptop
  • Locking app (unable to home button) use could be handy for kids easily distracted 
  • Parents Flow
  • Adding the class time into the parent’s calendar, instead of looking at their child’s separate calendar
  • Adding filtering options for club activities (categorizing activities by tags)

3.3 Testing Conclusion

The large button, color scheme, and overall layout of the design proved successful and very intuitive for young children. However the layout is very simplified, making many young kids believe it to be similar to the UI interface of a touch-controlled device, they will often try to touch the screen to control, even if their screen is not touch-based. Although originally the design was focused on the standard laptop or computer platform in order to be more accessible to all families, having mobile and iPad fitted dimensions of the product will be important moving forward.
Overall, the main user flow and interactions for the children's UI prove very successful. However, the sketching parts in class were a bit confusing since the test participant was the only one in class.

view the final deliverable (back to top)

4.0 Final Deliverable

4.1 Style Guide

When we designed the screens, we created a colorful brand palette. Not only does a variety of color help keep kids engaged, but this also aided parents and kids in differentiating schedule blocks. We were mindful of color contrast of text with the background color throughout the screens, but we recognized that people who are color blind may need an even friendlier interface.

4.2 Children's View Mockup Analysis

We wanted to include a design that spoke to children not just from a visual perspective of bright colors, but also from a fundamental interactive perspective.
  • Product was not just a kid-friendly re-skin of an existing productivity app or collaboration product.
  • We provide new innovative ways for kids to easily adapt and use our tool for learning in a manner that can grow their anatomy in an accessible way.
  • Introduced our all-new redesigned home interface with our virtual animal friend.
The taskbar on the left showcases the three main functions for cubby class student view.
  • The home page where a daily is displayed
  • The sticker page that shows the progression for students.
  • The video call which works as small interactive classrooms.
Home Screen Analysis
  • Our animal friend is inspired by everyone's favorite childhood memories such as Tamagotchis, Nintendogs, and virtual pets.
  • We included fun interactives such as daily feeding login rewards, and asking for a fun animal fact to encourage kids to check back to our product daily.
  • Foxy will be fully voiced and also be able to react to simple voice commands working as a sort of virtual chatbot since some kids may have trouble reading the words on our screens.
The collectible progression experience and one of our core incentives designed from the ground up to support children's experience.
The smaller class size led by parents also contributed to a better more guided environment.

4.3 Parents View Mockup Analysis

The parent's view is more or less designed with inspiration from apps like google calendar since those would be products parents are already familiar with. The key features here is including the ability to access and modify the schedules of different children. This offers an overarching view of managing the time schedules of the whole family while keeping education in the center of attention.

Task Bar Analysis
Home Screen Analysis, How to host an after school activity.
Home Screen Analysis, having multiple children
Home Screen Analysis, Picking clubs to join with your child
Hosting a club virtually.
Giving and Receiving feedback.