Back-end Development

Once I had all of the system aspects in place, and had collected the data with my participant, Anna, it was time to put it all together into an interactive viewer. To do so, I worked with an old friend and game developer, Nick Koga. He graciously gifted me about 20 hours of free development work in exchange for strategy work on his recent game launch (check it out! it's a great RPG). 

This aspect of the process was an exercise in design management. 

We discussed the different outputs and how the viewing tool should best be created. Some of our initial thoughts were to use Unity, .Net, or to develop a Java applet. Ultimately though, our constraints were that the application needed to:

  • Live online
  • Be lightweight and load on the page quickly and without additional plug-ins 
  • Be hackable
  • Be able to load new data 

This led us to the idea of developing specifically for the web, using Javascript, HTML, and CSS. Though Nick wasn't as well-versed in front-end development, we worked together to figure out how the data would be tie together through JSON files. The spine of this system of interoperability is timestamp. As the designer and researcher, I ensured that every type of data collected was structured in a CSV file according to time. 

Front-end Development

Once the data structures were set and we knew how all the pieces were talking together, I started to design mock-ups of how the prototype would look. Unlike earlier prototypes, this wasn't visual design in a vacuum, but rather with the knowledge that I only had about a set amount of development time, and would need to rely on additional technical advice for help structuring the CSS. This late-stage mock-up was close to the final product we developed: