20 November 2017 – 15 December 2017

The Brief
Week 1 — Launch
Week 2 — Concept Development
Week 3 — Final Tests
Github Repository
The Exhibition
Documentation Workshop
Documentation Videos

The Brief

What considerations should we have as designers of interactive information systems? How can we deliver contextual content in a staged and understandable way? What are the design affordances and special cases in creating media for public consumption? These questions and others will be explored in this intense and public-facing project.

Students will work individually to create large-scale, real-world interactive media installations for a large public museum space. Approaches can range from more interpretative linear media eg. triggered video sequences of edited clips, to more informative text works eg. interactive labelling and pop-out information. All work is likely to use projection and we have support from an external AV company in the realisation of work. This challenging project involves planning, research, wireframing, content creation and editing, and use of interactive methodologies and technologies.


9 October 2017

Prior to the start of this project, we visited the Glasgow Vintage Vehicle Trust at the Bridgeton Garage. I was able to take a lot of preliminary photographs, and found myself drawn to a lot of little details about the buses and the space, particularly typographical details of idiosyncratic lettering and whatnot. Our planning also began long before the launch of this project so that we would have a place to start from on day one. We talked a lot about delivering for a client, so we front loaded a lot of the planning work. While we are a team delivering an exhibition, we also get individual responsibilities which in practice looks like owning a certain “project” or exhibit space for the event. Mine is a typographical study based on my initial interest in letterforms present. Presumably, I’ll return to the garage to take more photographs and select a final number to present. I’m quite excited to get to work on an actual production piece, especially since that’s the one thing that I specifically sought out in a different education program.

Week 1 — Launch

20 November 2017 – 24 November 2017

Launch with Damien Smith from ISO

  • ISO: Digital Experience Design
  • Hook someone in the first 15 seconds, retain attention in 45 seconds, people fatigued after two minutes
  • Project Aims Brief:
    • Admin Info
      • Project Title
      • Team Name
      • Core Team Members
      • Client
    • Overview (2-3 paragraphs; digestible; tweet length)
    • Audience (must be specific!)
    • Context (where does this sit in a museum?)
      • Why/how this fits in the museum
      • Don’t have to tell a big story—focus on one small slice
    • Outcome/Take-away (what do we want the audience to take away from the experience?)
    • Duration (how long is the experience in its as-delivered form?)
    • Narrative (an extended piece that tells what the interactive is trying to communicate and the content it contains)
    • Game Mechanics (detail the main interaction methods and the user experience)
    • Project Deliverables
    • Project Plan
  • Project Methodology
    • Concept and specification
    • Detail Design
    • Production
    • Post-Production
    • Commissioning
  • Complex things are made up of many, little, simpler things!


  • Extension of takeaway
  • Instagram? Animation? Downloadable?
  • Exhibit with life beyond the installation
  • How to access social media and how to get people to talk about the visit?
  • Shareable piece of media?
  • Simple web template with images for a subdirectory of their website
  • Give it a URL that people can share
  • Hashtag it?
  • Connect with the people
  • Archive capability of the strictly visual
  • Just typography
  • Prints? Book?
  • Simple is okay 🙂
  • Where can this be delivered?
    • Front of bus (elements of obscurity etc.)
    • Side windows

Site Visit #2

  • More photos
  • Selected red single decker bus to display in the window


  • The center window was the only one without a black crossbar that would potentially eclipse part of the display.

Design Detail Planning

  • Number of images
  • Transition for images
  • Duration of each
  • Mockup animation on the side of the bus (three panels)
  • Design choices for transition timing
  • Lower resolution (3 panels) or higher resolution (1 panel)
  • Takeaways/impressions

Mockup Video

Week 2 — Concept Development

27 November 2017 – 01 December 2017

Meeting with Damien Smith

  • Instagram for content
  • Give login credentials to client
  • Good, simple afterlife for project
  • Back project?
  • Use blackout shade material to project on


I had the option to either make a looping video of the images or have them play at random through a Processing sketch. Regardless, I chose to use 24 images that would play for five seconds each, giving me two minutes of content either way. Damien had said that that’s around the attention span for someone at an interaction exhibit, so a video would loop only once for them if they stayed for the whole thing. As for a randomizer, five seconds seemed to be a good amount of time for people to process the image.

I was originally leaning towards piecing a video together in Premiere because I could control the order and have the images fade into one another. With the fade, I would play to the obscurity of having small, inconsequential details being displayed at such a large size. It would have been a two-minute .mp4 that would have looped as a standalone production (sizing through VPT). However, after speaking with Damien and Paul, I chose to display the 24 images in a random sequence using Processing. Damien suggested having some kind of light display accompaniment to increase the immersive quality for the viewer, and Paul let me know that we have access to addressable LED strips that could be placed underneath the bus.

In Processing, I needed a way to programmatically read in the 24 images, randomly select one to display, and attach a color to each image. I first tackled the 24 images read-in, which was fairly simple. I had already named them 1.jpg–24.jpg, so I changed 24.jpg to 0.jpg to account for the 0th index. The for-loop is:

