RESPONSIVE REAL ESTATE
​
Teammates: Natalie Harmon, Christie Chong
Role & Contributions: Data analysis, data visualization, poster design, animation
Carnegie Mellon University | Spring 2017
​
Challenge
Identify an interesting aspect of a social media platform and gather, analyze and visualize data about that area.
Outcome
My group gathered data on the use of screen real estate by Facebook on desktop, mobile and tablet devices. We visualized our data analysis and proposed a simple design intervention in a poster and a video.
​
Poster
This poster was the first part of the project. It displays our analysis of the data we collected on Facebook's screen real estate on different devices. Its website and app are responsive in a way which highlights the newsfeed (the large yellow section). However, compared to its competitors, Facebook's newsfeed commands the smallest proportion of space on the desktop while holding a comparatively similar large amount on mobile.
​
FINAL PIECES
Video
In the second part of the project, we expanded on our findings and used the data to propose a design intervention. Since the mobile app retains the same functionality as the desktop, our idea was to integrate or move more features into the newsfeed or to other pages in a similar way as the app. Our group believes that with less visual distraction on the homepage, users can focus better on their friends' activity in the newsfeed.
​
PROCESS
​
Initial Research
The three of us looked at social media sites that we use more or less regularly: Facebook, Twitter, and LinkedIn. We studied their grid systems, layouts, typography, functions and features. We were most interested in how the responsiveness of a platform reinforces its purpose, and we focused on each site's home pages on different devices. We wondered how each site's functionality affected its use of screen real estate, particularly as the screen transitioned from desktop to other, smaller devices. Their use of limited screen space, we felt, would reveal what the platform values as essential to their purpose.
​
Visualizing the Data
First, we identified the different functions on each site's screen. We organized them into categories and compared the prominence of those functionalities across the sites.
​
Below are a few of my explorations of different visualization methods. We chose to flesh out the one featuring bar charts, which show the percentage of screen space various features take up. We felt that the bars were the clearest visualization.
​
Color Coding
From here, we solidified the category breakdowns. We tried to find ones that were common across all three platforms so we could easily compare them, but also retained features that were unique and important to each site (i.e. Networking for LinkedIn). We further broke down our categories, so that our data could be cleaner. We tried different grouping features based on various dimensions, such as private/social, in common/site specific, etc.
​
In the end, we looked at what features involved interactions with other people (public) and which didn't (private), and how personalized is content on a user's home page. Our color palette has a warm/cool dichotomy and was inspired by Facebook reaction icons.
​
The first two images are my initial categorization and color tests. I used easily distinguishable colors as we nailed down our categories, then moved towards a cleaner color palette. Natalie found our final color palette.
​
Poster Layout
Below is process work for poster layouts. The number of features shown gets reduced on tablet, and further on mobile, but they don't disappear from the platform. Rather, they're moved elsewhere and it takes a few taps to reach them. We wrestled with visually communicating this idea, and used layers to signify features getting "hidden away."
The poster covered our analysis of Facebook and its competitors' current layouts. We categorized its features across two dimensions: public/private and personal/impersonal. The top visualization shows how Facebook becomes layered on smaller screens, moving features to other places but not disposing of them.
In the bottom portion, we calculated the percentage of screen space each feature took up on different devices, and displayed that information in the bar charts on the bottom. We chose to focus on the newsfeed because it took up the highest percentage on each platform, suggesting it is the most important feature. Moving towards smaller screens, Facebook's newsfeed becomes increasingly prominent, yet on desktop it takes up less screen percentage than its competitors. The disparity between desktop and mobile newsfeed percentage is the greatest for Facebook.
​
Video Storyboard
In the next part, we proposed a simple design intervention.
​
Since the mobile app maintains the same functionality as the desktop page, we felt the disparity in Facebook's desktop and mobile newsfeed percentage indicated clutter on the desktop. Building on the style of our poster, we used animation in the video to show content shifting from page to page, further emphasizing the concept of layers from our poster.
Before intervention:
After intervention:
Our video explained 3 main things: the color coding, the layering, and the bar graph data. I animated the first part.
​
LEARNING​ & IMPLICATIONS
​​​
​Though this project didn't cover building or testing an actual redesign, it was an exercise in finding meaning in data and using data-driven insights to inform potential design directions. Other outcomes include:
-
Analyzing data to identify patterns and meaning, particularly by layering it together
-
Visualizing and animating data findings
-
Using simplicity of color and hierarchy of information to clearly express layers of data
-
Carrying a cohesive visual language throughout different media (print & video)
-
Some technical After Effects skills