I joined XiaohouCode in early 2019, right after TAL Education Group(NYSE: TAL)’s purchase of CodeMonkey. XiaohouCode extended CodeMonkey's coding curriculum and now includes various types of coding languages to help children from age 6 to 16 learn how to code and create. From 2018 to 2019, we chose to teach Scratch, a block-based visual programing language, to our 6～8-year-old students who had no prior experience in coding. However, Scratch was too complicated for the target students.
So, I prototyped and designed the simplified version of Scratch for first graders who has no prior experience with computer / Scratch that helps them focus and learn coding progressively in hybrid classes.
First graders who dropped out of the course due to the frustration with the platform declined by 80%+(data sample size:200~300).
According to Knowledge Graph(from Google), "Scratch is a high-level block-based visual programming language and website aimed primarily at children as an educational tool for programming, with a target audience of ages 8 to 16". It allows children to drag and drop coding blocks like legos and build functional programs.
Since XiaohouCode's launch, tremendous amount of kids from 6 ~ 8-year-old and their parents had expressed strong interest in learning to code with Scratch. So, from 2018 to 2019, we chose to teach Scratch to our 6～8-year-old students who had no prior experience in coding. However, just as Scratch says, it was made for children of ages 8-16. It was not for younger students.
Following the trial classes, we decided to redesign Scratch for first graders. First of all, I researched about what exactly troubles first graders through interviews and field studies. Then, I developed design prototypes with our product manager, teachers, and curriculum designers. Finally, the design solution is implemented by our dedicated developers.
I started by interviewing XiaohouCode’s teachers who have taught coding to more than 100 6~8-year-olds students in offline settings, which could provide me a quick overview of what younger students experienced in class.
100+ offline students & 1000+ online students / 2 years in teaching Scratch
"XiaohouCode Scratch courses are project-based. The 'learning by doing' approach is engaging, but it also means if a student fails to keep up with even just one step, s/he might not be able to get back on track for the rest of the class."
Gina's feedback aligned with what I found in student interviews.
300+ offline students & 2000+ online students & 13 years in teaching second-grade students
"Many students game with 110+ blocks instead of focusing on course-related challenges. Especially since our courses are project-based, it is really problematic if the students couldn't stay focused."
100+ offline students & 2 years in teaching Scratch + School Administration
"First graders haven’t fully developed fine motor skills to perform intricate tasks. Also, most of them haven't had any experience with mouse and keyboards. Searching among 110+ blocks and manipulating small blocks could be intimidating and frustrating."
"Moreover, first graders in China only recognize 300~500 characters, which is not enough for fast reading and searching."
Following the teacher interviews, I paid 3 visits to the classrooms. I focused on how fast students completed each task. Most observations aligned with the conclusions from teacher interviews, but there were additional insights from the visits.
In all 3 trips, slides and live code demonstrations were projected onto a whiteboard under natural lighting, while the projectors we had in classrooms weren’t strong enough to clearly present the materials.
It was especially troublesome for some blocks with bright yellow backgrounds and white text. Some blocks could be almost invisible in this condition.
Deleting certain codes is a frequent operation, however, it was really painful in Scratch. Each time you wanted to delete something, you needed to right-click, choose delete, and then left-click.
What made it worse was that you might not be able to delete what you want in one round of operation. Sometimes, Scratch only allowed you to delete a chunk of blocks. Sometimes, you had to delete blocks one by one. It was a confusing and frustrating process.
Based on the teacher interviews and the field trips, I came up with three main design strategies based on two major insights from the research.
Each strategy listed above was discussed and approved in product design meetings with teachers, curriculum designers, product managers, and developers. Finally, here is the First Grader's Scratch IDE v1.0. The product was tested and launched on Jan, 2022.
We decided to only offer blocks that relate to the challenges in class, so that students would focus on the task at hand, instead of gaming around with other options.Students can access the full version after class.
Block colors correspond to Scratch’s colors for consistent experiences with the full Scratch IDE, but these colors are generally heavier for higher color contrast and readability in classroom settings.
Instead of clicking more than 10 times to delete a chunk of blocks, now you can trash them with just one drop!
More than 1000 students enrolled the class designed for first graders and used the new Scratch IDE during the entire class. After the first 5 classes, we did a quick survey with around 200~300 students. The new design effectively reduced distraction and accessibility related issues .
First graders who dropped out of the course due to the frustration with the IDE declined by 80%+(data sample size:200~300).
The research strategy worked really well for this project. Interviewing teachers as the first step speeded up the research progress tremendously.
It also turned out to be important that I didn’t just follow what teachers said. Investigate the context and user needs from different perspectives help me get a fuller and better picture of the user experience. In this project, some teachers, even the students, got used to the bad projector and forgot it was problematic for reading the interfaces. I learned that it is the designer's responsibility to actively search for these underlying design opportunities.