Scratch IDE for First Graders

XiaohouCode's Home page↗

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.

My Role

Design Lead(UX/UI)

Team Member

Product Manager(1)
UI Designer(1)
Web Engineers(5)
Curriculum Designer(2)


Oct. 2020 ~ Dec. 2021(Then Updates Every 2 Weeks)


Fully Launched in 2022


First graders who dropped out of the course due to the frustration with the platform declined by 80%+(data sample size:200~300).

Background: What is Scratch?

Block-based Visual Programming Language

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.

Problem: Scratch is too complicated for first graders who wants to explore coding

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.

In trial classes, 40% of first-graders chose to discontinue the course as hey found Scratch hard to understand, intimidating & distracting.

Design Goal: Redesign Scratch for first graders' better coding education experience

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.

Research: What troubles first graders when using Scratch?

Teacher Interviews

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.

Takeaway.1 Project-based curriculum required students to stay highly focused during class.

100+ offline students & 1000+ online students / 2 years in teaching Scratch

Gina Ji(Scratch Teacher & Curriculum Designer):

"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.

 Scratch provided too many options and was too distracting

300+ offline students & 2000+ online students & 13 years in teaching second-grade students

Nan Xie(Scratch Teacher & Curriculum Designer):

"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."

 First graders read, type and click slowly, especially if the interface is crowded.

100+ offline students & 2 years in teaching Scratch + School Administration

Percy Xia(Scratch Teacher):

"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."

Field Trips

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.

More details on accessibility


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.

Complicated Code Deletion

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.

Ideate the Design Strategies

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.

1. First graders are easily distracted by the open options of blocks, which could be very troublesome for project-based learning.

Design Strategy.1 Only showing limited blocks

Do students need all the 110+ blocks in class? Let them explore after class! Only showing the relevant blocks could help students focus better in class.

2. First graders aren't proficient in using keyboards and mouses yet. Also, considering the classroom settings, the UI should have higher contrast for better accessibility.

Design Strategy.2 Redesign coding blocks for better accessibility

For each coding block, enlarge the text, darken the colors, add visual icons to assist reading.

Design Strategy.3 Simplify frequent operations such as code deletion

Based on field trip observations, some frequent operations such as code deletion required too many repetitive steps, which could be highly burdensome for users who were not familiar with keyboard and mouse. Redesigning these operations could make Scratch more user-friendly for first graders.


First Grader's Scratch IDE v1.0

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.

Key Features

Feature.1 Only show coding blocks that are relevant to the class

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.

Feature.2 Redesigned blocks for better accessibility

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.

Feature.3 Simplified Code Deletion: Drag & Delete!

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).

What I Learn

Research strategy matters!

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.