I joined SPARKL as front-end engineer in summer 2014. Jacoby and Andrew, our CTO and lead engineer, were already busy building, testing and executing business processes - or mixes, as we call them - in the SPARKL Developer Console.

Problem was, the Console looked like this.


The Sequencing Engine itself worked great. But the user interface was out-dated and didn’t make much sense to anyone outside of SPARKL.

In early 2015, the team decided it was time to build a new Developer Console for upcoming pilot projects - a more advanced, intuitive version. I spent a couple of weeks every month experimenting with the design, allowing us time to make gradual improvements as we saw fit.


Top priorities

  • Allow users to edit, build an test mixes in a web browser without needing extra tools
  • Enable users to learn and use SPARKL with ease
  • Market SPARKL on and offline without scaring off users


Designing and drawing

It was a very organic process. I started off by building the configuration tree view, otherwise known as Clear Box - this is how we represent mixes. A familiar structure for our users was important, and files and folders was something they could understand.


After I finished building the first version of the tree view, I added editing capabilities to the Console - this was impossible to do with the old interface. If you needed to edit anything in a mix, you had to download it, edit it in a text editor and then upload it to the Console again.



Testing and tweaking

The first iteration of the Console took three or four months - and we just went from there. To this day we are continually tweaking and improving elements based on feedback and frustration from the rest of the team.

I started out on this project using Handlebars.js and jQuery. After a while, I moved onto Vue.js because the project was growing and getting hard to maintain. Vue was more versatile and adaptable to our needs. I started doing separate components for the Console using Vue and integrating them into SPARKL. Later on, I completely rewrote other bits of the Console from the ground up.


Tips for other designers

  • Feedback is very important
  • Work with backend early on to grab ideas and validate concepts
  • Listen to what your users are saying, even if you don't want to hear it
  • Document everything

Want to learn more? You can try a public instance of the Developer Console - see Github for more information.