The goal was to design an Integrated Development Environment that would become the go-to site to learn to code. The tool was to be as functional on mobile as it was on desktop and allow users to easily share their code. 

This mid-fidelity wireframe of the "Project View" is where a student would spend most of their time. If you're familiar with IDEs, you might appreciate it's simplicity. 

To see the finished product, check out Codiva.io. 

For questions about the platform, please contact Jayaprabhakar Kadarkarai

Brief

Users & Uses

Students - Learning to code or learning Java and want to quickly try out examples and practice problems.

Experienced programmers preparing for interviews - Want to practice solving algorithms problems and brush up their programming skills without autocomplete.

Bloggers - Writing programming related blogs, and want to share the code such that their readers can quickly try out, how it works.

While we anticipate all uses, the student use case is our primary focus.

Functionality

Research

After learning about the users we were to target and the mandatory functionality we were to offer, I looked at competitors in the space. 

Text Editor + Compiler

Desktop IDE

Strengths

• Comprehensive set of features

• Supports a large number of languages with plugins

• Code completion, refactoring, error corrections

• Works offline

Weekness

• Additional Installation

• Heavy and needs a decent quality desktop

Cloud IDEs

Strengths

• No installation needed

• Suitable for students

• Simple to learn and use

Weekness

• Does not work on mobile

• Login required - not suitable for blogging or forum use-case

Initial Sketches

When I started sketching, there were two high level objectives that informed my process.

1. Mobile-first design- The client wanted a desktop view prototype built, but wanted to ensure that the tool worked well on mobile. For this reason I started with mobile sketches, then backed into the larger, desktop view. 
2. Get users to try to product- This was to be the main objective of the homepage. Getting the user into the developing environment (the "Project View") was more important than getting them to create an account.

Iterate

On such a tight timeline, most of my input came from the client as opposed to users. We had nightly meetings to discuss progress made that day and to establish next steps. 

I was able to conduct one user test over the week which gave great insight into how the "File Explorer" was managed.

Prototype

This is the final prototype that highlights the Homepage, the Account Creation and Sign In flows, and the Project View. 

View Prototype