Ursa Coding

Bring Professional Coding to Kids with AI-Driven Real-Time Assistance

01. Overview

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.

My Contribution

Product Design
UX Researcher
UX Testing

Team

Product Manager
UX/UI Designers (Me!)
Engineer Team

Tools

Figma
FigJam
Adobe CS

Time

2023

Challenge

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.

Design Goal

How might we make professional coding learning experience more engaging and meeting younger learners' needs?

02. Research

Target Audience

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.

Coding in School

Computer science (CS) and programming is now part of school curriculums.

57.5%

of public high schools in US offered foundational CS

62%

of 5th to 12th grade students are interested in computer science

90%

of parents feel that to learn CS is good use of school resources

Market & Competitive Landscape

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.

Initial Approach

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.

Primary User Research

"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

Key User Insights

1.

The user survey results revealed that failed to identify and fix errors is the top reason that lead to frustration and lost of motivation.

2.

The majority of users were looking for real-time guidance and support when they fail to debug or understand concepts.

03. Define & Ideation

New Design Approach

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?

What is the most efficient way to provide support?

Features

User Flow when Encounter Errors/Bugs

04. Design

Iterations

Lo-Fi Iteration #1

Lo-Fi Iteration #2

Hi-Fi Iteration #1

Final Iteration

05. Final Design

View Prototype in Figma

Coding Panel

AI Assistant

Console Panels

Design System

06. Reflection

Impact

The code editor's performance in the incremental feature release:

7.3%

increase in User Satisfaction Rate

10.8%

increase in Task Completion Rate

Next Steps

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