The Design Process Behind Facebook Graph Search

Co.Design talks with Facebook Graph Search designer Russ Maschmeyer about escaping the search engine’s oldest paradigm.


Facebook hopes people will ask Graph Search different questions than they ask other search engines. The new product surfaces any combination of people, places, photos, and interests on command, and the more complex the query, the more precise its answer. Recruiters might be interested in queries such as “friends of friends who are engineers at Google.” Travelers might want to know “what cities have my friends visited this year.” And the search for “friends of friends who are single and . . . ” has endless permutations.


“One of the biggest design problems that we had to solve is how can we make it so people can ask these questions that can be very precise in a natural and intuitive way,” explained Mark Zuckerberg while presenting the new product at a press event on Tuesday. His next slide revealed a page of 39 different search filters. Closely packed into three rows on an otherwise blank interface, they looked anything but natural. “That’s my joke,” Zuckerberg said as a few reporters began to chuckle.

Russ Maschmeyer is the designer responsible for making sure that Zuckerberg’s joke doesn’t ever hit too close to home. He looks relieved after the event as we walk past a Lego art wall and a table laid out with champagne into a conference room attached to the Graph Social team’s office space. Shortly later, applause erupts outside as the product launches to its first handful of users, someone rings the famous launch gong, and I suddenly feel like someone who is preventing a father from witnessing his child’s birth.

Maschmeyer has been working on Graph Search, at times the product’s only designer, since last spring. He’s the first to admit that the product is a little different. “It’s really about coming to results, and going deep on that set of results, and discovering things and making connections that you might not have even known you could make or finding things you didn’t even know you could find,” he says. Web search, meanwhile, surfaces results for concrete queries and assumes that you’ll leave the site as quickly as possible. The same design paradigm isn’t suitable for them both. Maschmeyer helped take Graph Search out of the box.

The search box, that is. Instead of the familiar white query box that previously controlled Facebook search, people type their requests for Graph Search into the site’s blue masthead. Their queries become the titles of search results pages. “Really any view on Facebook is a kind of search,” Maschmeyer says of the decision. “Newsfeed is posts by my friends. My timeline is like my name, all about me. And then graph search is every other view you could imagine, every other cut of that graph that you could potentially dream up.”

Giving search results titles makes them feel more like alternative views of Facebook that are, like Timeline, meant for browsing and exploring rather than search results meant for instant departure. In this way, it provides an opportunity to show users they can search for something for which they may have not been looking. When users start typing into the masthead, for instance, a drop-down menu suggests searches for them to demonstrate some possibilities. If they type “friends of my friends,” for instance, it might suggest searching for those who “live in my hometown” or “went to my college” or “work at my company.”

Facebook’s logo was been shortened to an “F” on Newsfeed to make room for a prompt that instructs users to search for people, places, or things. Some of the most useful queries on Graph Search, however, aren’t so simple. Most people don’t realize that Facebook can, for instance, help them find people with similar interests or who have been to a specific place. So instead of using filters as a control for Graph Search, Facebook used them as reminders. Each search results page includes a sidebar of filters starting with the most common and expanding to all of the possibilities.


“The lover of simplicity in me was like, we shouldn’t duplicate the same functionality in the same thing in a different place on the page, in a different way,” Maschmeyer says. “It turns out that it’s incredibly useful for teaching people the breadth of things they can search by. So by the end of the project I was completely sold.”

Explaining the range of Graph Search queries is only half of the puzzle that building a product with diverse use cases represents. On LinkedIn, you can be pretty sure somebody searching for “designers in San Francisco” is looking at potential job candidates. On Graph Search, they might be looking for a date with shared interests. So should Facebook show results for the query that contain information such as employer and school at first glance, which would be useful if searching for an employee, or big photo tiles, which would be useful when searching for a date? By adding a button that toggles between the two views, the product team chose both.

It’s just one of many design decisions complicated by packing restaurant recommendations, photo organization, a recruiting tool, and a dating service into one wallop. And those are just the obvious applications. Not even Facebook has thought of all the possibilities–an internal Facebook group called “addictive Graph Search queries” has been documenting them as they’re discovered.

Somewhere between a search box and a list of 39 filters, Maschmeyer’s challenge is to evolve a design that makes sense for all of them.

[Image: Facebook via Shutterstock]

About the author

Sarah Kessler is a senior writer at Fast Company, where she writes about the on-demand/gig/sharing "economies" and the future of work.