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.
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.
- Facilitate mobile use
- Reading code
- Editing code
- Copy project
- Create New File
- View All Projects
- Log in
- Share/ Unshare Project
- Create New Project
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
Every desktop has text editors- only the compiler needs to be installed.
- Edit, compile run cycle is long and can increase context switching delay
Comprehensive set of features
Supports a large number of languages with plugins
Code completion, refactoring, error corrections
- Works offline
- Heavy and needs a decent quality desktop
No installation needed
Suitable for students
Simple to learn and use
Does not work on mobile
Login required - not suitable for blogging or forum use-case
When I started sketching, there were two high level objectives that informed my process.
- 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.
- 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.
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.
This is the final prototype that highlights the Homepage, the Account Creation and Sign In flows, and the Project View.