Designing a Browser Python Sandbox
Designing a Browser Python Sandbox
Product Designer
Nov 2022 - Jun 2023
Product Owner
Software Engineer
Project Manager
Web Assembly
Pyodide
Typescript
Design Impact
Design Impact
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 an 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 an 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?
Setting up shouldn't stop someone
from learning to code
Setting up shouldn't stop someone
from learning to code
"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.
Business Context
Python courses make up 60% of annual revenue
Python courses make up 60% of annual revenue
Programiz PRO is consistently ranked among the best places to learn Python. So improving the Python learning journey was directly tied to the business.
Programiz PRO is consistently ranked among the best places to learn Python. So improving the Python learning journey was directly tied to the business.
The Actual Problem
Moving from a guided course to running Python locally forced a context switch
Moving from a guided course to running Python locally forced a context switch
This handoff introduced the setup friction (installing Python, managing packages, environment mismatches). And Programiz PRO was losing returning learners to it.
This handoff introduced the setup friction (installing Python, managing packages, environment mismatches). And Programiz PRO was losing returning learners to it.
Phase
Discover
Environment Setup
First Code
Practice
Convert
Behaviors
· Googles "learn Python"
· Lands on Programiz PRO
· Starts a lesson
· Downloads Python installer
· Runs installer
· Debugs PATH errors
· Creates virtual env
· Runs pip install
· Opens IDE or terminal
· Types first lines
· Clicks run / execute
· Tries to import matplotlib
· Hits dependency error
· Searches Stack Overflow
· Completes module
· Decides to continue (or leave)
Feelings
Excited. Motivated to start. Feels like this time it will
work.
Confused. Frustrated. Why is this so hard before I've
even started?
Relieved. Curious. But anxious it could break again.
Stuck. Embarrassed. Considers giving up.
Either proud or gone. No middle ground.
Emotion Curve
Pain Points
—
Setup consumes entire first session. High drop-off
before writing a single line.
Works on their machine but not others. No way to save
or share.
Package install fails. Environment mismatches.
Excitement turns to frustration.
North Star
Reduce friction to near-zero, close the loop
Reduce friction to near-zero, close the loop
The gap between finishing a course and actually running Python was where users disappeared. Being able to instantly try out all the lessons they learned encourages abetter learning journey and overall higher rate of course completion.
The gap between finishing a course and actually running Python was where users disappeared. Being able to instantly try out all the lessons they learned encourages abetter learning journey and overall higher rate of course completion.
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?
Understanding user behavior above all
Understanding user behavior above all
I worked with the customer success team, ran user interviews, and visited classrooms watching real people try to set up Python for the first time.
I worked with the customer success team, ran user interviews, and visited classrooms watching real people try to set up Python for the first time.
“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”
Competitor Analysis
Benchmarking the best IDEs to figure out what we actually needed
Benchmarking the best IDEs to figure out what we actually needed
FEATURE SEGMENT
FEATURE SEGMENT
FEATURE SEGMENT
DATaCamp
DATaCamp
DATaCamp
One Compiler
One Compiler
One Compiler
VS Code
VS Code
VS Code
Programiz PRO
Programiz PRO
Programiz PRO
Zero Installation Required
Zero Installation Required
Zero Installation Required
Pre loaded Python Packages
Pre loaded Python Packages
Pre loaded Python Packages
Built in Graph Visualization
Built in Graph Visualization
Built in Graph Visualization
File Explorer and Project Structure
File Explorer and Project Structure
File Explorer and Project Structure
Mobile Optimized IDE
Mobile Optimized IDE
Mobile Optimized IDE
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.
Timeline
Shipped in less than 6 months
Shipped in less than 6 months
The product roadmap had about five major milestones spread across six months, and we worked in two-week sprints.
The product roadmap had about five major milestones spread across six months, and we worked in two-week sprints.
Milestone 1
Milestone 1
Milestone 2
Milestone 2
Milestone 3
Milestone 3
Milestone 4
Milestone 4
Milestone 5
Milestone 5
Milestone 6
Milestone 6
Strategy
Strategy
Research & Strategy
Research & Strategy
UI Solution
UI Solution
Design & Prototyping
Design & Prototyping
Product Dev
Product Dev
Engineering Build
Engineering Build
QA Testing
QA Testing
Quality Assurance
Quality Assurance
Launch
Launch
🚀 Launch
🚀 Launch
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.
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
Code Playground as a growth engine
Code Playground 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.
5+
Languages Expanded
22%+
Year on year revenue growth
2K
Daily Signups
0ms
Setup Time
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!
I also learned to design for engineers and developers as a user group.
Working in a test-driven process changed how I thought about decisions. Every choice had a corresponding story. It made handoff almost disappear!
I also learned to design for engineers and developers as a user group.
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