Coding with Kids - Protothon 2020 Project

CODING WITH KIDS

"How might we provide a more intuitive experience for parents to find and register the right coding classes for their kids?"

Context

This project is made from a two-day Protothon, held by DubsTech, iSchool and HCDE program from University of Washington. The UX design is completed in 28 hours, from scratch, UX research, usability test, to high fidelity prototype.

A glimpse at behind the scene

What I did
Visual Design
Prototype
UI Design
Usability Tests

What I used
‍Adobe Photoshop
Adobe Illustrator
Figma
Webflow

More
Type: personal project
‍Duration: 28 hours
Client: Coding with Kids
Time: May 2020

Introduction

Coding with Kids is an education organization who dedicated K-12 computer sciecne education through afterschool programs, summer camps and online classes. Since the start of COVID-19, more than 1,500 students transitioned to online classes.

The goal of this project is to design a better experience for parents selecting classes for their kids, which includes from searching, scheduling and registering classes for their children.

Problems

Based on two contextual inquiry interviews, our team learned that the main problem is that lots parents are not familiar with coding education.
‍
While parents and students think CS education is important, parents are not familiar with coding so they don't know how to start.

My Approach

My approach is to redefine the process of searching, scheduling, and registering classes with a better navigation system to help parents to find the right classes. This system would include a more intuitive search filter, a quiz that could easily help parents acknowledge their children's coding level, and a new profile page which helps parents to organize the schedule.

Primary Users

Parents who arrange classes for their children

Secondary Users

Anyone who uses CwK to register or scheduling classes

Excluded Users

People who use CwK but not registering or scheduling classes

User Flow

To make a fluent experience of registering classes, we identified and redefined the user flow.

My goal is to mainly target the process of parents searching and filtering classes, parents scheduling classes for kids, and the system recommend classes based on kids’ information.

Based on the user flow, I made some low fidelity prototype with basic content and layout to test the usability within the group first. The most important takeaway is that a grid would provide more and accessible information compare to linear results when searching for classes. This defined our design language for this project.

The redesigned homepage is a more intuitive collection of the most used functions which complements the process from searching and adding classes to accessing to current classes for your children. Not only does the new home page provides a fresher look, but it adds functions like calendar and due dates all in one place for easier access.

The redesigned search engine is the most important part to improve parents’ experience to find a class for their children.

When users know the criteria, this new system provides a much more intuitive tool to filter the classes.

Three new search tools will help parents navigate through classes more easily.

Parents can add classes into their collections for future registration, or just help the system know their kids’ interests better

I designed a series of quiz for parents just in case they have no pre-knowledge of coding. The system will provide recommendations based on their answers, and suggest a series of classes for their children no matter what their grade is.

Since many of the children have little access to their tech devices, adding a calendar under the profile page could help parents better organize their time and schedule. They can refer to their schedule more easily when selecting classes.