interaction design + illustration
Screen Shot 2017-02-16 at 4.28.32 PM.png

Me, Us, Them


Breaking down Digital Architecture

in collaboration with Lily Fulop and Lucy Yu

Winner of Design excellence award by AIGA PGH365

In this project, we chose to analyze Instagram to explore how each interface is divided by me content (things only the user posts, or sections that only the user can see, i.e., profile information, the user's photos), us content(mutual content that is shared between the user and friends, i.e., direct messages, comments), and them content (things that are not related to the user, i.e., discover posts and other users).



Using Facebook and Snapchat as supporting platforms, we took screenshots of the primary interfaces to diagram in Illustrator to gather quantitative data. Our artboards ended up looking like this. Purple was "me", pink was "us", and orange was "them". (Our color coding was different from the final outcome at this stage)


We then divided all the screens and sort them by color. As described in the video, we lowered the opacity to around 20% and stacked each color on top of each other in order to create a heatmap. This is when we noticed that lack of "us" content on Instagram. 


We even used a program to quantify the exact percentage of each color. Instagram's "us" content was at 8%. 

As supporting platforms, we even went through the same process with Snapchat and Facebook. The latter was relatively well-distributed and Snapchat was at 3.8% (which wasn't too much of a concern to us, as Snapchat was developed for direct messaging). However, "us" content was always in the lowest category. 

Is it possible to add more "us" content on Instagram?

Using the current content available on Instagram, we conceptualized "Instagram Groups", where users can sort those they follow into personal or public groups, including friend groups and sources of inspiration. This would bring a greater sense of community on the platform, as users will know exactly where to go to see certain kinds of content. 



Execution, Part 1

First, we iterated a little more on color. Bringing more of "us" into Instagram is literally combining "me" and "them", so we wanted to create a color palette where the "me" and "them" colors would literally blend into "us".

The fourth one came out with the strongest color contrast, so we began making storyboards with those colors in mind. 

Figuring out our method of visualizing our process through a hand-made quality was one of the biggest challenges. Having physical components rather than digitizing our entire video would be compelling because the viewers would be taken out of the digital context of Instagram. Additionally, we are still using our hands to manipulate the interface, only in a different medium.

While making our letters out of paper (having them as 3D shapes would give a sense of hierarchy),  we experimented with coloring on acetate over printed screenshots with sharpie to show the actual transparency as each acetate stacks up in their respected colors. Each screenshot would have 3 layers of colored acetate (for "me", "us", and "them") that would be sorted in colored piles. The plan was to stack some "me" and "us" acetates to achieve that blended dark blue color, making "us". 


Our process for our first iteration. We even brought in confetti-like shapes as a way to demonstrate Instagram Groups by sorting them and to fill in empty space compositionally.


After we edited and compiled the footage, we realized that the style of the acetate and marker felt incoherent with the rest of the hand-made qualities. It didn't feel as clean-cut as the rest of the materials we displayed.

We realized we needed to find another method to visually communicate our process.


Execution, Part 2

Our communication needed to hold these three traits:

  • Be visually transparent to show that these colors are being drawn over screenshots
  • Each color on the screenshot could be separated into their own piles
  • Match the clean-cut, handmade style.

With the time available, we explored options of working digitally--how would it look if we mix physical and digital mediums? Perhaps showing our process through Aftereffects animations overlaid on the footage would feel more crisp. What if there were little physical buttons for all three categories that could be switched on and off to compare the scarcity of "us" content?

Although the idea sounded appealing, we simply didn't have the time. We figured that we could use the materials we already had available and carefully craft our footage so it would make sense with the Aftereffects we could overlay later.

All of us were involved in recording footage. Once we were complete, Lucy and Lily wrote the script that would be voiced over, and I handled the footage and the Aftereffects animations.



This was one of my favorite group projects to date! Our dynamic allowed us to work effectively together--no one was left behind and the process was split up evenly based on our abilities. In terms of our intervention, we realized the importance of form and intent. For platforms such as Snapchat, "us" content wouldn't be as necessary as it would be for Facebook or Instagram, since it was initially developed for direct-messaging. And although our scope was limited to the interface, we also considered there are other methods of gathering "me", "us", and "them" content that wasn't necessarily layout-based.