Programiz Pro Code Playground

2023

Programiz PRO Code Playground is a browser-based integrated development environment (IDE) designed to make coding accessible to everyone, regardless of their device. The platform enables users to write, test, and share Python and C code without the need for complex installations or high-powered hardware.

As a UI Designer, I contributed to creating a seamless and responsive coding experience with inbuilt file structure and a means to manage libraries and packages all within the browser so that coding education is accessible to people even with just a mobile device.

Role: Lead Designer

Timeline: 6 months

Core Responsibilities:

UI Design
Test driven design
Quality Assurance

Role: Lead Designer

Timeline: 6 months

Core Responsibilities:

UI Design
Test driven design
Quality Assurance

The Why?

Table of Contents

Problem

Learning to code is often tied to powerful computers and resource-heavy setups, which exclude many aspiring programmers. Traditional IDEs require complex installations, making coding less accessible for individuals using mobile and tablet devices. Running Python and C programs locally requires heavy installations, which limits flexibility and accessibility.

Solution

The Programiz PRO Playground uses WebAssembly (WASM) to bring coding directly into the browser. By eliminating the need for installations, users can focus on learning and practicing coding from any device.

Impact

Over 1,500 new sign-ups daily for Programiz PRO. Empowered thousands of developers to code, visualize, and share projects directly from their browsers.

Source: Programiz PRO Playground Python IDE

The Why?

Problem

Solution

Impact

The How?

Design Process

The design process was meticulous with set milestones and a clear vision to ensure the final product addressed real-world needs.

Competitor Analysis

I analyzed leading IDEs like VS Code to understand what made them popular among developers. This inspired key design elements, such as familiarity and intuitive workflows, while identifying gaps like lack of mobile accessibility, which became opportunities for innovation.

I also researched into a lot of code playgrounds Replit, Github.dev to understand the experience of actually using a browser based IDE , the pain points of actually

Innovating Graph Visualizations

One of the most significant challenges was designing graph visualization tools for a browser-based IDE.
Traditional IDEs often open graphs in separate windows, which wasn’t feasible here. Additionally, integrating graphs within a dark theme posed visual clarity issues. I designed an expandable, in-IDE visualization feature that allowed users to view graphs seamlessly without disrupting their workflow.

The How?

The What?

Project Outcome

Cross-Device Compatibility:

Optimized for desktops, tablets, and mobile devices, ensuring universal access.

Integrated Visualization:

Graphs and code outputs displayed directly within the IDE for better usability.

Intuitive Interface:

A design inspired by VS Code that balanced familiarity with accessibility.

Project Status

Launched successfully, the Programiz PRO Playground continues to grow, attracting thousands of new users daily and cementing its role as a leading tool for accessible coding education.

Takeaway

This project reinforced the importance of designing with empathy and inclusion in mind. By addressing barriers to access, I contributes to a product that helps people worldwide to code confidently, regardless of their device or resources. It’s a testament to the impact thoughtful design can have in breaking down technological barriers.

Programiz Pro Code Playground