UX Design




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





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
  • "Run"
  • Copy project
  • Create New File
  • View All Projects


  • Register
  • 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



  • Lightweight

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

  • Works offline


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

Desktop IDE



  • Comprehensive set of features

  • Supports a large number of languages with plugins

  • Code completion, refactoring, error corrections

  • Works offline


  • Additional Installation

  • Heavy and needs a decent quality desktop

Cloud IDEs



  • 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


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.



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.