p5 Web Editor (Mobile)

The p5.js web editor is a browser-based tool for creating digital art and interactive applications. Created and maintained by Cassie Tarakaijan, the editor is an environment for the p5.js javascript creative coding library developed by the Processing Foundation.

In 2020, I developed a mobile interface for the app, as a Google Summer of Code project. Despite its huge userbase and very practical interface, its layout did not translate well to mobile devices, notoriously. Through the summer I did some UX research, devised and implemented a new interface to the pre-existing functionality. This involved searching references, interviewing users, building information architecture trees, sketching wireframes, prototyping, user testing, planning implementation strategies, building a roadmap, and coding.

There are many unexpected challenges involved in coding on mobile. It’s tough to achieve a clean UI with the functionality of an IDE on a small screen. Also, designing for mobile is complicated: a lot of compromises must be made for the UI to be minimally usable. Screen real estate becomes an extremely valuable asset, and navigation must be cautiously thought out.

This is probably my biggest contribution to an open-source project yet, and it’s been a truly amazing journey.