Cultural Canvas Case Study

Axel Mortimer
Nov 9, 2017 · 4 min read

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.

So after this, my ideal navigation layout became users being able to simply pinch-and-zoom and select the tiles as they please. However, I had fixed UI elements for the color selection at the bottom of the screen, and pinch and zoom meant those would expand with the rest of the page. This is where development struggles started to occur. I had two options to allow pinch-and-zoom navigation. The first option was to disable the browser’s pinch and zoom and incorporate JavaScript that acted in place of it, so the color selection wouldn’t be forced to expand. However, Safari had disabled the ability to . The second option was to keep natural pinch and zoom, but use JavaScript to resize the color selection area in proportion to the new viewport. However, through much trial and error, I couldn’t get this to work either. I settled for disabling natural pinch and zoom and adding a zoom in/zoom out button in the bottom right hand corner above the color selection, Thankfully, users didn’t seem to mind the less intuitive Plan B, and once they saw the button their mental model switched from “pinch and zoom” to “press the +/- buttons”.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade