Design

Badges? We Got Badges. We Love Badges! We Want More Badges!

How Foursquare imported a visual cue from the Boy Scout sash to the Web.

Foursquare, as you likely know, is a location-focused social networking service—you “check in” via your mobile device, alerting your friends to where you are; if they’re doing the same thing, maybe you can meet up. The company debuted in 2009, and now says it has 10 million registered users. Like any other business, it has a logo. (And design freaks love to debate logos: Think of the hoo-hah about the Gap logo last year, or the attention Starbucks got for tweaking its mark.) But a logo isn’t the only way that a company can establish a graphic identity that’s recognizable at a glance. That may be particularly true in the digital era—and Foursquare’s system of “badges” is one example.

Apart from supposedly spicing up your social life and hipping you to whatever locales your Foursquare connections are discovering, the service has from the beginning included gamelike elements to quantify, reinforce, and even influence the actions of its users. The most famous example: If you check in at your favorite bar (or whatever) more than anybody else during a given time period, Foursquare anoints you the “mayor” of that location. That might get you a discount from the establishment. But the incentive that Foursquare offers to juice user activity are little digital icons reminiscent of Boy Scout merit badges. Under specific circumstances, checking in at certain locations or completing certain tasks will “unlock” (that is, display) a badge on your Foursquare profile. If you manage to achieve mayoralty of 10 places at the same time, for instance, you’ll get the “Super Mayor” badge. (This site compiles Foursquare badges—although evidently not quite out of fandom, but as an “inbound marketing” experiment.)

The original set of badges was created by Mari Sheibley, who is now Foursquare’s lead designer, overseeing not just the creation of these symbols but the overall look of the service’s website and iPhone app. She also designed Foursquare’s actual logo, but it’s the badges I wanted to ask her about.

In the beginning, Foursquare co-founder Dennis Crowley had a set of 16 badge concepts and “an idea of what he wanted these to look like,” Sheibley recalls. (She created that initial batch on spec.) Many of the early ideas were fairly conceptual: Not a place or a thing, but an idea tied to the use of Foursquare itself (“10 check-ins”) or the kind of real-world social behavior the service was attempting to leverage (checking into the same place three times in one week, or checking in with two people of the opposite sex). The round shape and circular border directly referenced Boy Scouts merit badges. Beyond that, Sheibley says the relevant design context wasn’t logos, it was the familiar instructional iconography meant to signal ideas without words: “How do you communicate to people in an airport, who don’t speak the same language, where the bathroom is?”

Of course, communicating ideas with images predates communicating with words. But the symbol-language Sheibley created might be considered a descendent of the Isotype—or “International System Of TYpographic Picture Education,” created for Austrian social scientist Otto Neurath, who sought to communicate “visual statistics.” He hired German illustrator Gerd Arntz to execute thousands of “pictograms” symbolizing economic and other data (related to mobility, or product categories, etc.) in the 1920s and 1930s.

Achieving a similar “at a glance” level of understandability isn’t too hard in some cases—Foursquare’s “Local” badge (unlocked by checking into the same place three times in one week) simply borrows that eternal symbol of geographic loyalty, a flag. But when the idea being signaled is more adventurous—like “Crunked,” unlocked by checking in at four bars in one night—the icon-language is being subverted: We get a droplet head with X-ed out eyes and a whopping smile. It makes sense that Sheibly cites as one inspiration artist Ryan McGinness, whose work has included the appropriation of icon-language to address a startling array of subjects, most recently the female nude.

Over the lasts two years, Foursquare has added scores of badges dealing with an ever-expanding range of concepts, but has pretty much stuck to its original aesthetic. “Overshare” is represented by speech balloons; “Gym Rat,” a barbell-hoisting rodent. Back in 2009, the imagery had to work within more limited technical parameters (pixel counts, for instance) that narrowed some of the graphic choices. The original badges have been re-sized to bear the scrutiny of newer, high-resolution screens, but Sheibley has stuck with a less-is-more approach, for example limiting the number of colors in any badge to three. Crowley has referred to the badges as “digital candy,” and the pop color schemes reflect that. (Foursquare has also opened up to a large array of “partner”—read: advertiser—badges from a swath of third-party companies and brands, which are generally less visually consistent, or interesting—a Bravo-related badge is just the Bravo logo, and one associated with The Ellen DeGeneres Show is basically a portrait of Ellen DeGeneres, and so on.)

“One logo represents a brand, but here it’s almost as if the whole batch of badges, together, represent the brand,” Sheibley says. “They should work together.” This suggests another comparison point: The work of Susan Kare, whose digital-symbol creations have included everything from early Mac user-interface graphics to Facebook “virtual gifts.” While millions of marketing dollars backed the determined propagation of the Apple logo, the “smiling computer” startup image, while not a badge per se, stands as a supreme example of a similarly stealthy form of graphic branding: something that became completely, subconsciously familiar to millions of people, without being overtly advertised or highlighted.

It’s typically a good sign for a digital signifier when it escapes the world of bits and manifests physically. Kare sells prints of her “classic icons” series. Similarly, Foursquare sells buttons, stickers, and T-shirts of several of its most familiar badge designs. And the amusing enterprise Nerd Merit Badges, which sells physical commemorations of such digital-world actions and achievements as Bitcoin usage, BoingBoing mentions, and inbox-clearing, has offered a Foursquare collection. Just the thing for signaling your status as a “Local,” “Gym Rat,” or even as “Crunked”—not just to your online social circle, but to anybody on the street who doesn’t happen to be staring at their phone.