Localize CodeMonkey

From Israel to China, from 0 to 100K learners

My Role

Design Lead

Stakeholders

Product Managers
Developers
Marketing & Sales
Teachers
Curriculum Designers

Team Member

Jianzhi Wang - Graphic
Xingyi Ding - UI / UX
Luman Shao - Illusration
Kaiyue Miao - Illusration
Yan Zhang - Illustration
Xiaoting Zhang - Animation


Duration

1 Year as the sole designer
(1/2019 ~ 1/2020)

1.5 Years as the Design Lead
(1/2020 ~ 5/2021)

Key Result

- Grow from 0 to 100K paid students

- Developed design system for 3 Product Lines

- Launched 10+ EdTech tools and platforms

- Streamlined workflows

Background

An International Product Entering Chinese Market

In Oct. 2018, TAL Education Group (NYSE: TAL) acquired CodeMonkey, an Isarel gamified coding education platform that has  taught CoffeeScript to K12 students all over the world.

My Role & Key Results

From Sole Designer to Design Lead

I joined the founding team as the sole designer in Jan. 2019. As of Jan. 2020, I led a team of seven designers, overseeing UI/UX, illustration, graphic design, and animation production.

Over 2.5 years, XiaohouCode's paid student base grew from 0 to 100,000+. We extended to 3 hybrid product lines, and created educational tools such as simplified Scratch IDE for first-graders, coding skill assessment platforms, and cross-platform data centers.

Jan.2019

2.5 Years
|
May.2021

From a sole designer
|
To managing a team of 7 designers

From 100 Trial Participants
|
To 100K+ enrolled learners paying 218 USD/month

From 1 acquired online coding platform
|
To 3 hybrid product lines and 10+ EdTech tools

Problem

Inappropriate Learning Mode Stop the Business from Scaling

CodeMonkey provided self-regulated gamified  education.

By solving puzzles, students went through hundreds of levels to learn CoffeeScript and Python progressively.

...but Chinese parents distrusted gamification & self regulation.

"I will pay 118USD/year for online courses taught by famous teachers, but not for GAMES. How do I know if my kids are playing or learning?"

Moreover, it is true that Chinese students are more used to learning with teachers.

Several factors contributes to this phenomenon, including distrust originated from longstanding misbeliefs about gamification, cultural background, Chinese education system, etc.

Specify the Goals

1 Ultimate Goal, 3 Tasks

A good K12 education products need to consider needs from both our students and parents. So, we needed to reposition, rebrand, and redesign everything for Chinese market.

Ultimate Goal: Grow and Scale CodeMonkey in Chinese Market

Reposition

Identify the target market in China that aligns with TAL's mission and current resources, and develop a corresponding business model.

Rebrand

Build a trustworthy coding education brand for our target students and parents

Redesign

Make changes to the existing CodeMonkey products and develop new EdTech tools for Chinese students, parents and teachers.

Ideate Core Strategies

Set the Priorities

Before diving into the details, we took a step back and map the desired outcomes in order of priority.

Trust

Establishing trust allows a new product the necessary time to optimize the service.

>

Education Quality

The core of a sustainable educational product is ensuring good education quality.

>

Fast Growth

Growing too quickly with flawed products can harm the business in the long run.

Core Strategies

Based on the rankings of the desired outcomes, we did further user research and market analysis to set the following core strategies.

Reposition

Target the 10% of students and parents who are committed to learning coding and demand a teacher-centered hybrid education

Chinese Students/Parents

TAL’s Goals

Available Resource

>80%

Prefer teacher-centered education than self-regulated learning. A mix of project-based learning and direct instruction is the most desired.

<10%

can afford good quality education at >200+ USD /month, but it is large enough customer base to sustain the business

Quality >  Quantity

Prioritizing trust and quality means we should serve the most dedicated learner

Building Trust

Ensuring Education Quality

Surviving the Competition

Sufficient support for hybrid education

500+ Offline Learning Center

