f8, Facebook's semi annual developer conference, was by far the largest project I've ever managed or even been involved in.
A lot goes on across the company to prepare for this event, and I along with the Communication Design team played a large role in the aesthetic direction of this years event. We started working on it in January (the conference was in April) talking with Mark Zuckerberg and Chris Cox about the conceptual direction and what they wanted to communicate. We ended up talking a lot about personal identity and the transformative power of a unified open graph of the world. After these initial conversations and some logistical planning of the deliverables we would need to produce, we started putting pen to paper and trying to figure out how we could visually communicate the things we wanted to say.
Along with personal identity and the open graph it was really important to Mark that this event feel closer to our internal culture and our Hackathon events so we spent a lot of time thinking about materials, signage, decoration, and furniture. There was a lot to get done, but at the same time it was critical that we put a high level of care and craftsmanship into every aspect of the event.Mark Zuckerberg speaking at f8Graph Imagery
One of our big announcements at f8 was the new Graph API
which makes it easy for developers read and write data to Facebook. We spent a lot of time thinking about how we could communicate the power of the graph through imagery, we wanted show that the graph is everywhere and can be everything. We ended up creating a series of posters with graph morphing into various icons and symbols. The main set below for the event collateral were all created by hand.Bret Taylor speaking at f8
After spending days drawing the set for the event collateral I knew there had to be a way to produce these generativly. I'd heard of Processing for a long time but had never used it. My programming experience is pretty limited, but I dove right in and was able to learn it very quickly. Many tutorials and late nights later I was able to generativly produce similar graph imagery that we ended up using for projections throughout the event space and after party.
We used the graph imagery in a lot of different places, one of the most prominent was on the f8 shirts. Green for general attendee, yellow for Facebook engineer, red for event staff. Each of the 3 designs shown below was printed on each color of shirt for a total of 9 different design + color combinations.Booklets & Badges
At Facebook our Product Designers are always looking for elegant simple solutions to problems of user experience. As Communication Designers we tried to take a similar approach to the printed materials for f8.
When we were first talking about the booklets and badges we had a bunch of Field Notes journals laying around that our friends at Gowalla had sent over. We immediately thought it would be a good booklet size and thought too it was a good size for a badge. Never wanting to take the easy way out we decided to go for it and make the badge and booklet one piece.
It was a pretty complex production process. First the cover's had to be printed which were 4 color and 1 spot color (metallic silver) on the same French Paper Field Notes uses for their booklets. Then they had to go to the digital printer to print the variable names and Facebook photos of all the attendees. After that the covers were custom die cut, a pocket in the back was hand glued, the RFID f8 Presence tokens were attached. Finally the covers could be saddle stitched with the 32 page 4 color booklet interiors, then drilled for the lanyard hole, and corner rounded.Booklet interior
Map on back of booklet
Schedule on mobile phones
We also needed a way to customize the badges for press, staff, speakers, and crew so we decided to use different colored stickers and lanyards. We didn't stop there though, we decided to make 5 more stickers for general attendees as well so they could self identify as an engineer, designer, business/marketer, venture capitalist, or student.All booklet / sticker combinationsf8 Presence
One of the cool experimental things we did at f8 was to allow people to interact with Facebook in a real world environment. The technology was based around Keg Presence - an internal hackathon project that allows you to "check in" at a Keg when you get a beer at our office. A story gets posted on your News Feed that you're at the Keg and invites others to join you.
At f8 we tested this same technology by giving all attendees a token they could associate with their Facebook account and then swipe different readers throughout the venue to share their Facebook activity. We even built our own photo booths that let you tag yourself in the photos from the touchscreen display.
We fabricated everything. Engineers were up late soldering to make the electronics work, while the design team fabricated the pedestals and acrylic cases to house the electronics. We designed and built all of the photo booths in-house using Ikea cabinets and off the shelf cameras, computer's, and touch screen displays. We even wrote our own software to power the photo booth's touch screen interface.
As with everything at f8 this was a huge collaboration between a lot of people, but Everett Katigbak lead the design of the entire experience and my role was primarily to provide feedback on the pedestal designs and art direct the visualization.
RFID Check in reader
f8 Presence real-time visualization
Probably the most noticeable thing at the event was the huge 80' x 20' video wall. The goal was to create something that was engaging and social that also reinforced our hacker culture. We settled on a mission control style screen that was changing and updating throughout the event. The video wall had a map of the event space that was tied in with the f8 Presence readers. It showed the path of people from reader to reader as well as a schedule of upcoming events. We were also displaying photos from the photo booths and roaming photographers as well as other videos and visualizations.
The screen was powered by 12 picture in pictures using a Spyder system. Only one window is rendered video. The rest is Processing, photo booths, and other real time generative apps.
One of my favorite visualizations was based on a the movie War Games which inspired much of the overall look and feel of this screen. Facebook designer Lee Byron built a Tic Tac Toe visualization that continuously played against itself and never won. In the movie this is how the computer learns that nuclear war is a futile endeavor.
Environmental & Signage
Tic Tac Toe visualization
Command center for running the projectors
As important to the design of the graphics at f8 was the look and feel of the furniture, decorations, and wayfinding signage. As we mentioned we wanted everything to have a very hacker DIY feel. We wanted to reflect our internal corporate culture of just making things as much as we possibly could. The problem was that meant we couldn't rent a lot of stuff, we had to make it or find it ourselves. All of the couches and white boards at the event were brought straight from Facebook headquarters. We used simple plastic school chairs in our breakouts. All of the signage was digitally printed onto wood. Most of the tables were plywood with metal saw horses that we assembled and then screen printed on ourselves. On the outside of the concourse we did a huge applied vinyl decal of the f8 logo.Applied vinyl decal above the entranceBreakout session signs
We made a bunch of tables for the event using plywood and metal sawhorses. Everett and I put them together ourselves and then screen printed on all 60+ tables with several different designs.Miscellaneous event photosDesigner Tables
One of the coolest custom pieces we did were a series of limited edition glass tables. We commissioned a hand full of our favorite designers & illustrators to do graphics that we then digitally printed onto 3' x 6' pieces of glass.Illustrations by Mikey Burton, Jess3 Interactive, The Decoder Ring, Always With Honor, and Frank ChimeroTable in use at f8.Process
Just incase you didn't think this project entry was long enough here are a few photos from behind the scenes.
Ben Barry - Overall design, project management, art direction
Everett Katigbak - Overall design, booklet design, f8 Presence design
Caitlin O'Farrell - Overall project management
Raquel DiSabatino - Overall project management
Julia Lam - f8 Presence & video wall project management
Oscar Printing - Printed booklets and posters
Digital Pre-Press International - Signage and table printing
OptsIdeas - Event Logistics
Grant Davis - Setup and ran the video wall
Wayne Fan - Built f8 Presence visualization
RecognitionWork done while employed by Facebook
Communication Arts 2010 Design Annual