Project 1: The Unseen Surround — Instagram Station
Environments Studio IV, Spring 2019 — Antonio Song
Background
Visual language is universal — code is not.
While user-centered design principles have certainly made today’s products much more user-friendly and intuitive, we have also learned to protect users from the complexity of these products.
Features and functionalities that utilize complex computations and data relationships are practically concealed from users. Certainly, users benefit from such approaches. So far, this user-centered design principle has proven to be successful in the current product landscape.
However, coming from an Information Systems background with experience in full-stack engineering, I couldn’t help but notice the uneven distribution of attention the user-facing interfaces and the back-end structure that enables the entire experience receive.
There are many communities where people actively share and appreciate each other’s visual work — websites, app designs, illustrations and what not. However, communities of this sort for back-end code is either:
1. Difficult to discover
2. Or even if they do exist, very difficult for the general population to access and appreciate the beauty of code.
We can easily find people who appreciate a good user interface, and even good user experience. On the other hand, it’s not as easy to find people who appreciate the efficiency of Instagram feed’s sorting algorithm.
Project Direction
Lifting the user interface off of Instagram
I learned how to code an image filter using image manipulation in 15–122 Principles of Imperative Computation. I was pleasantly surprised by how image filters were actually created through a series of coded filter values.
I originally thought image filters would be much harder to implement, and therefore I never really tried to understand the theory behind them. However, after learning how image manipulation works, it was surprisingly easier and logical than I thought.
This hands-on experience got me thinking — what if we removed Instagram’s user interface entirely, and let people interact with the back-end directly? If I can get people to even notice some of the back-end processes, that in itself would be an achievement.
Why Instagram?
To maximize the impact of the project, I had to make the experience as universally relatable as possible, at least in the context of the assignment, where the audience of the exhibition would be CMU students and faculty members.
A product that aligned well with my past experiences with image manipulation and current trend societal trends was Instagram. A widely used and one of the most popular social network, which places heavy emphasis on its ability to edit photos within the app. How fitting!
Ideation — Physicalizing the Instagram experience
I thought about many ways to physicalize the back-end processes so that the visitors could have an experience that it not only easy for them to understand but also informative and would expose them to the unseen world of back-end.
Initial thoughts on features that I could possibly physicalize:
- Importing photo to Instagram — I planned on using a portable photo printer that I owned (an HP Sprocket) and using the physical photo to do all sorts of stuff to it!
- Applying filter — by printing filters on a clear film, and applying it over a polaroid photo. Further exploration and prototyping is required.
- GPS location tracking — using multiple strings hanging from the ceiling to remind the user of being constantly tracked by multiple satellites throughout the process.
- The post (captions, hashtags) — using foam core blocks or something similar to physicalize the concept of a single post object.
- The feed — connecting multiple foam cores together to physicalize a data structure, whether that is a linked list, an array, or a stack. Further research is required.
- The feed scroll — making use of a scrolling mechanism to simulate the feed scroll (up and down). Possible ideas included using the projector screen, the clothes hanger with a paper roll, or using a blind.
Filter Prototyping and Experimentations
Printing on clear acetate? Is that a thing?
In my ultra high-def imaginations (I’m a highly visual thinker), it was absolutely possible to print on clear acetate and to overlap the acetate with a Polaroid photo to simulate the effect of an Instagram filter. However, I’ve never seen anyone print on an acetate before (as the ink would smudge off immediately), so I knew a lot of exploration and experimentation would be necessary.
Professor Dan Lockton suggested I reach out to Professor Dylan Vitone, who has extensive experiences in the field of photography.
Dylan mentioned that while he only has acetates that are meant to be produced in a larger size, and which are cloudier (not as clear) than those that I’d want to use, he recommended me to search online for clear acetates that could print on Inkjet printers.
It made sense for me to make use of the Inkjet printers, simply because it was due to the accessibility and the frequency of prints I would have to make.
And then I found this gold mine…
She has essentially done exactly what I was looking to achieve! After some Amazon searches, I even found Inkjet-clear films with adhesive backs, which was perfect for my project.
Filter creation
Now that I validated the possibility of the idea, it was time to create some filters. In my ever-perfect imaginations, the process was very easy and straightforward. I would sample some of the filters I see on Instagram, add similar color gradients on a separate layer, print them on the clear film, and overlap it with a Polaroid photo.
And as usual, it was not that simple.
Issue #1 — Subtractive color mixing
I followed some online tutorials on creating “Instagram-like” filters. However, all of the tutorials relied heavily on adjusting the pixel values of the image itself, by using the Adjustment features in Photoshop. I quickly realized I cannot achieve this by overlaying a clear acetate on top of a physical image. My approach would have to completely rely on performing subtractive color mixing.
Issue #2 — No printing whites!
After that realization, I started creating custom filters without using the Adjustment features on Photoshop, but rather by using multiple gradients to establish the visual effects of the Instagram filters. It looked less like Instagram filters themselves, but I still managed to create some interesting effects. I created some sample filters on photoshop, and they looked exactly as I imagined.
But when I printed the filter, it looked nothing like the digital rendering of the applied filter. I quickly realized:
Printers don’t print white ink.
The cloudy effect I was hoping to create using whites in the gradients was not printable on the inkjet printer. I could simulate the effect somewhat using greys, but it did not achieve the visuals that I was hoping for.
Issue #3–100% opacity on Photoshop is still translucent on clear film
Another side effect of printing on a clear film that I did not anticipate was that the resulting filters were way too light. Because of the innate nature of the clear film, all colors will have translucency. This meant that the representation in Photoshop was different than that of the real product, which made it difficult for me to create iterations.
Fortunately, I’ve put in some sample solid colors (red and blue) to test the printer’s performance, and it helped me discover this phenomenon.
Issue #4 — Finding the right blending option to calibrate Photoshop vs. the real world
To close the gap between Photoshop’s representation and the real product, I tried to experiment with different blending options on Photoshop. It turns out the Darken mode closely represents the resulting product, because of the way it replaces lighter colors with the darker blend color.
Issue #5 — Creating good filters using the Darken mode
Working in Darken mode meant all the restrictions innate to the clear film was now visible in Photoshop. Creating legitimate filters that actually enhanced the photos was extremely difficult. Using whites was not an option, so I couldn’t express the change in brightness and contrast. Because I can only use additive color mixing, the photos looked darker with colors on top of them. Since the resulting filter will always be translucent, it was impossible to produce an opaque surface covered with colors. As a result, some filters were not so visible on certain images with a similar color palette.
Final Filter Renders
Because the filter had limited successes depending on the color palette of the photos, I created multiple filters with different color schemes to compensate for the limitations. I tried to experiment with different colors and gradient patterns to give a different look to each of the filters.
Pixel Representation
In order to incorporate the theory of filters and pixel manipulation, I really liked the idea of cutting up the filters in smaller squares. This would be a more laborious task for the users, and it would inform the users of the complexity of filter masking.
The coordinates represent the pixel coordinates in a 2D-array, made by columns and rows. The coordinate sheet was printed on a separate clear film and was overlapped on top of the actual film.
I tested two different iterations on a few of my friends, and the results were unanimous — 2x3 cutout was already arduous enough. For a realistic experience, I decided to proceed with a 2x3 cutout.
However, the issue was that I didn’t want the users scrambling to search for all the pieces. I wanted the pixels to be cut out, yet to still retain its original shape.
I decided to apply the coordinate layer on top of a transfer film (which has weak adhesive properties), then apply that transfer film on top of the actual filters. After cutting out the consolidated filter, I then stuck them one by one, back onto the backing sheet of the adhesive acetate to retain its original form.
I then also included an instructional “peel” tab the users could pull on which would nicely remove the coordinate sheet to “onboard” the users nicely to the action of peeling the coordinate sheet.
Post Slab Prototyping and Experimentations
A single database object
A single Instagram post is essentially a single object in a database. I already had a fairly good idea of how I wanted to represent this — a rectangular slab with multiple fields to fill in, such as username, location, image, caption, and hashtag.
The initial choice of material was a foam core. It had a nice thickness and was easy to cut in multiple rectangles. However, when trying to drill a neat hole in the foam core, it proved to be more difficult than I thought.
Then, TA Joseph Hines, suggested I explore the use of laser-cutting acrylic to produce a higher-fidelity version of the post slab. Turns out, the laser cutter does the job so well.
Feed Prototyping
A doubly-linked list
A short interview with an Instagram software engineer has revealed that Instagram’s feed uses a doubly-linked list structure to create its public feed. This was great because I had an idea for a wall of hanging post slabs connected with strings. In fact, this research was done at a very early stage, so I was able to anticipate needing to drill four holes on the post slab in total.
String or metal?
I had many ways to connect the individual post slabs together. Two methods that I chose to explore were hemp yarns and metal staples. It was evident after comparing the two options that the metal staples indeed seemed more fitting to describe the “back-end” processes that I was trying to show. Metallic, calculated and sharp-ended.
Putting the Station Together
The Signage
Signage was created by laser-cutting acrylic in the shape of the Instagram logo, then putting a couple of layers together to give a sense of depth to the logo.
Then, the Instagram gradient was laser printed on a regular letter-sized paper, carefully cut out and pasted onto the acrylic logo.
The text “Station” was printed using a vinyl printer and was put on the wall using a transfer film.
Instagram Station Mobile Web
In order to guide the users through the steps and to further educate them on the back-end actions that were being physicalized, I created a simple mobile website with contextual animations to further help the understanding of the concepts.
The website was created using Webflow, and animations were created using Principle.
