Coding has become a popular subject in children education as it offers essential and transferable skills in today's technology-driven era.
As a UI/UX designer at UrsaTech, I collaborated with PMs and engineers to design an online code editor that delivers an engaging learning experience for kids and young teens with the support of AI.
Product Design
UX Researcher
UX Testing
Product Manager
UX/UI Designers (Me!)
Engineer Team
Figma
FigJam
Adobe CS
2023
Coding is complicated!
Coding for kids was not a new concept. Multiple businesses had developed block-based coding languages to help young learners get a basic understanding of coding.
Yet the transition to professional text-based environments can be challenging. Many young students find professional text-based coding intimidating and lack the engagement to persevere through the initial learning stages.
This leads to frustration, poor understanding of concepts, and a high drop-out rate.
How might we make professional coding learning experience more engaging and meeting younger learners' needs?
The platform's target user was young audiences (ages 9 - 14) who were beginner in coding or coders who wish to study text-based coding language. In order to craft a engaging coding learning experience for young learners, I need to first understand their learning habits, pain points, and needs.
Computer science (CS) and programming is now part of school curriculums.
of public high schools in US offered foundational CS
of 5th to 12th grade students are interested in computer science
of parents feel that to learn CS is good use of school resources
I looked at other coding learning platforms to see their approaches and features for young code learners.
Active Engagements
Youth educational platforms would leverage gamification elements, let users learn through games and exercises.
Tutorials
Interactive tutorial videos, code examples, and notes are commonly used to guide users through their learning process.
Professional Code editors
Professional and essential code editors functions like code completion, debugging, and task running.
Make it fun
After the research on young audiences' learning habits and coding education market, the team's initial approach was to build active learning experience through hands-on exercises and gamification mechanisms.
Users will learn and master coding knowledge from practices. They will be given prompts to solve or design. Once users successfully solved the given challenges, they would collect points as rewards.
"I am stuck on this one question for an hour, and then I just give up."
In order to fully understand users' biggest needs and frustrations during their learning experience, I crafted a user survey, asking young code learners about their experience on code learning. I ended up received 90 participants.
User Journey Map based on the survey results
The user survey results revealed that failed to identify and fix errors is the top reason that lead to frustration and lost of motivation.
The majority of users were looking for real-time guidance and support when they fail to debug or understand concepts.
After analyzing the results from primary research, I discovered that one of the most significant pain points was that users failed to identify errors and debug their code.
The team's initial approach was to use exercises and a reward system to keep users engaged. However, if users cannot write the correct code, they get stuck during their practice and cannot move forward, which leads to frustration and a loss of learning motivation.
Students need "someone" or "something" to answer their questions and help them identify their errors immediately to keep moving forward and staying motivated.
How might we provide real-time supports and feedbacks to users?
The code editor's performance in the incremental feature release:
increase in User Satisfaction Rate
increase in Task Completion Rate
1. The team is progressing with the coding and structuring of the online editor.
2. Design onboarding experience for the editor to lower learning curve, especially for first time user.
3. Giving the AI assistant characteristics to help form more engaging learning experience.
4. The team is planning on extending the AI assistant functions over the entire platform's ecosystem, such as the teaching end (PPT and Quiz generation).