Designing a Browser Python Sandbox
Designing a Browser Python Sandbox
Product Designer
Nov 2022 - Jun 2023
1 Product Owner
1 Software Engineer
Web Assembly
Pyodide
Typescript
Summary
Summary
As a Product Designer, I owned all designs for the core Playground experience from in-browser file structure, and Python package workflows, reducing setup friction and increasing repeat usage and supported growth to 2,000+ daily signups.
As a Product Designer, I owned all designs for the core Playground experience from in-browser file structure, and Python package workflows, reducing setup friction and increasing repeat usage and supported growth to 2,000+ daily signups.
The What?
Browser based code playground
Browser based code playground
Programiz PRO Code Playground is a browser-based integrated development environment (IDE) designed to democratize coding.
The platform enables users to write, test, and share Python code without the need for installations so beginners could go from lesson to execution without local setup.
Programiz PRO Code Playground is a browser-based integrated development environment (IDE) designed to democratize coding.
The platform enables users to write, test, and share Python code without the need for installations so beginners could go from lesson to execution without local setup.
The Why?
Taking the first step is always the hardest
Taking the first step is always the hardest
When it comes to coding or any task for that matter, starting something is the biggest hurdle.
Python is easy to start, but practical learning quickly requires additional packages. Installing and managing those dependencies plus environment mismatches turned excitement into drop-off.
When it comes to coding or any task for that matter, starting something is the biggest hurdle.
Python is easy to start, but practical learning quickly requires additional packages. Installing and managing those dependencies plus environment mismatches turned excitement into drop-off.
Why it mattered to Programiz Pro
Why it mattered to Programiz Pro
Programiz PRO is an edtech coding-learning platform, consistently ranked among the best places to learn Python. Python was its best-selling course and a major revenue driver, so improving the Python learning journey was directly tied to the business.
Programiz PRO is an edtech coding-learning platform, consistently ranked among the best places to learn Python. Python was its best-selling course and a major revenue driver, so improving the Python learning journey was directly tied to the business.
"The biggest drop-off wasn't during lessons. It happened right after when they
tried to actually use what they'd just learned."
"The biggest drop-off wasn't during lessons. It happened right after when they tried to actually use what they'd just learned."
The Actual Problem
Before a beginner could write one line,
Before a beginner could write one line,
01
Environment setup
Configure virtual environments, install Python,
debug PATH errors before touching a concept.
02
Package friction
Practical learning quickly needs matplotlib,
numpy. Managing dependencies turned curiosity
into drop-off.
03
Classroom paralysis
First sessions were consumed entirely by setup.
No code written. Just configuration.
04
Device exclusion
On shared or low-spec devices, installation
failed altogether. The learners who needed
access most got locked out.
Moving from a guided course to running Python locally forced a context switch, and that handoff introduced setup friction (installing Python, managing packages, environment mismatches).
Moving from a guided course to running Python locally forced a context switch, and that handoff introduced setup friction (installing Python, managing packages, environment mismatches).
North Star
Reduce friction to near-zero
Reduce friction to near-zero
Entry Point A
Entry Point A
Entry Point A
Purchased Python Course
Purchased Python Course
Purchased Python Course
Logged-in learner, high intent
Logged-in learner, high intent
Logged-in learner, high intent
Entry Point B
Entry Point B
Entry Point B
Googled 'Code Playground'
Googled 'Code Playground'
Googled 'Code Playground'
Curious explorer, low intent
Curious explorer, low intent
Curious explorer, low intent
↓
↓
↓
Zero-Friction Access
Zero-Friction Access
Zero-Friction Access
Land on Playground · No Installation · Instant Editor Loads
Land on Playground · No Installation · Instant Editor Loads
Land on Playground · No Installation · Instant Editor Loads
↓
↓
↓
First Value Moment
First Value Moment
First Value Moment
Writes First Line of Code · Clicks Run · Sees Output / Graph Instantly
Writes First Line of Code · Clicks Run · Sees Output / Graph Instantly
Writes First Line of Code · Clicks Run · Sees Output / Graph Instantly
↓
↓
↓
Retention Path
Retention Path
Retention Path
Create Files & Projects · Higher Completion
Create Files & Projects · Higher Completion
Create Files & Projects · Higher Completion
↓
↓
↓
Acquisition Path
Acquisition Path
Acquisition Path
Creates Account · Enrolls in Course · Converts to Paid User
Creates Account · Enrolls in Course · Converts to Paid User
Creates Account · Enrolls in Course · Converts to Paid User
↓
↓
↓
Business Impact
Business Impact
Business Impact
2,000+ Daily Sign-Ups Expanded to 5+ Languages Playground as Growth Engine
2,000+ Daily Sign-Ups Expanded to 5+ Languages Playground as Growth Engine
2,000+ Daily Sign-Ups Expanded to 5+ Languages Playground as Growth Engine
The How?
Benchmarking the best IDEs to figure out what we actually needed
Benchmarking the best IDEs to figure out what we actually needed
“I want to be able to save my code, see my work”
“It took us the entirety of my first class to set up virtual environment”
“I want to share my code and work on assignment collaboratively”
“I want to be able to save my code, see my work”
“It took us the entirety of my first class to set up virtual environment”
“I want to share my code and work on assignment collaboratively”
VS Code, Replit, PyCharm, GitHub.dev, I mapped what made each one valuable to developers, and what made each one inaccessible to learners.
The pattern was consistent: power came at the cost of approachability, and approachability usually meant stripping out the features that made practice meaningful.
VS Code, Replit, PyCharm, GitHub.dev, I mapped what made each one valuable to developers, and what made each one inaccessible to learners.
The pattern was consistent: power came at the cost of approachability, and approachability usually meant stripping out the features that made practice meaningful.
KEY INSIGHT
The goal wasn't to build a simpler IDE. It was to build a familiar one, something that felt like
the tools learners would graduate into. The interface needed to be
recognisable enough that moving to VS Code later wouldn't feel like starting over.
The goal wasn't to build a simpler IDE. It was to build a familiar one, something that felt like the tools learners would graduate into. The interface needed to be
recognisable enough that moving to VS Code later wouldn't feel like starting over.
The goal wasn't to build a simpler IDE. It was to build a familiar one, something that felt like the tools learners would graduate into. The interface needed to be
recognisable enough that moving to VS Code later wouldn't feel like starting over.
Technical Context
Decision that made it technically possible
Decision that made it technically possible
Running a real IDE in the browser is a constraint problem. Working closely with the engineering team meant understanding the stack well enough to design within it, not around it.
Every design decision had a test case and a user story attached, so engineering and design stayed in sync from the start.
Running a real IDE in the browser is a constraint problem. Working closely with the engineering team meant understanding the stack well enough to design within it, not around it.
Every design decision had a test case and a user story attached, so engineering and design stayed in sync from the start.
Key Design Decisions #1
Design for familiarity
Design for familiarity
The goal of Programiz PRO Playground is to help beginners learn Python and build real coding confidence and launch themselves into the industry
The interface was designed to feel familiar, so when learners move on to professional tools like VS Code, the transition feels natural and supports their career. Intentionally mirrored common IDE patterns when it comes to shortcuts and configurations.
The goal of Programiz PRO Playground is to help beginners learn Python and build real coding confidence and launch themselves into the industry
The interface was designed to feel familiar, so when learners move on to professional tools like VS Code, the transition feels natural and supports their career. Intentionally mirrored common IDE patterns when it comes to shortcuts and configurations.
Key Design Decisions #2
Reimagining coding as a mobile experience
Reimagining coding as a mobile experience
Whenever we think of coding we naturally associate it with using a keyboard but how would that look like when you are actually learning to code from a phone.
Touch targets, keyboard behaviour, code readability at small sizes all redesigned for how people actually use their phones, not just how desktops scale down.
Whenever we think of coding we naturally associate it with using a keyboard but how would that look like when you are actually learning to code from a phone.
Touch targets, keyboard behaviour, code readability at small sizes all redesigned for how people actually use their phones, not just how desktops scale down.
"Coding on a phone is now a real use case,
it shouldn't be an afterthought."
"Coding on a phone is now a real use case,
it shouldn't be an afterthought."
"Coding on a phone is now a real use case,
it shouldn't be an afterthought."
Key Design Decisions #3
Test-driven design, not just development
Test-driven design, not just development
Every screen had a corresponding test case and user story. Feature files became the QA foundation so what shipped matched what was designed, down to the smallest interaction.
Every screen had a corresponding test case and user story. Feature files became the QA foundation so what shipped matched what was designed, down to the smallest interaction.
Outcome
Platform as a growth engine
Platform as a growth engine
The Playground launched and became a daily driver for thousands of learners. Coding started when you opened the browser. Not a minute later.
The Playground launched and became a daily driver for thousands of learners. Coding started when you opened the browser. Not a minute later.
2,000
+
Daily signups supported by the Playground experience
22
%+
Year-on-year revenue growth, with Playground
directly in the loop
Year-on-year revenue growth
0ms
Setup time. Open the browser, write the code.
Setup time.
Open the browser,
write the code.
5
+
Languages expanded to after Python proved the
model
Languages expanded
Reflection
What I took away from this
What I took away from this
Working in a test-driven process changed how I thought about decisions. Every choice had a corresponding story. It made handoff almost disappear.
Working in a test-driven process changed how I thought about decisions. Every choice had a corresponding story. It made handoff almost disappear.
Before — Numpy Code Playground
Before — Numpy Code Playground
Before — Numpy Code Playground
Numpy Code Playground
Numpy Code Playground
Numpy Code Playground
main.py
main.py
main.py
username.csv
username.csv
username.csv
main.py
main.py
main.py
main.py
main.py
main.py
Run
Run
Run
Save
Save
Save
Files +
Files +
Files +
main.py
main.py
main.py
username.csv
username.csv
username.csv
After — Programiz PRO Playground
After — Programiz PRO Playground
After — Programiz PRO Playground
1.00
1.00
1.00
1.25
1.25
1.25
1.50
1.50
1.50
1.75
1.75
1.75
2.00
2.00
2.00
2.25
2.25
2.25
2.50
2.50
2.50
2.75
2.75
2.75
3.00
3.00
3.00
x - axis
x - axis
x - axis
My first graph!
My first graph!
My first graph!
y - axis
y - axis
y - axis
Compiler
with built in
Graph Plotter
Compiler
with built in
Graph Plotter
Compiler
with built in
Graph Plotter
Package
Manager
Package
Manager
Package
Manager
File Explorer
File Explorer
File Explorer
Code Editor
Code Editor
Code Editor
Before — Numpy Code Playground
Before — Numpy Code Playground
Before — Numpy Code Playground
Numpy Code Playground
Numpy Code Playground
Numpy Code Playground
main.py
main.py
main.py
username.csv
username.csv
username.csv
main.py
main.py
main.py
main.py
main.py
main.py
Run
Run
Save
Save
Files +
Files +
Files +
main.py
main.py
main.py
username.csv
username.csv
username.csv
After — Programiz PRO Playground
After — Programiz PRO Playground
After — Programiz PRO Playground
Code Editor
Code Editor
Code Editor
Compiler
Compiler
Compiler
Keyboard Input
Keyboard Input
Keyboard Input