The 4-Hour UX Redesign Challenge was something I created to help keep my design skills sharp without having to do a complete app overhaul. In the challenge, I’ll take on one master page (or more, depending on time) of a popular app and completely redesign it after a quick audit to identify possible issues — utilizing basic design best-practices to introduce changes and take the design from wireframe to high fidelity.

Facebook is showing its age

For almost 16 years, Facebook has been the go-to place for all things social. A major evolution from the nightmare that became MySpace, Facebook provided the right type of consistency to the user experience that people needed — and the right combination of features that made it perfect for friends and family alike. However, it’s been almost 16 years, and the current Facebook design is starting to show its age.

But…Facebook is already undergoing a redesign

Back in April, Facebook announced that it would be undergoing a redesign. And while I did take a look at the design when the article was published, I did not look at it or reference it whatsoever during the design for this project. I wanted to remain mostly unbiased, and use my personal design process to see if we came to similar conclusions. I’ve included a side-by-side of my design and the new Facebook design at the end of the article. Let me know how you think they compare!

Over-reliance on visual information for profile pages

The image below was created from a screenshot taken from a Friend Profile Page Layout. First, I brought it into Photoshop to highlight only the parts of the page that had colorful or image-based information. I was surprised to see just how little text-based information there really was, and just how much the layout relied on user-provided visual information.

Inconsistent Iconography

We have flat icons, stroke-based icons, colorful icons, grayscale icons, and seemingly few rules governing the scale and size variations between them.

Inconsistent Typography

From thin, medium, and bold type treatments, all caps vs not, and a variety of shades, colors, and sizes which are competing for visual hierarchy (alongside the icon issue mentioned above) — there’s certainly room for improvement.

Overwhelming Navigation Options

After auditing Facebook’s navigation — I was a bit blown away. The global header menu, main menu, shortcuts, explore section, subpage menus, and more… there’s a LOT going on (and a lot more typography and icon inconsistency as well).

Facebook User Menu

Facebook Global Navigation Bar

Once I started to wrap my mind around the sheer magnitude of the site, I started to realize that many of the navigation-based areas on the site can be relegated to Account-Level menus, homogenized into various categories, or even broken out of the site completely into entirely different apps. A Facebook redesign definitely calls for simpler, more-intuitive navigation across the entire app.

Friend Profile Page Layout

As a helpful exercise, I simply traced the original screenshot to see how the page was laid out. The first thing that struck me as odd was the fact that the entire page layout is skewed heavily to the left, leaving a lot of empty space taking up considerable real estate on the page.

Wireframe Redesign

Redesigning the Global Navigation/Header

The first thing I was compelled to take on was the global header/navigation. First, I opted to move away from the “F” icon, and revert back to the full Facebook logo (the age of Web 2.0 icons is long gone!).

Next, I decided to scale back on the visual noise created by all the competing elements in the header itself. I made the search bar simpler, relegated text-based navigation items to icons, and repositioned everything on the right hand side of the screen to be more user friendly.