Product Design
UX Research
UX/UI Designer x1 (Me!)
Product Manager x1
Engineers x2
Figma
FigJam
Adobe CS
June - Sep 2023
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.
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:
increase in User Satisfaction Rate
increase in Task Completion Rate
The platform's target user was K-12 students (ages 5 - 17) who were beginner in coding or coders who wish to transfer into text-based coding language.
To better understand this unique persona, I researched children's behaviors and learning habits. This helped me identify their specific characteristics, best learning methods, and pain points they have when studying coding.
I also performed market research and competitive analysis to explore different approaches and features for young code learners. It helps me to ensure our product exceeded industry standards.
Leverage gamification elements, let users learn through various games and exercises.
Use interactive tutorial videos, code examples, and notes to guide through learning process.
Professional code editor features like auto code completion, error messages, and task running.
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 concepts from practices. Through hands-on exercises, they can solve challenges and express their creativity.
Once users successfully solved the given challenges, they would collect points as rewards to keep them engaged in the learning process.
- User Survey Feedback
While working on the initial approach of this product, I sent out user surveys to our target users, aim to discover more specific pain points and needs during their code learning experience.
In the survey, I showcased our initial idea and asked young code learners about their experience on code learning. I recruited 70 participants in the process.
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.
Based on all of our findings shown above, we narrow down to three main features for our code editor.
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.
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.
