Challenge

 

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. 

 
 
 

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

Critical:

  • Facilitate mobile use
  • Reading code
  • Editing code
  • "Run"
  • Copy project
  • Create New File
  • View All Projects

Important:

  • Register
  • Log in
  • Share/ Unshare Project
  • Create New Project
 
 
 

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

 
 

Strengths

  • Lightweight

  • Every desktop has text editors- only the compiler needs to be installed.

  • Works offline

Weaknesses

  • Edit, compile run cycle is long and can increase context switching delay
 
 
 

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.