Co.Design

Octofeed Puts A Slicker Skin On Facebook, Hinting At Big Missed Opportunities

Octofeed takes Facebook’s design ethos, which emphasizes visual and temporal storytelling to create an emotionally charged UI, and distills it down to its essence. Paging Facebook’s design team!

“First off, we love Facebook,” says Daniel Chin Yee. But (you knew there’d be a but), “we feel like there are some missed opportunities in the UI.” The cluttered feed, for one. Also: The styling, which, with its no-nonsense typography and its orgy of blue, looks utilitarian at best, dated at worst. “The design gets the job done, but it requires that the user do work, and the process is slower than it needs to be,” Chin Yee says.

Thus was born Octofeed, a website that pulls the particulars of your Facebook page and organizes them into a neat, unapologetically stylish two-column feed. Gone is the lefthand sidebar, with the unnecessary list of apps and groups and favorites. So too is the (even less necessary) Twitter-like feed in the upper righthand corner. And, refreshingly, there is no Facebook blue.

So what’s left? Not a whole lot, and that’s the point. Chin Yee, a programmer, and his wife Jennifer Puno, an interaction designer, divided Facebook into two sections--a wall and a feed--each of which can be accessed by clicking a large button at the top of the page. From there, all you see are extra-large photos, videos, and link descriptions in the lefthand column; and metadata on the right. A ragbag of typefaces (including Lorimer No. 2 Condensed, Georgia, Verdana, Chunk Five, and Calgary Script) and abstract icons for sharing and “liking” lend the page its rakish good looks.

In a way, Octofeed takes Facebook’s design ethos--which emphasizes visual and temporal storytelling to create an emotionally charged UI--and distills it down to its essence. “At its core, interacting with a UI is really just a series of decisions,” Chin Yee says. “Since we think of UI interaction as a series of decisions, we wanted to redesign the feed to reduce the number of decisions overall and simplify the ones that remain. Fewer, easier decisions make your brain happy.”

Here, Chin Yee takes us through Octofeed’s other key differences:

Typographic variation

“One of the decisions you continuously make is where to focus your attention first. On Facebook.com, text color is used to categorize information types, but size and typeface aren’t used as effectively. On Octofeed, we bump up the size and change the font on text that we think should be emphasized. This helps you locate or ignore information elements more quickly.”

Grouped content

“Although different types of information on Facebook.com are grouped, the groups are positioned in a way that makes the information run together. Octofeed tries to be more explicit about separating content types, both in positioning and visual style. Photos, videos, and link description/summaries are on the left, metadata is on the right.”

Big pictures

“Another decision you continuously make is whether to pursue an interaction further. We simplify this process by selectively displaying information up front to help you make that decision or avoid the decision entirely. For example, we make photos as big as possible and we avoid cropping them. Showing a higher resolution photo means you don’t have to enlarge it yourself to inspect some detail that gets lost in a small image. Not cropping the photo means that you don’t have to expand it to see what you’re missing.”

Smarter video player

“YouTube and Vimeo videos play automatically so you don’t have to decide whether to watch them based on a tiny thumbnail (unless you don’t have flash enabled). By the time you’ve finished reading the description of the video, the video is already playing, but muted until you click it. If multiple videos are in view, unmuting one will mute all the others. If you don’t want to watch the video you can just keep scrolling. Once it’s out of view, it will stop playing.”

Mobile mindfulness

“Another area we focused significant energy on was making the layout adapt to any window size you throw at it. Photos and videos are scaled appropriately to make use of your screen real estate. The layout switches to single-column mode when you make your window skinny (perfect for phones).”

Octofeed is still a work in progress. It doesn’t include notifications (those are coming soon). And only recently did Chin Yee and Puno add a small speaker icon and help message on videos to clarify how the audio-player works. The goal here isn’t to replace Facebook, anyway.

“The idea is for Octofeed to complement your Facebook experience,” Chin Yee says. But as more people hear about the site--and realize how much easier it is to navigate--it stands to reason that they’ll start checking their Octofeeds before their Facebook pages. At minimum, Octofeed offers a seductive glimpse of what Facebook could be if the social media giant set loose all those talented designers it has sitting around. Hope Zuck and friends are taking note.

[Image: pzAxe/Shutterstock]

Add New Comment

