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.
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.
By solving puzzles, students went through hundreds of levels to learn CoffeeScript and Python progressively.
Several factors contributes to this phenomenon, including distrust originated from longstanding misbeliefs about gamification, cultural background, Chinese education system, etc.
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.
Identify the target market in China that aligns with TAL's mission and current resources, and develop a corresponding business model.
Build a trustworthy coding education brand for our target students and parents
Make changes to the existing CodeMonkey products and develop new EdTech tools for Chinese students, parents and teachers.
Before diving into the details, we took a step back and map the desired outcomes in order of priority.
Establishing trust allows a new product the necessary time to optimize the service.
The core of a sustainable educational product is ensuring good education quality.
Growing too quickly with flawed products can harm the business in the long run.
Based on the rankings of the desired outcomes, we did further user research and market analysis to set the following core strategies.
Prefer teacher-centered education than self-regulated learning. A mix of project-based learning and direct instruction is the most desired.
can afford good quality education at >200+ USD /month, but it is large enough customer base to sustain the business
Prioritizing trust and quality means we should serve the most dedicated learner
Building Trust
Ensuring Education Quality
Surviving the Competition
500+ Offline Learning Center
Great Teachers and Professional Training System
Technical Support that enable one teacher to teach a large student body
Prioritize Fun/Creative Learning Experience
Prioritize Teacher Quality
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
······
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
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.
Self-Regulated Learning
Gamified Education
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
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.
Dull /Dark Colors
Natural Settings as Learning Contexts
Branded as a Educational "Game"
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.
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.
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.
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.
Chinese parents prioritized trustworthy teachers when choosing a coding education program for dedicated students. So, teachers were the best spokespersons to earn their trust.
To attract parents to participate in XiaohouCode's recurring lectures and workshops, I developed another set of poster templates with emphasis on teacher.
Following the reposition and rebrand strategies, we built 10+ EdTech tools to ensure hybrid education quality.
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
······
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.
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.
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
I prototyped and designed the simplified version of Scratch for first graders who has no prior experience with computer / Scratch.
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.
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.
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.
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.
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:
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.
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.
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.
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.