Michelle Yee | Product Designer

Reimagining Python learning through a collaborative coding challenge

During my graduate program’s capstone, I worked at Code.org as a Product Designer to add new features to their Python coding curriculum. My main project included creating more inclusive and engaging curriculum catering especially to students largely underrepresented in computer science. This resulted in the creation of a group challenge involving students coding to make a music visualizer.

Role

Lead Product Designer

Team

4 Product Designers

2 Product Managers

Timeline

March – September 2025

Tool

Figma

Context

Code.org empowers students of all levels to code

As a leader in free K–12 computer science education, Code.org is committed to making coding accessible and engaging for every student. After launching their first Python course, they wanted to push further on inclusivity and engagement and brought our team in to analyze the competitive landscape and design new learning experiences.

Problem

Low student interest and engagement in their Python course

One month after launching its first Python course, Code.org identified a critical problem: only 48% of students found the activities interesting and engaging, raising concerns about long-term motivation and retention. Code.org partnered with our team to explore new ways to get students excited about learning Python. We asked ourselves:

How might we create interactive Python activities that balance learning outcomes with sustained engagement?

Solution

The Group Coding Challenge

To address this, we designed the Group Coding Challenge — a collaborative activity where students use Python to move shapes to music, creating a shared music visualizer.

Instead of working independently, this activity encourages learners of all skill levels to collaborate toward a shared outcome. By leading with a familiar interest like music, students can connect something they already love to coding, helping them see its real-world relevance.

Comparing Code.org's Python V1 usability tests to our tests, engagement increased from:

48%

80%

👇 Scroll for the process!

Research

Understanding the barriers to code and effective CS teaching methods

To build a well-rounded understanding of the computer science learning space, we approached research from multiple angles, dedicating three months to completing these methods and compiling a comprehensive research report.

Computer Science Educator Interviews
Through interviews with three CS teachers, we gained firsthand insight into the barriers they face in the classroom, their best practices for teaching CS concepts, and their strategies for keeping students engaged.
Cognitive Walkthrough
To understand how Code.org currently teaches Python, our team walked through the course together, evaluating each lesson for friction points and areas of opportunity.
Competitive Analysis
To understand how competitors were engaging learners, we interacted with their coding lessons firsthand, analyzing how they presented and taught key concepts.
Literature Review
Without direct access to student interviews, we turned to 13 peer-reviewed research papers — including studies featuring student interviews on their CS learning experiences and experiments testing different teaching techniques.

Research

Understanding the barriers to code and effective CS teaching methods

This research allowed us to pull out 3 common themes:

🎨

Relatable narratives

The literature review revealed that students, especially those who are underrepresented in CS, engage more deeply when the curriculum is connected to their values, goals, and real-life experience.

🫂

Community support

Many competitors fostered peer collaboration, creating a stronger sense of community.

🌟

Celebrated growth

Competitors reinforced motivation by acknowledging task completion through visual cues or opportunities to share work.

Design Process

Ideating solutions

Through this research, we honed in on our focus and began building evidence-backed solutions. Our team asked ourselves:

How might we deepen social elements within Code.org to foster peer connections, collaborative problem-solving, and sustained support structures while catering towards diverse backgrounds, interests, and skill levels?

Method: Group brainstorming in FigJam

Team generated 40+ ideas via sticky notes
Dot voting to identify top concepts
Feasibility vs. Impact matrix to prioritize
Crazy 8's to visualize solutions

Why music?

Earsketch case study

Our literature review surfaced a compelling design experiment from Georgia Tech: EarSketch, a program that introduced coding to underrepresented students through music and computational remixing. Surveys of the students showed statistically significant gains across all racial and ethnic groups in computing confidence, enjoyment, and sense of belonging. This evidence pointed us toward music as a powerful on-ramp for learners who might otherwise feel coding isn't for them.

Global appeal

Music transcends cultural boundaries and resonates with students worldwide. Given Code.org's global audience, it was the natural choice for a topic that could engage learners across diverse backgrounds.

Initial idea: Group coding challenge with chat functionality

Usability testing

Using user testing to evaluate learners’ experiences

After designing the mid-fi prototype, we conducted usability tests to understand how intuitive, engaging, and interesting this activity was to users.

Methods

Think Aloud (Unmoderated, 2 rounds, N=6 each, 18-25 years old)

Using Optimal Workshop, participants were asked to interact with the prototype and voice their opinions as they went along. A short questionnaire at the end allowed participants to reflect on their experience.

Quant & Qual prototype test (Unmoderated, 2 rounds, N=30 each, 18-25 years old)

Using Maze, participants completed tasks on the prototype and after completion, were asked a series of questions with both open and closed question formats.

Key findings from the usability tests

On round 2 testing, 30 users rated how inviting the group challenge felt on a

5-point Likert scale:

80%

Selected Inviting or Very Inviting

“The group challenge felt fun and creative, especially with the band theme and shared canvas. It encouraged collaboration and self expression.”

– Maze participant, round 1 testing

Notable design decisions and iterations

Responsive design for Chromebook Optimization

Problem

After presenting our design to the PMs, they flagged that many students use Chromebooks with limited vertical screen space. Our first iteration left little flexibility for expanding or collapsing elements.

Solution

We unstacked the instructions and AI chatbot panels, giving each its own collapsible section to free up screen space as needed.

Before

After

Removal of student chat functionality

Problem

While our PM saw the value in student chat functionality, it was ultimately ruled out due to school safety restrictions commonly prohibiting online messaging between students.

Solution

We removed student chat and replaced it with Code.org's existing AI chatbot as a support resource. Students coordinate progress by viewing their teammates' code directly.

Before

After

Enhanced task tracking system

Problem

Round 1 qualitative testing revealed that some participants were confused about what they needed to do in the group challenge and where they were in the task completion.

Solution

We added checkmarks and a task tracker to the instructions panel to help students visualize their progress. In Round 2 quantitative testing, 93% of participants rated the task tracking system as useful.

Before

After

Final Solution

Try the final design: Group Challenge

This exercise consists of an activity overview, team placement, group coding console, and final touches on the product to view the final outcome.

👉 Try it out for yourself here

View the full case study on a desktop!

Next steps & Takeaways

Next steps for Code.org

Although we didn't have the opportunity to test with students directly, the Group Coding Challenge was designed to integrate seamlessly into Code.org's existing curriculum.

A natural next step would be piloting it within the Painter lesson to observe how students interact and collaborate in this format.

Lessons I learned

Working with Code.org was an incredibly rewarding experience that pushed me to design in an unfamiliar space. With limited time, I strengthened my ability to prioritize solutions that made the most impact within the constraints presented.

Two key lessons that stood out:

🌊 Stay flexible in your designs. Educational platforms have specific constraints that can limit design choices. Embracing those constraints pushed me to find more creative ways to build a strong learning experience.

🫂 Check in with your team. Working on a tight timeline required clear communication and trust. Regular retrospectives helped us stay aligned, improve collaboration, and ensure everyone felt heard.