Redesigning Facebook
rightPhone

A big change, for a big product.

Recently, Facebook has been unveiling a whole stream of new components and features to its collection of products. Whatsapp, Messenger, Instagram and the original Facebook app have all benefitted from the minds at Menlo Park.

While new changes have been appearing almost monthly, one thing that has stayed relatively the same since its release has been the design of the Facebook iOS app.

For my final year research project at the University of Gloucestershire in Cheltenham, England; I decided to redesign the Facebook app for iOS as if it was being built today as a fresh startup with the colours, bold text and emoji-filled UI of apps like Houseparty, Snapchat and Whale.

ThreePhones

The Interest Selection, Menu and Facebook Live Views.

1. Startup

These are the pages you’ll encounter as a user when accessing the app from the Home Screen of your iPhone.

divider

2. Log In & Sign Up

Before getting into the app you’ll need to either log in to your existing account, or create a new one.

divider

3. Onboarding

After creating your account, there’ll be a few pages to go through in order to create your profile and get started.

divider

4. News Feed & Pages

Using the floating tab bar along the bottom of the screen you’ll be able to see four different views, News Feed, Your Profile, Notifications and the Menu page.

divider

5. Update the World

As with the official Facebook app, you’re gonna want to post to your page. Three buttons along the top of the News Feed make this quick and easy.

divider

6. Facebook Live

One of the newest features has been the addition of Facebook Live. A selection of viewer/recorder views make it easy to consume video in-the-moment.

divider

Avenir Next Medium

Avenir Next Demi-Bold

Avenir Next Bold

Messenger Blue Ocean Gradient Deep Blue Dark Grey Light Grey

Fonts & Colours

The typeface used throughout the app design is the well-known Avenir Next. It’s a personal favourite of mine due to the large selection of weights and the fact it can be used well in almost any project.

Rather than keeping the classic Facebook blue I opted for the bolder and brighter Facebook Messenger variant, however the background colour of all pages on the app is actually a subtle left-to-right gradient from the Messenger blue to a slightly darker shade.

The colour scheme for the rest of the app is Blue, White and Dark Grey in that order.

App Redesign Checklist

When I was designing the app there was a number of design features and essential requirements that I decided should be included to make sure that the app would work in the real world.

Some of these are exclusive to the design style I have chosen for this redesign but some of them are a standard that I implement in all my designs where possible and while some are purely visual touches some do have usability purposes as well.

Checkboxes
divider
Cutoff Phone

Icon

The first view you get of the Facebook app is the app icon sitting on your homescreen. With over a billion users worldwide I think Facebook - and with it - the “Like” symbol are well known enough that the little Thumbs Up sign can be used interchangeably with the iconic “lowercase-f”.

For this reason I’ve reversed the colours of the current Facebook app icon and dropped in the Like hand centrally. I’ve also taken the design style throughout from the dark, calm blue they currently use to the bolder and brighter Messenger blue as mentioned above.

Facebook Icon

1. Startup

When the user opens the app for the very first time, I wanted them to straight away be comfortable with the style and tone of voice.

I wanted a conversational tone and emojis to greet the user, indicate tasks and points of interest or to simply ‘congratulate’ the user on the completion of a part of the sign up process.

One of the things that make Snapchat and Houseparty so fun to use is the integration of emoji’s throughout their respective interfaces and it really adds to the experience in a smart way. I wanted to make sure that anywhere that they appeared in the Facebook design was for a thought-out, meaningful reason and not just for the sake of it.

2. Log In & Sign Up

I wanted to create an alternate style of login form, one that was more interesting to look at, easier to use and fits with the modern design choices throughout.

Inspiration for this vertical form style came from Typeform.com where I found that answering one question at a time without the distractions of others to look at made it much easier to move through sometimes long or complex forms.

As mentioned above emoji has been used to indicate which box is being typed in as well as the highlighting of the active box to make it immediately clear to the user. Upon completion of the form, all sections light up in full opacity along with a conversational confirmation message and a clear call-to-action button to move onto the next section.

3. Onboarding

Twitter has a very effective onboarding process for helping the user to fill their feed with profiles to follow right from the beginning, I wanted to recreate this in a similar way by offering the user a number of categories to tap through to help them find pages to like and friends to add.

During the Sign Up and Onboarding process call to action buttons take the form of fully rounded rectangles with other buttons and clickable objects existing as 5 pixel radius rectangles which give a more relaxed feel than sharp corners.

All of the pages in this initial onboarding process offer the perfect place for some interesting UI animations which is an area currently lacking in Facebook’s collection of products. This is one place where Twitter and Snapchat have really excelled.

4. News Feed & Pages

Fixed throughout the main app feed I have included a floating tab bar along the bottom of the screen enabling the user easy access to four of the main pages - News Feed, Profile, Notifications and the Menu page, alongside a Messenger button and a Friend Requests button at the top sitting alongside the central search bar ensures the user has easy access to any part of the app.

As well as switching Facebooks current white background for the blue gradient throughout, I have opted for a “card” style for the page content and News Feed posts. It’s a format that I’ve seen work really well in other products and I believe it can be applied just as well here.

Subtle highlighting, contrasting notification icons and large, bold text ensure that everything is easy to read and hard to miss, helping the user to consume as much content as possible.

5. Update the World

Continuing the card style from the News Feed; the Photo and Status update pages feature a clear, easy-to-use design alongside a number of feature buttons along the bottom allowing the user to add Stickers, Filters, Tag Friends, Add their Location or Add more Photos to their post.

This page is designed to be as simple to use as possible with the central box able to extend down within it’s boundary as the user types, keeping the effects buttons in view at all time but allowing the user to scroll within the Photo post box.

6. Facebook Live

Similar to the photo upload page, the Facebook Live view offers a number of effects buttons, however this time with the addition of a pen for drawing and a cross button to clear the screen, although these are only available to the broadcaster.

To aid the viewing experience, swiping left across the screen hides all UI elements apart from the Facebook Live branding to give the user a distraction-free method of watching.

Comments dissolve out of view as more appear while still remaining scrollable and the Like button can be held down to reveal the other reaction animations.

I have decided on a vertical-video recording format however across other devices this could be cropped to a square format for better continuity across platforms.

Checkboxes

Conclusion

Facebook have an amazing product library that we love to use, over a billion of us in fact. One problem with this is that it can be difficult to innovate or try new things when you have 1/7th of the world watching and criticising. While I’m not sure if my design is more useable across the board for Facebooks users, I think it offers an interesting, alternative, millennial style that it would be interesting to see them explore in future products.

For more design, tech and startup related thoughts or if you’d like to let me know what you thought of this project - send me a tweet at @jamesfrewin1!

Redesigning Facebook by @jamesfrewin1