Programiz Pro Code Playground

Design Research

"How might we make learning to code accessible so that it is not tied with resource heavy setups"

The goal was to design a fast, familiar, and device-agnostic coding environment that let anyone, from students to professionals, code instantly, without installations or high-end laptops.

I analyzed leading IDEs like VS Code to understand what made them popular among developers. IDEs like VS Code or PyCharm are powerful but inaccessible for many learners globally.

Most require, installing dependencies, setting up virtual environments, and maintaining local configurations. For learners using shared or low-spec devices, these steps are enough to give up before they begin.

I started by benchmarking VS Code, Replit, and GitHub.dev, identifying what developers valued most speed, familiarity, and structure.

During user research, I discovered:

• Setting up local environments took up to half of a first coding class.

• Many learners coded on mobile or tablets but IDEs weren’t optimized for small screens.

• Teachers struggled to onboard classes quickly due to installation errors.

💬 “It took us the entire first class just to set up our environments.”
💬 “I want to save my progress and share it easily.”

These quotes revealed both emotional and practical pain points: the frustration of setup, and the need for collaboration.

Design Challenges

Working entirely in the browser meant rethinking common IDE conventions:

Edge Cases

• Long filenames, deep folder nesting, and file naming errors needed visual handling.

Cross-Device Performance

• On mobile, keyboard input and code readability had to remain smooth.

Dark Mode Visualization

• Graph plotting and color contrast required a balanced palette that worked across devices and lighting conditions.

“How do we make a professional tool approachable for first-time coders?”

Key Design Decisions

Familiar Environment

• A layout to reduce learning friction which people will be familiar with.

Integrated Visualization

• Code outputs and graphs render directly in-app.

Cross-Device Compatibility

• Responsive interface for desktop, tablet, and phone.

Instant Start

• “No local setup” entry point for new users.

I worked closely with developers in a test-driven, iterative process where design and engineering evolved hand in hand. Each screen in the workflow was accompanied by test cases and user stories, so that anyone on the team could trace the expected behavior and intent behind every interaction.

These feature files later became the foundation for QA testing, ensuring that the final experience matched the design vision down to the smallest detail.

I frequently tested new builds as both a designer and a user, coding inside the playground to understand how the interface behaved in real conditions. This helped me spot subtle usability issues early.

Together with the development team, we also built continuous feedback loops through quick usability sessions with learners, validating interactions from typing to code output visualization.

This phase also involved testing browser performance limits for graph plotting and real-time code execution, ensuring the experience remained fast, stable, and consistent across devices.