Visual + Interaction Designer
web-thumb2.gif

Youtube Stage

Motion Graphics & Data Visualization

Youtube Stage

 

Overview
Introducing a new way to connect with members of the Youtube community. Youtube Stage brings back the community features from Youtube’s earlier history in a new way. We bring data visualization to life through motion and respond to the data with an exploratory probe.

Role
This project involved visual design, motion graphics, research, and data visualization.

Teammates
Created with Sharon Yu and Lily Kim.

Duration
This was a 5-week long project. 

Outcomes
Our final deliverables were a poster visualizing our research and a motion graphics piece with our idea for an intervention for the social media platform.

Please click here to see our full process documentation. 

 

 

Research Findings / Concept

When analyzing Youtube in comparison to Instagram, we tracked the user’s path from the Home page to various communication functions, noting how many times the interaction was repeated. What we discovered were two main types of communication: one-to-one and one-to-many. 

While Youtube had primarily one-to-many communication, Instagram had more one-to-one communication functions. Youtube’s main form of commenting is a visible discussion with the entire community. Additionally, it takes many clicks from Home to be able to privately message other Youtube content creators. Instagram, on the other hand, offers more intimate forms of discussion with features like private messaging, which are about as easily accessed as normal commenting.

While respecting Youtube's one-to-many direction, our intervention is a new way to connect with members of the Youtube community. It draws inspiration from community features from Youtube's earlier history, which was more discussion focused.

 
 

Process

Researching Social Media Networks

We began by researching several social media networks: Instagram, Youtube, Vimeo, Facebook, LinkedIn, Twitter, and Reddit. Looking at both mobile and web interfaces, we examined and analyzed visual features, such as typography, color, and grid structures. We looked very deeply into the differences in interactions. We made several diagrams of functional analysis that looked at communication (send, receive, post/tweet, share/retweet, like), friends (add, remove, block, follow), and groups (join, leave).

We decided to focus on Youtube, which we noticed had mostly one-to-many social interactions. We created a sitemap to show how difficult (how many clicks) it takes to get to where you can privately message someone. We thought Instagram was an interesting comparison to Youtube, since while it is also highly visual, it makes it very easy to direct message another member of the community. 

 

Visualizing the Data

At this point, since we knew what data we wanted to show, our next challenge was figuring out how it could be visualized. We did both handmade and digital sketches. This helped us figure out what the layout of the diagram would look like.

 

Inspiration

Our biggest inspiration in form came from Michael Bierut's Yale Poster series. We thought the rectangular shapes could be applied to our project since the shape seemed to suggest screens.

 

Shape Iterations

We iterated on how to implement this aesthetic with our data. We found that the black-and-white wasn't working for our data, but the shapes were.

Screen Shot 2017-01-30 at 2.26.22 AM.png
 

Colors

We iterated a lot on color. In the end, our final palette was highly inspired by Nicholas Menard.

 

Poster Iterations

Here you can see how our poster developed through clarifying the data we wanted to represent and iterating on color. Through iteration, we were able to determine our visual language.

poster 3-01.png
 

Intervention

Looking into the history of Youtube starting from 2005, we realized that it used to have a lot of functions that engaged the community with features like 'Video Contests', 'Last Five Users Online,' 'Friends,' and 'Community.' Over the years, Youtube has increasingly began to either eliminate these features or make them harder to find.

As part of our research, long-time Youtuber, Cyriak Harris, responded to us saying that "Youtube seems to have destroyed or buried most of its community tools over the years, and long ago I stopped reading my private messages on there (assuming they even still exist)." In 2017, Youtube is less of a community and now resembles a tv station, producing content for users that aren't necessarily part of the Youtube community. Compared to Youtube, social media platforms like Instagram afford a lot more dialogue between users yet still allows for personalities and creators to share their work freely. 

While respecting Youtube's gravitation toward one-to-many communication, we wanted to foster a better form of communication and discussion with our intervention. We decided to call it Youtube Stage. It's a platform for users to show and share videos that relate to prompts put out by Youtube. With the help of a side-bar, Youtubers can communicate to each other about the video in real-time.

 

Storyboarding

The second part of the project was the Motion Graphics animation that demonstrates both our research findings and our intervention. We wanted to incorporate the shapes that we had created in our poster. We found that they could act as building-blocks, moving around to show functions but also simulating an interface during the intervention.

We split the animating process into three sections so that we could each contribute. Working with 3D layers was very tedious but greatly improved each of our skills of working in After Effects.

IMG_8977.JPG