Great Teachers and Professional Training System

Technical Support that enable one teacher to teach a large student body

Rebrand

Two-pronged Approach: Feature creative content to attract students + Feature trustworthy teachers to appeal to parents

Chinese Students

Prioritize Fun/Creative Learning Experience

Chinese Parents

Prioritize Teacher Quality

Redesign

Build educational tools and platforms to empower teachers,  educate students, and inform parents.

Empower Teachers

Educate Students

Inform Parents

Online Classroom

Real-time Learning Performance Data Panel for Teachers

Automated Assignment Grader

······

IDEs for Different Age Group/Skill Level

Coding Probelm Banks

Gamified Python Challenges

······

Learning Analytics Report for Parents

Coding Guide for Parents

Shareable Creative Projects

······

Empower Effective Hybrid Teaching

Fun and Engaging Learning Experience

Help Parents Track Performance and provide personalized intervention

Prioritizing trust and quality means we should serve the most dedicated learner

Building Trust

Building Trust

Building Trust

Building Trust

Prioritizing trust and quality means we should serve the most dedicated learner

Building Trust

Ensuring Education Quality

Surviving the Competition

Prioritizing trust and quality means we should serve the most dedicated learner

500+ Offline Learning Center

Great Teachers and Professional Training System

Technical Support that enable one teacher to teach a large student body

Reposition Deliveries

Growing from 0 to 100K students

Our reposition strategy has successfully helped the student base grow from 0 to 100K. Over 90% of enrolled students remained with us for more than 2 semesters, paying a monthly tuition fee of 298 USD. This suggested that our reposition strategy attracted the dedicated learners we aimed to target.

From Original CodeMonkey...

118 USD/ Month

Self-Regulated Learning

Gamified Education

>

...To XiaohouCode Hybrid Learning

298 USD /Month
(895 USD /Semester)

A Mix of Project-based Learning and Direct Instruction from Teachers

Hybrid Learning Experience

3 Product Lines for Students
of Different Age Groups

Co-teaching Model

Rebrand Deliveries

Design System Change: From 1 Product to 3 Product Lines

Following the reposition strategy, XiaohouCode decided to include Scratch, Python, and C++ education program in addition to CodeMonkey's CoffeeScript. Based on the changes on product-market fit, I restructured the branding system.

From 1 Online Coding Game

Dull /Dark Colors

Natural Settings as Learning Contexts

Branded as a Educational "Game"

>

To 3 Hybrid Coding Programs

Vibrant Colors

Real-life Events as Learning Contexts

Branded as a Hybrid "Education"

While preserving the well-known character designs and visual style, I introduced more vibrant colors to enhance the brand's appeal to Chinese parents and students. To differentiate each product line, I created unique brand keywords and distinct visual elements, while maintaining a cohesive overall style.

Feature Creative Contents to Appeal to Students

Original CodeMonkey: Exciting Puzzles that are NOT Relevant to Students' Daily Living

CodeMonkey set the learning context in natural scenes such as jungle forest and outer space. However, research suggests that students are more motivated when learning about topics that are personally relevant to them.

The New XiaohouCode Family & Storylines: Coding Challenges in Everyday Life

To inspire creativity and make learning more relevant to students' lives, we designed a series of new characters and storylines that incorporated life events, cultural festivals, art, and new technologies into coding lessons.

Poster Design Template with Emphasis on Content

XiaohouCode held recurring coding workshops to attract new students. To effectively appeal to these students and streamline the design workflow, I created poster templates with emphasis on content for these workshops.

Workshop Poster Sample:

Feature Professional Teachers to Appeal to Parents

Teachers as Spokespersons for XiaohouCode

Chinese parents prioritized trustworthy teachers when choosing a coding education program for dedicated students. So, teachers were the best spokespersons to earn their trust.

Poster Design Template with Emphasis on Teacher

To attract parents to participate in XiaohouCode's recurring lectures and workshops, I developed another set of poster templates with emphasis on teacher.

