UrsaTech Code Editor

An online code editor that delivers an engaging learning experience for kids and young teens, powered by artificial intelligence and big data.

Overview

In the Summer of 2023, I worked as a UI/UX design intern at Ursa Technology, a technology education company. I collaborated with PMs and engineers to design an online code editor for company's learning platform where students get to practice their coding skills.

Role

Product Design
UX Researcher
UX Testing

Team

Product Manager
Product Designer (Me!)
Engineer

Tools

Figma
FigJam
Adobe Illustrator

Time

Mar - Aug 2023

Problem Statement

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 dropout rate.

Design Goal

HMW create an engaging professional coding learning experience to enhance young student's learning efficiency?

PM's Initial Approach

Since the target audience is the younger generation (ages 9 - 16), our PM team aims to create a more engaging experience by introducing gamification mechanisms and empowering users to connect with friends

User Research

Potential User Demographic

US$ 2.9 billions

The global Online Coding for Kids market value in 2022 was

57.5%

of public high schools in US offered foundational computer science

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

User Research

User Persona

Alignment with PM

Key User Insights

• Failed to identify and fix errors is the top reason that lead to frustration and lost of motivation.

• Users wish for real-time guidance and support when they fail to debug or understand concepts.

Pivot on Design Approach

Improve user engagement through gamification and social elements.

Improve user engagement through providing guidance and debugging support.

Ideation

HMW provide real time supports and guidance to enhance young student's learning efficiency?

What is the most efficient way to provide support

Competitor Analysis

Key Takeaways #1:

Professional Editor

We benchmarked professional code editors as a guideline. Our editor will be capable for development operations like code completion, debugging, and task running.

Key Takeaways #2:

Tutorials, Exercises & Hints

Educational platforms would include interactive tutorials, exercises, code examples, and hints that guide learners through concepts and challenges.

Key Takeaways #3:

AI Assistant

Online platforms now use AI assistant chatbot to provide real-time support, feedback, hints, and other resources to users.

Features

Our platform will be a combination of professional code editor, AI assistant, and Engagement Elements.

Code Editor:
Allows users to code in professional text-based programming languages and run tasks.

AI Assistant:
Provides real-time personalized feedback, hints, notes, and other supports to help users understand errors and solutions.

Engagement Elements:
Provides coding exercises and reward system to encourage users to learn from solving interesting challenges.  

User Flow when Encounter Errors/Bugs

Design

Iterations

Lo-Fi V1

Lo-Fi V2

Hi-Fi 1

Final Version

Final Design

Coding Panel

AI Assistant

Console Panels

Design System

Reflection

Impact

Performance in the incremental release:

7.3%

improvement in User Satisfaction Rate

10.8%

increase in Task Completion Rate

Next Steps

The team is progressing with the coding and structuring of the online editor.
Design onboarding experience for the editor to lower learning curve, especially for first time user.
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).