Design at Facebook

by Luke Wroblewski August 27, 2009

Today at their headquarters in Palo Alto, Facebook’s design team walked through their philosophy and approach to designing for a quarter billion users. In particular, they emphasized the importance of writing code, sharing designs early and often, being involved with a project from start to finish, and not falling in love with your work. Making sure designers are technical enough to write code came up a lot.

  • The Facebook design team works on product design, marketing, UI patterns, branding, and front-end code. The team consists of 15 product designers, 5 user interface engineers, 5 user experience researchers, 4 communication designers, and 1 content strategist. 25 designers in a company of 1,000.
  • Writing front-end code ties design into the engineering culture of the company.
  • How does a team design for a quarter billion people? Four hypothesis: be there from start to finish, share early & often, get your hands dirty, don’t fall in love.

1) Designers need to be there start to ship: from strategy to launch. This is different from other companies.

  • Facebook spends a lot of time making sure designers are there from beginning to end.
  • Example: home page redesign that launched in March. Wanted to simplify and streamline the way information traveled around the site. This included the data structure and the visual structure.
  • After defining vision, started writing code to make sketches. Designing in code allows you to see how real data works inside a layout.
  • Balanced tradeoffs –did a series of explorations on home page designs including iterating on the interaction and visual details.
  • To get a variety of teams on board -used a static mockup to communicate designs. Usually don’t advocate static designs.
  • Having a designer that can write code allows details to get figured out and quickly implemented.

2) Share early and share often. Sharing with the team and users helps make the design better.

  • There is no creative director at Facebook, instead use a bottoms up process to get alignment. It’s critical for the team to share what they are doing.
  • Developed tools to share more effectively. One tool is called Pixelcloud and serves as an online gallery with commenting. Since launching in March, 15 images are added to the site per day.
  • Working groups cover visual design, simplicity, and front-end code to help ensure Facebook designs remain consistent. All working groups have office hours to provide feedback to rest of designers.
  • Example: privacy wizard design. In kickoff phase, brought in 12 users and showed them 30 mocks to get direction on project. In build phase brought in less users and only showed them 7 mocks.
  • Feedback is good. Get as much as you can and as early as possible. Helps save time.

3) Get your hands dirty. Important that you understand how Web code works. All designers write a bit of HTML, CSS, and maybe PHP.

  • Eases the relationship between design and engineering. Designers can tend to bugs and build quick prototypes.
  • Designers tend to err on side of over simplicity. Engineers tend to err on side of more functionality.
  • Understanding the medium in which you work, informs your designs.
  • Moving fast is important. Facebook has a lot of competition in many areas and people’s use of the Web continually changes. Really crucial to quickly iterate.
  • At the core, Facebook believes it is important to get products out early to see how they are used.
  • Mockups lie. They lack content and context. Need to use real content and page designs to understand how the design will work.
  • In order to move quickly, we need to prototype early. Example: commenting UI got tested internally first and changed before being shipped to users. The new design broke the existing scan line in the news stream.
  • Designers at the company account for about 40 commits a week.

4) Don’t fall in love. Software is impermanent –it is always changing and you need to accept that.

  • The goal is to be ok with continuous change.
  • Don’t settle for what’s great today. You will fall behind. As a designer, you need to forecast and think about how things will be in a year from now.
  • The longest standing design at Facebook was the front page from 2004 -it stayed live for 18 months.
  • Example: global navigation redesign. Tried out many ideas over several months. Even yesterday the site header changed.
  • More than ever our work is never done.
  • Run A/B tests for most features. Clearly define metrics up front and measure against those. Don't let the metrics drive the design.