🌈 IDE

An **integrated development environment (**IDE) is a software application that helps programmers develop software code efficiently.

👀 Scaler Topics

I am an intern at Scaler Topics, and during my internship time, I worked on a project called IDE from end to end. About Scaler, Scaler is an up-skilling platform for working tech professionals, and Scaler Topics is a free resource by Scaler.

💪🏽 Motivation

The motivation for launching a new IDE was that online IDEs have a lot of traffic, and we want to channelise them to the Scaler Topics Platform. The main goal of tools is also to generate leads through events and courses. So we are currently pitching the events/courses on IDE to pass them into the funnel of the whole conversion to the paid program.

🪢  Constraints

I was working with Scaler Topics, so they had their design system, and I was restrained from stepping out of that. Also, as it is an actual world project, business was expected out of it, and so it came with a lot of constraints and a big challenge.

🔍 Research

So before starting the design process, I began with Competitive Research. During Competitive Research, I searched for different platforms with online IDEs and started to analyse every website and mark down the particular website's pros and cons.

🥢Let’s Start Designing

After completing the competitive research, the next step was creating wireframes for the new IDE. I started with low-fidelity wireframes to iterate on different design ideas and gather feedback quickly. I didn’t rush through this process as throughout the design process, I made sure to keep the user experience in mind and prioritise ease of use and functionality.

🩻 Low-Fidelity Wireframes

Initially, I was concerned with the placement of elements and tried different layouts for the same. I’ll discuss them below.

Option 1️⃣

In option 1, I focused on laying out all the elements. The button for changing the language and buttons for other features have been placed to attract the user's attention. The run button is kept inside the code window as the compiler supports multiple tabs, and keeping the run button outside could easily confuse the user as to if the run button will run all the code snippets. Here I tried to maximise the width of the code window and the input-output window, as these areas contain text and can be lengthy.