for(int i = 0; i < images.length; i++){
images[i]=loadImage(str(i) + “.jpg”);

After I had that working, I spoke to Jen about what input the addressable LEDs took and she said that I could just assign each color a float value and the LEDs would receive the RGB values using a library through an Arduino. The logic for that would then be:

if (random number picks image 5) then (send color float)

But 24 if statements is ridiculous. I used a switch case instead of if statements to classify each image. The final code is in the Github repository. I simplified the number of colors by having six: white, red, orange, yellow, green, and blue. Here’s the switch case:switch-case

New Lights

We found out that the lights are Chroma-Q™ Color Split™ and we’ll write the values right from Processing. Jen wrote up a quick sketch that changed colors based on a switch case and I adapted it for my image randomizer code. I also created a Processing sketch that was just for the image randomizing in case the lights didn’t quite look the way we wanted them to. Both were updated in the Github.

Week 3 — Final Tests

04 December 2017 – 08 December 2017

Meeting with Damien Smith

  • Consider creating a print artifact (photograph book—coffee table style?)
  • Definitely create online repository where people can view the images after the exhibit
  • Most artwork budgets are spent heavily on the documentation aspect
  • Paul will help work through a randomizer that won’t include repeats

Online Repository

I needed somewhere to host the 24 images, as well as some documentation about the exhibit itself. I was going to host it as a part of my portfolio website, but I wanted it to be a bit more robust than my own custom CSS. It was at this point that I recalled that I have access to Adobe MyPortfolio through Creative Cloud, so I’m hosting the images at marachilds.myportfolio.com for the time being. [NOW ANTIQUATED] I have two sections: the photographs, where each photograph is available for viewing; and the exhibit, where I plan on including pieces about the documentation process that will begin next week.

Non-repeating Randomizer

While random images are fine, Paul said that he would quickly help develop a non-repeating randomizer function so that if somebody wants to watch the entire loop, they will see each of the 24 unique images only once. The loop has a duration of two minutes, which is just about the length of people’s attention spans, so I think it will be best for that to happen.

The Exhibition

08 & 09 December 2017

As a whole, the exhibition went over extremely well. Although it was freezing and below freezing during the course of set up, show, and take down, we had plenty of chocolate biscuits and tea to keep us warm enough. I was pleasantly surprised that we didn’t run into any major technical difficulties, especially since we’d been on such a tight turnaround time. Just over three weeks for an exhibition in a space that size isn’t easy, and it was so cool to see it come together. As a team, we got really positive feedback from visitors of the exhibition. Seeing as this was also an exercise in teamwork of sort, it was cool to have everybody there helping each other out and to see the group effort that isn’t always quite as obvious in studio.

During my set up, Jen and I experimented with a few different settings on the DMX lights, and settled for RGBa. From the code I had already written, we tested the different channels to find out which channel set each color. After ascertaining the channel numbers and setting the lights to work in daisy chain with only one input source, I selected the different RGB values for each color category (of photographs). It was quite fortunate to have everything work on the first try, although it feels like I had done the work ahead of time to have things work without much trouble—that and my set up was really fairly simple. Back projecting looked really clean, and the screen fit snugly up against the window frame such that no clamps were necessary. Setting up the second day was as simple as plugging in the lights, turning on the projector, connecting my computer with the HDMI cord, connecting the Teensy Arduino with DMX connector, and running the application created through Processing.

All Images

Documentation Workshop

  • What are you documenting? Who are you documenting it for?
  • Presenting the exhibit
    • Summary (~100 words)
    • Breakdown of information (3-5 bullet points as a road map)
    • Give due time to the process
    • Photos like filmmaking—establishing shots, details, etc.
    • Voiceovers are good to get across a lot of info at three words per second
    • Sound effects to help with the immersive aspect, an involved edit
    • Music—slightly abstract
  • Use each choice to tell the story


During the exhibition itself, I found it fun to watch others’ reactions to the exhibit. Some children wandering past were excited when the lights changed color, and stomped their feet around waiting for it to change again. I even got the chance to speak to some people who said it was their favorite exhibit—one of the weirdest and most exciting moments I think I’ve had in designing for others thus far. Occasionally, people interacted with the space and the exhibition as a whole in ways somewhat differently than what I would have expected. For example, I was wandering over to the bus that my project was running through and I saw somebody in the driver’s seat. I climbed aboard and saw it was a mother who was asking her school-aged son to take a picture of her. I waited to see what they would do once I was also on the bus, and she suggested that they move towards the back of the bus, even about to step over the cords running through it. This confused me, because the entrance to my bus was in the middle of the dark part of the garage, had no signs indicating any sort of allowance for boarding, and was most definitely not “inviting.” Either way, we didn’t have permission to allow guests on the vehicles, so I let her know that that wasn’t allowed.

Throughout both evenings that the exhibition ran, I took some footage of my exhibit and others’ in action and being interacted with, as well as some general stills. At the end of the second evening, I was really proud of how it had all gone. The public-facing aspect of this project was probably what I was looking forward to the most when I decided to join this program, and to have it go so well was a wonderful experience.

Canvas Feedback

Screen Shot 2018-05-03 at 8.28.35 PM.png

Documentation Videos

First Video

Revised Video

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s