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

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

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

Context

Coding is being recognized as a crucial skill, providing useful and transferable skills for today’s tech-focused world.

139,400

of computer programmer jobs opened in 2023

57.5%

of U.S. public high schools offer foundational computer science

5.8%

of students in 35 states were enrolled in foundational computer science

Data from U.S. Bureau of Labor Statistics and 2023 State of Computer Science Education

To make coding more approachable, many young learners begin with visual programming languages. 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.

The Transition is Hard

Design Goal

Create a learning experience that helps K-12 learners transition to and master text-based coding languages.

02. Research

User Analysis

The platform's target users are K-12 students (ages 10-17) who are beginners in coding or coders looking to transition to a text-based programming language.

Competitors Analysis

To identify industry standards and market trends, I conducted a competitive analysis of over 20 coding and coding education platforms.

Game-based Learning

80% of the platforms utilize gaming elements

Tutorials & Courses

80% of the platforms offers self-paced tutorials

Professional Code Editors

Capability to run professional text-based languages

How might we make text-based coding learning experience engaging for young learners?

03. Ideation

Define the Project

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.

Define the Project

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

Approach

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

05. Iterations

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