Responsive Real Estate

Challenge

Identify an interesting aspect of a social media platform and gather, analyze and visualize data about that area.

Outcome

Visualization of data on the use of screen real estate by Facebook on desktop, mobile and tablet devices as an infographic poster and animation. Also a simple design proposal.

Role & Contributions

Data collection

Data visualization

Print design

Motion design

Teammates

Natalie Harmon

Christie Chong


Final Pieces

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.

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 bar charts showing the percentage of screen space various features take up. We felt that the bars were the clearest visualization of this information.

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 organizing the features into various categories, such as private/social, common/site specific, etc.


In the end, we looked at whether features are public or private (whether or not they involved interacting with other people, and how personalized content is on a user's home page. Our color palette has a warm/cool dichotomy and was inspired by Facebook reaction icons. Initially I used easily distinguishable colors as we nailed down our categories, then moved towards a cleaner color palette. Natalie found our final palette.

Poster Layout

Below is our 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, using layers to signify features getting "hidden away." The poster covers our analysis of Facebook and its competitors' current layouts. The visualization aims to show how Facebook becomes layered on smaller screens, moving features to other places but not disposing of them.


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 of space 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.

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.

Our video explained 3 main things: the color coding, the layering, and the bar graph data. I animated the first part.

Before and after intervention:

Learning Outcomes

  • Visualizing patterns and meaning found in data, using graphics and motion
  • Proposing a potential redesign informed by data-driven insights.
  • Designing a cohesive visual language that carries through different media (print & video)
  • Some new technical After Effects skills