RESPONSIVE REAL ESTATE

________________________________
Facebook Analysis and Redesign
Teammates: Christie Chong, Carolyn Zhou
Junior Communication Design Studio
Spring 2017

 
 

For this project, my group analyzed different social media platforms and how their interfaces change over different devices.  The different platforms’ use of limited screen space tells about what it values. As users alternate between desktops and smartphones, designers must adjust the app’s layouts for smaller screen sizes. What content is removed, and what is left? The features that remain can be assumed to be essential to the mission of the platform, while extraneous clutter that had room to exist on a larger screen is phased out. We focused primarily on Facebook, how it's responsiveness highlights the newsfeed, and how it's desktop homepage could be decluttered.

Poster

This poster shows a summary of our initial analysis. We categorized certain features on the Facebook homepage as either personal or impersonal and public and private. We then show which of these features remain on the homepage as the screen real estate decreases. We found that in comparison to other platforms, Facebook's newsfeed took up the least amount of space in relation to other features on the desktop homepage. This was confusing since the newsfeed is the highlight of the app. 

Video

In this next part of the project, we explain our findings in more depth, and also propose a solution for Facebook's cluttered desktop. Since the mobile app still retains the same functionality as the desktop page, then why can't we shift more features to other pages or integrate them into the newsfeed? It's a small intervention, but our group believes that with less visual distraction on the homepage, we can focus better on what our friends are sharing in the newsfeed.

Before and After


Process

Initial Research

To start, each of my group members and I chose to look at different social media platforms. Carolyn looked at Facebook, Christie looked at Twitter and I looked at Facebook. At the beginning of the project, we weren't exactly sure what to focus on, so we looked at the differentiating features, their site structures, the branding, and how they looked on different platforms. We came together and listed out the common functions each had on their homepage, and clarified the purpose and mission statement of each platform. We were most interested in how the responsiveness of these apps reinforces their purpose, so we looked into how they arranged their homepage on different devices.

Visualizing Our Findings

We calculated the percentage of screen space that each feature took up on their platform's homepage. We then tried different ways of clearly presenting that information. Our goal was to both present something informative about each app and compare it with the others.

Below are my sketches on how to visualize responsiveness.

Here are Carolyn's ideas:

And here are Christie's:

These next images show the categories of features and their percentages. We also tried to find a color scheme.

We decided to categorize features based on public/private and personal/impersonal. I developed the final color scheme and laid out our initial draft for the poster. Here are the assets, the early draft and the final poster.

The Video

After creating the poster, we wanted to present that information as a video and propose our design solution. We split up the video into 3 different sections. Carolyn took the introduction, I worked on visualizing responsiveness, and Christie worked on the percentages and introduction of the new interface. Below is our story board, a piece of the section I worked on, and our redesigned screen.