How I Love Ocupop — Let Me Count The Ways

How do I love the wonderful people at the Ocupop design agency? Let me count the ways.

Founder and creative director Michael Nieling often recalls legendary graphic designer Paul Rand’s suggestion that logos should offer “the pleasure of recognition and the promise of meaning.” (Rand created the identity for giants like IBM, UPS, Enron, Westinghouse, ABC, and NeXT, shaping our visual landscape in immeasurable ways).

When you are working on big things, you want design that thinks this big. And here Ocupop really delivers.

HTML5

The iconic HTML5 logo

Like many, my first contact with Ocupop’s work was the release of W3C’s HTML5 logo. I remember thinking—it’s very interesting that HTML has a logo now. And it’s so… orange. I admit that I initially despised it. But on second look, it grew on me. And on each subsequent look I came to love it more. If you look around web conferences and meetings today, it’s one of the most iconic things in the computer biz, a bit of geek heraldry, a call to arms in sticker form on literally millions of laptops. These guys know what they’re doing.

Privacy Icons

Privacy Icons in The Atlantic

I first met Michael Nieling from Ocupop while working with Disconnect on a project called Privacy Icons.

The idea was to create some simple iconography, backed by short form privacy pledges, that would advise users on data practices of the sites they were visiting. For instance, “this site may share your data with third-parties” or “this site will not share your data with third parties.” Michael personally devised some designs that were hip, functional, simple, familiar. The project was recently featured in the June 2013 issue of The Atlantic.

Popcorn Maker

When we began building Popcorn Maker at Mozilla, we knew we’d need some branding and UX help. Having worked with Ocupop, they were our top choice out of the gate. I remember sitting with Brett Gaylor, Bobby Richter, and Kate Hudson in Toronto, in videoconference with Ocupop as they walked us through their design presentation. When the big reveal happened, we nervously glanced at each other. I really wasn’t hot on the Popcorn Maker identity work.

But, like great logos are supposed to, it grew on me. Michael informed us that it’s a pretty common reaction for people working on a project to reject outside design. The colors or shape might feel off. The aesthetic may feel weird. But if you stop thinking on the axis of “I like this” and start thinking about how the design works, the logic and care within it starts to show. And sure enough, after a night’s sleep, it clicked. Hard. “Yeah,” we all agreed in our next meeting. “That’s the Popcorn Maker logo.” Ocupop doesn’t provide options, just solutions. And that’s how it should be.

The Popcorn Maker logo is immediately recognizable. It works in so many contexts, from 16px to billboard. It has utility and emotion of its own. And if you look very closely, you will find lots of hidden meaning—play controls, HTML brackets, symmetry and detail that works silently to create good feeling. I now know better than to second-guess the guys at Ocupop—I’m in awe of their design and presentation process.

The Mozilla Open Badges team also worked with Ocupop on their identity and branding. I wasn’t involved but I think it looks pretty damn good.

PBS and FRONTLINE/ProPublica

Beyond identity, Ocupop does great UX and frontend design. I worked with Ocupop on a project with PBS Newshour called AdLibs.

PBS Newshour AdLibs

AdLibs is a political ad generator: you connect it to your Facebook, choose an ad archetype, and it walks you through the production of a humorous, customized political ad. Then you see yourself and your data in an attack ad, or a patriotic campaign ad. While funny and shareable, the project is also a media literacy education tool. It explains popular political messaging tropes and links them back to historical examples from political campaigns throughout the 20th century. In a stroke of genius, Michael named the genre “political entertainment.” Soup to nuts, Ocupop designed and coded the project, and consulted on the concept and content production as well. Creative, clever, and absolutely a pleasure to conceive.

FRONTLINE/ProPublica interactive by Ocupop

Michael and team also pulled out the stops at the Tribeca Storytelling Innovation Lab. We invited a few Ocupop guys to participate in our weeklong web documentary sprint, and they did something amazing with the team at FRONTLINE/ProPublica: a massively ambitious web app that delivered a chunk of interactive investigative journalism. From concept to code, all production inclusive, 4 days. The finished project is amazing, but perhaps more amazing is the timetable on which it was produced. No wonder Ocupop touts its “unwillingness to sleep” along with its other creative capacities.

Drones & Aerial Robotics Conference

http://droneconference.org

Most recently, I’ve been fortunate to work with Ocupop on the identity and website for the Drones & Aerial Robotics Conference, a massively multi-disciplinary conference on flying robots. As always, the design is tight. The logo is heraldric in a way that suggests both promise and peril—a great visual representation of the tension in the conference. It’s a little militaristic, but not too much; a little tech-optimistic, but not too much; a little sci-fi, but not too much;. It’s bold but refined. Possibly tongue in cheek, possibly sinister. It’s ambiguous but interesting. It’s arresting but at the same time lets people project their own thoughts and values onto it. This is exactly what the conference will be like for our attendees. Where identity goes, it’s a good foundation for the directions DARC might take after the conference.

(And to me, the site they built is an exemplar for conference websites. Clean and clear presentation of the information you need, and visually interesting at the same time. Check it out.)

Work with Ocupop

Their work is effective and memorable. And they’re the kindest, most professional dudes imaginable. It is super rewarding to work with Ocupop. Seriously, work with Ocupop.