24 Comments

  • S.W.

    Scrolling, scrolling, scrolling... too much white space. It may be stylish, but it's not efficient. Similar problem with Google+ in my book... Facebook's design isn't beautiful, but I can see a lot of information quickly.

  • Brian

    This particular hipster-esque aesthetic has been mercilessly beaten into the ground in recent years. If you're going to make an attempt at re-envisioning the #2 most-visited website in the world, you should at least try to be original.

    My biggest issue is the lack of focus in the layout. Everything is pushed to either the left or right, and when expanded for a large resolution, the entire site turns into a giant, dull grey mess. I'm not sure in what way Chin Yee thinks this is "easier to use"; I personally too much time trying to tell the multitude of similar grey boxes apart while simultaneously trying to avoid the truly awful teal-on-light-grey color contrast.

    I agree with Mike: If Chin Yee truly believes that this interface is easier to use and provides a better experience than the current Facebook interface, he should strongly consider revisiting the basics of interface and experience design.

  • Ryan

    This is seriously one of the most atrocious designs I've seen. Has anyone tried it on a big screen? It's a gigantic spaced out layout of gigantic unreadable text with microscopic little feed images. And it's designed in this niche hipster style. Why would Facebook ever care about this?

  • kpr

    I understand that when most think of great "design" they don't think of Facebook. But they don't think about Apple's sometimes silly looking built-in iPhone apps either (think Notes). There's something very easy and welcoming (when you can get over the constant iterative changes) about Facebook. Octofeed is cold and uninviting and confusing. 

    There's plenty of truth to the fact that great design is design that goes unnoticed. Because it just works. This just feels forced. 

  • Michael Tedeschi

    Agreed with Adrian.
    Octofeed isn't a prime example of incredible design or UI. Sure, there are valid points in the article, but Octofeed's use of large imagery and typography aren't successful (in my opinion). The spectrum of type and color choices don't translate into a clear visual hierarchy—instead, it looks like a design student's bad attempt to be trendy/hip.

    I think Chin Yee needs to revisit his interface/design if he thinks Octofeed "requires the user do [less] work" and speeds up the process.

  • Adrian Salamunovic

    This design is better than Facebook? No clear grid, no less than 5 different font faces, weird awkward spacing, no clear navigation path. Really confusing design that in my opinion is trying to hard to look cool rather than be functional. I got excited by the headline then I saw this mess. 

  • Rovane Durso

    The idea is cool and promising but it feels a little cold, missing the human connection. This works well and I would love to see Facebook do a better job with their UI/UX. The only problem with this approach I see is that FB content gets pixelated due to resolution.

  • Josh Rathbone

    Fantastic ideas, not sure they all came out the way we'd like though. Unless you've got a 40-inch screen, this is pretty much useless. Half the reason I think Facebook has had the success it has had is because of its utilitarian UI, people want design maturity, something Bebo and MySpace etc. certainly didnt give (and LinkedIn was just a bit crap...). The formatting rubrics look promising (fonts etc.), but yeah, way too much white space, pixels are precious, and that is a sad wastage I'm afraid. Inefficient; so much for 'making best use of your screen real estate'. 

  • Jacob Ruiz

    Sure, it's pretty, but where are the profile pictures? How can you have a site about connecting people, without putting people front and center in the design? It feels too distant and cold without faces. Typographically though, this is very beautiful.

  • Julie Nolta

    I love the look of the site - - soooo much more interesting, and pretty, than FB.  I was able to log right in and my feed popped up right away. Love the larger photos. As I scrolled down, things were a little slow to load, but then I did have a bunch of other big stuff running which could have affected that. I'll definitely be back for more!

  • Diana

    I like this redesign, and will be using it for as long as it's available, or until Facebook gets a clue and redesigns their awful Timeline.

  • Joshua Bennie

    Tried it. Didn't find it particularly improved my experience. I imagine you probably have to preserve with it to learn how the design is structured. Don't have the patience for that.

  • Joshua Bennie

    I think the only way i'll know if this design has been successful is by trying it myself. Setting up just now.

  • Terry Glenn Phipps

    And lo unto the week came Thursday, and the Vignelli looked upon this hipster nonsense and wept, realizing that indeed something could be worse that FB UI design.

  • Toddsie

    What about advertising? Facebook isn't going to allow you to hijack their feed for long if you've removed their advertising. Not that I want to see it, but it does pay for the site for me. No advertisers means I have to pay money instead. amIright?

  • JT

    First of all, kudos for the effort that's gone into the re-interpretation of a Facebook feed. I'm all for white space when it doesn't impede on functionality, but I'd have to say that there's a bit more white space than necessary in this design. I think the choice of typefaces does a great job of differentiating the areas on its own; there's sure to be a happy medium in there somewhere. Keep on truckin'.