This is a case study for my IDM T380 (Experimental Interactive Exhibits) project. Here is the live prototype. (Keep in mind, it isn’t responsive, because it was designed for a TV screen whose width would not change. Refreshing the page will readjust to fit whatever width your browser is at.)
The mobile internet has brought us into our age where changing our environment at the touch of our fingertips is no longer a fantasy. In this elective class, we were tasked to build upon that by creating something of an interactive art exhibit using a combination of HTML/CSS/JS and Node.js/WebSockets. The goal was that users would be able to visit your website on their mobile device and change something that would update for all users.
This project immediately reminded me of the April Fool’s experiment that Reddit ran in 2017. They created a 1000x1000 grid where users could change the color of one block on the grid every 10 minutes. The results were fascinating and what can only be described as a literal “snapshot” of Reddit’s online culture. You can see the 72 hour timelapse of the project here.
Getting millions of people to contribute to an online artboard is impressive, and it got me thinking of what a similar project would look like it was just for Philadelphia? Or NYC? Or Drexel? Would it be filled with cheesesteaks instead of internet memes? So I set out to create a “localized” version of the same experiment, where users could connect their phone to a display with a custom link.
The most interesting design challenge that I had to deal with was handling how users navigated throughout the board on their phones. My first idea was to handle navigation here like Uber does; keep the selected tile in the center of their screen as they scroll around. I conducted usability testing on this first method, but users did not agree. Users consistently attempted standard freeform navigation practices instead of the Uber-esque method I was trying to push. Many users felt frustrated when they couldn’t select a tile with their finger, and kept trying to pinch-and-zoom to make it easier for them to do so. I realize that Uber’s method works because there aren’t multiple areas to select, as well as precision being much more important on a map.
Another interesting aspect was the lockout once you change the color of a block. Many users expressed confusion at this design choice, especially those who did not use Reddit’s /r/place (which had a 5 or 10 min. lockout). I did this for similar reasons as Reddit, being that giving one person the power to spam the creation they want . I ideally would have set it at around 30 seconds to keep users engaged but still encourage collaboration; the only reason it was at 5 seconds was for testing purposes. However, users told me that the five seconds, while somewhat frustrating, actually bolstered their anticipation. So I decided to stick with this time period in my final version.
Despite some of the development challenges I ran into, I am happy with how this project turned out. I enjoyed learning how HTML/CSS/JS can combine with Node.js/WebSockets, which were new to me, to create an engaging crossplatform experience. I also learned how useful usability testing can be in figuring out the mental models that your users bring to your product, and how to design to enhance those.