01. Overview02. Research03. Ideation 04. Design Iteration05. Final Design06. Reflection

Helping K12 learners master professional coding: an AI-powered, gamified code editor

I prefer a slide version

Ursa Coding is a coding education platform that helps young learners transfer from block-based coding to professional coding through AI support and gamified practices.

As the sole designer for this project, I led all design initiatives, from research to high-fidelity prototypes.

Role

Product Design
UX Research

Team

UX/UI Designer x1  (Me!)
Product Manager x1
Engineers x2

Company

UrsaTech

Time

2023

01. Overview

Learning to code can be challenging, a single misplaced comma or bracket can lead to hours of troubleshooting. Moreover, with so many syntax rules and concepts to remember, to master it can feel like learning a new language.

To make coding more approachable, many young learners begin with visual programming languages. These block-based language allow users to drag-and-drop the code and practice coding concepts with ease.

Yet, the transition from block-based languages to professional text-based environments is still challenging. Many young learners struggle with syntax, abstract concepts, and debugging, lead to frustration and decreased motivation.

As the UX designer at UrsaTech, I collaborated with project managers and engineers to design UrsaCoding, an AI-powered code learning platform that helps young learners tackle professional coding with real-time supports and gamified practices.  

Design Goal

Create an engaging learning experience that helps K-12 teenage code learners transfer from block-based to professional text-based coding language.

The Outcome

1. A professional text-based code editor

2. An AI chatbot assistant that provide real time assistant, feedback, and debugging support

3. Gamified practices and reward system

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

7.3%

increase in User Satisfaction Rate

10.8%

increase in Task Completion Rate

02. Research

Design for Young Audiences

The platform's target user was K-12 teenage students (ages 10 - 17) who were beginner in coding or coders who wish to transfer into text-based coding language.

To better understand this unique persona, I conducted secondary research on children's behaviors and learning habits. This helped me identify their specific characteristics, best learning methods, and pain points they have when studying coding.

Challenges for Children

Short Focus Spans 😔

Young learners have shorter attention spans and less patience, requiring strategies to maintain focus.

External Motivation 👏

Young learners rely on external rewards and encouragement as they develop focus and intrinsic motivation.

Personalized Support 🧒

Each student has unique learning habits and abilities, requiring tailored support and teaching.

Beneficial Learning Methods for Children

Active Learning 🚀

Active engagement, such as hands-on activities, games, and discussions can keep young users engaged.

Interactivity 💬

Interaction and feedback helps young learners understand their progress and stay engaged.

Learn through Play 🕹️

The learning-through-play method matches young learners' natural tendencies and development.

Social Interaction 👭

Collaborative learning and group activities can boost understanding and retention.

Market & Competitive Landscape

I performed competitive analysis of over 20 coding and coding education platforms. This helps me to ensure our product exceeded industry standards and following effective learning methods.

Industry Trends and Standards

Active Engagement

Leverage gamification elements, let users learn through various games and exercises.

Tutorials and Support

Use interactive tutorial videos, code examples, and notes to guide through learning process.

Professional Code Editors

Professional code editor features like auto code completion, error messages, and task running.

How might we provide text-based coding learning experience that is approachable and engaging for children?

03. Ideation

Active Learning & Engagement

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.

Gamify Hands-on Exercises

Users will learn and master coding concepts from practices. Through hands-on exercises, they can solve challenges and express their creativity.

Rewards and Engagement

Once users successfully solved the given challenges, they would collect points as rewards to keep them engaged in the learning process.

04. Pivot to a New Approach

While working on the initial approach of this product, I realized that even though secondary research was helpful, we lack primary input and direct feedback from our target users to guide the product strategy.

Therefore, I conducted primary user research, asking young code learners about their experience on code learning. The goal is to discover more specific pain points and needs during their code learning experience.

Research Methods

📄 User Surveys

Quantitative + Qualitative Data

• Demographics & coding experience level
• Learning preferences (methods, tools)
• Challenges and pain points
• Motivation
• Desired features and supports

💬 User Interviews + Observation

In-Depth Qualitative Data

• Code learning experience
• User journey
• Challenges and pain points
• Motivation
• Desired features and supports

"I cannot fix the error and get stuck for an hour.
Finally I just give up."

- User Feedback

User Research Insights

Debugging

Debugging reveal to be the top challenge and frustration for users (90%)

Real-time support

85% of participants stated they mostly practice on their own and wish for real-time support

Syntax errors

Syntax errors are frequently encountered by beginners

Tailored instruction

Users are looking for specific, tailored instruction for different topics and cases

05. Iterations

Solution

The user survey revealed that users need "someone" or "something" to help them identify their errors immediately to keep moving forward and staying motivated.

I came up with different ideas and approaches and placed them into a matrix to identify the most efficient and usable solution for users.

Ideation & Decision Matrix

Features

User Flow

Low-Fidelity

Feedback from Internal Team Validation

06. Final Design

View Prototype in Figma

Coding Panel

AI Assistant

Console Panel

Style Guide

07. Reflection

Results

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

+7.3%

increase in User Satisfaction Rate

+10.8%

increase in Task Completion Rate

Reflection

🚸 Designing for a special persona

• Discover special needs through research
• Consider different design approaches

🤖 AI Interaction

• Use onboarding sessions and CTAs to educate users and manage expectation

Iterations

Lo-Fi Iteration #1

Lo-Fi Iteration #2

Hi-Fi Iteration #1

Final Iteration