Workshop Poster Sample:

Redesign Deliveries

Empower Teachers, Educate Students, and Inform Parents

Following the reposition and rebrand strategies, we built 10+ EdTech tools to ensure hybrid education quality.

From Just 1 Game

>

...To 10+ EdTech Platforms and Tools

Online Classroom

Real-time Learning Performance Data Panel for Teachers

IDEs for Different Age Group/Skill Level

Coding Probelm Banks

Learning Analytics Report for Parents

Automated Assignment Grader

······

Empower Teachers

Build Data-driven/Automated Tools to Boost Teacher's Productivity

In project-based classrooms, students often encounter unique learning challenges. So, it is important for teachers to effectively oversee the general learning progress of the class as a whole, and define the student groups who may be facing challenges. EdTech solutions were therefore necessary to boost teacher's productivity.

Work Sample: Track Students' Real-time Performance in Online Classroom

Teachers can choose to synchronize their display with students, or swicth to the data panel for real-time performance data, which help teachers quickly adjust their teaching methods in response to student performance.

I mapped the user flow and prototyped the first online classroom for XiaohouCode in late 2020.

Educate Student

EdTech Solutions Tailored to Students' Age and Learning Objectives

As XiaohouCode included multiple coding languages for different age groups, we worked with product managers, developers and teachers to design various interactive coding courses and Integrated Development Environments (IDEs) tailored to students' ages and learning objectives

Work Sample: Scratch IDE for First Graders

I prototyped and designed the simplified version of Scratch for first graders who has no prior experience with computer / Scratch.

Work Sample: Gamified Python Challenges

We developed a series of gamified Python challenges for students to play with and solidify learned knowledge after class.

*Please contact me at xialinx@upenn.edu for more details.

Work Sample: C++ Coding Problem Banks

For advanced C++ learners, we created a problem bank system with embedded auto-grader for students who seek challenges in practice.

*Please contact me at xialinx@upenn.edu for more details.

Inform Parents

Help Parents to Participate in Personalized Interventions

It is important to involve parents in their children's learning. As most learning activities take place at home after class, parents also play a part in teaching. Therefore, we decided to provide daily student learning performance reports to parents and assist them in providing personalized guidance for their children.

Work Sample:  Learning Performance Report for Parents

The mobile learning report is sent everyday at 8:00PM, when most Chinese students start working on their homework.

*Please contact me at xialinx@upenn.edu for more details.

Reflections

From Sole Designer to Design Manager

My team has the highest work satisfaction rate in XiaohouCode!

By the end of 2021, my team has the highest work satisfaction rate and was voted one of the most productive team in XiaohouCode. However, I am fully aware that there is always room for improvement!

During my two and a half years at XiaohouCode, I grew from a designer to a design manager. My design philosophy evolved from solely focusing on user experience to integrating the strengths of various partners to create better educational products. Many valuable lessons have been learned, including:

How to Negotiate with Different Stakeholders?

As a designer, implementing new design concepts or projects requires cooperation from various stakeholders. As I started to lead a team, I realized the increasing importance of negotiation skills. From my personal experience, The key to winning support is to not only make my own statement clear, but also consider the issue from the other party's perspective.

Example: Promoting New Branding System

At first, teacher was used to using their own original slides and there was no incentive to update these old slides since branding did not affect teaching.

Therefore, I designed new slide templates for the teachers, and helped them migrate the original content to the new version of the slides. After the initial effort, the teachers gradually found that the new templates were more efficient and visually appealing, and they voluntarily began using and adhering to the new design specifications.

How to work smart instead of work hard?

Streamlining design workflows and using the right tools helps teams avoid meaningless repetitive work. Through communication with various departments, I identified recurring design demands, and designed various ready-to-use templates and design libraries.

Example: What does "Ready-to-use" Means?

To make these resource truly "useful", I designed marketing poster templates based on the common information structure of recurring marketing event types. Similarly, I designed course slide templates based on common course modules.