An AI-assisted web IDE built for safe, student-first learning

A modern HTML/CSS/JS builder for Code.org's flagship AI Foundations pilot—pairing a scoped tutor with guardrails that help students learn with AI without being replaced by it.

Role
Senior Product Designer (Lead Designer)
Timeline
2025–Present
Scope
Prototyping, user testing, product design, cross-functional collaboration

Context

Web Lab 1 was a dated, external-tool-dependent HTML/CSS/JS environment on legacy foundations—unlikely to support AI-aligned learning goals or the new Lab2 framework powering future labs like Music Lab and Python Lab.

Code.org's pivot toward CS + AI education made safe, effective AI usage a core requirement for both curriculum and tools—work visible at the federal conversation level around AI education policy.

Approach

1/4

Prototype like it’s production

I built an interactive Web Lab 2 template wired to our design system—designing in code, validating flows without engineering lift, and giving engineers a richer reference than static handoff.

Curriculum-aligned AI, not a generic chatbot

AI capabilities are scoped per level based on learning objectives. The tutor guides students toward understanding—nudging in-context help and co-creation—rather than doing what they ask.

Guardrails that build judgment

When AI generates code, students review and commit it with a description—reinforcing ownership. Versioning blends autosaves, user commits, and AI-assisted changes in a student-friendly model.

Pilot-driven iteration

Live observation and async feedback from pilots drove rapid iteration and lightweight A/B-style experiments to tune the balance between independent work and AI support.

Impact

Piloted with ~1,500 students across 8 states, supporting Code.org's flagship AI Foundations curriculum as the organization scales CS + AI education.

Work

1/4

Work image 1 of 4: Web Lab 2 interface with Tutor open—AI help in-context while building HTML/CSS/JS.

Web Lab 2 interface with Tutor open—AI help in-context while building HTML/CSS/JS.

Learnings

  • Design for hesitation, not hype—human microcopy helps students treat AI as one tool in their toolbox.
  • Guardrails can be a learning mechanic—review-and-commit turns AI output into practice for judgment.
  • Accessible patterns and stepwise walkthroughs are what make complex tooling usable for students.