Real NYC: The most work anyone’s ever put into an iMessage sticker pack
By: Brian Baker
Tags: iOS, Design, Design Process, Video, Stickers

Getting the right photos of ninety-nine things isn’t easy. To get the feel we wanted, “any” photo of something from the streets simply wouldn’t do. We wanted a beat-down, black broken high heeled shoe—not a shiny, new red one. We knew we wanted to make sure the Brooklyn cab is a Prius and the yellow cab is a Crown Vic (seriously, they’re all Toyotas Camry’s now?). Everything had to be the authentic, real, honest city we know.

Look at this thing, just terrible.

Food was easy, just go buy it, take a photo, and then we’d let someone in the office eat it. Everyone loves pizza and bagels. Other items weren’t nearly as popular. The great thing is we got photos of food the way you actually get it, not how it looks on some stock photo website.

This was a frantic production, with everyone at our office on high alert with a running list of the rarest items from our mood board. I annoyingly kept @everyone-ing in Slack. The street sweeper, dirty old mattress, cockroach, and rat would prove the hardest to catch.

Archival research, also known as looking through our camera rolls, became the next task: Bodega Cat, NYPD Traffic Tricycles, Statue of Liberty. Done.

Cutting

As the assets rolled in we started to cut things out and add detail. Stickers in iMessage are PNGs and support a full alpha channel, so we started cutting and adding masks to reveal the background. That’s how the bottle filled with pee (actually tea) is semi transparent, allowing it to be easily placed on a photo of your friends face. Go ahead, try it out.

Cutting out a grandma cart that’s not on a white background is no simple task

Coding

We work on almost everything iteratively, and about halfway to our goal of 99 stickers we started throwing our stuff into an early build of the sticker pack. This was the moment of truth for the idea of ninety-nine stickers for ninety-nine cents. Was it too many to scroll through, or not? Well, once we started using it, everyone broke down and agreed it wasn’t too much. In fact, people wanted more stickers in multiple tabs. 🙄

Getting stuff into iMessage let us update, replace, and reorder the stickers to get a feel for which ones we wanted near the top. The more we worked on it though, the more trouble we found with XCode’s standard sticker project. The drag and drop interface started to slug and chug, and it was slowing us down.

We ended up writing the sticker pack in Swift instead, using a JSON file to map assets from a production folder and into the interface. This let us crank out assets into a folder, and then we could rebuild the app without having to do any manual updates. This sped up the process a ton.

Hunting

Every great project has one minor crisis, and hunting down a rat was the hardest part of finishing the sticker pack. We thought it’d be easy because, hey, rats are always in the subway all the time. But it turns out, they’re never exactly where you want them to be, or in a good enough light to cut out for a sticker pack that’s getting put on retina phones.

Look at the one on the bottom right!

That’s when the hunt began. We put the whole team on high alert, one designer after another traveled into the tunnels to get the shot. Nothing came of it, so we got serious. We ordered a better lens, hooked up the flash, and went back down to the tracks. Then we got it.

It’s an absurd level of effort, right? To us, this is what design is about. Having an idea and seeing it through all the way. Besides, everyone would’ve made fun of us if we didn’t put a rat in the pack.

Storytelling

Once we had all the stickers in place, we sent the app off for review. This meant cranking out screenshots, descriptions, so on and so on. The review process takes a few days, so we made the most of the downtime by building out some cool story pieces.

Website

The original website just wasn’t clear or interesting enough. We started to wonder if people would even know that iMessage had stickers, so how would the site help them understand where all this stuff lived?

The answer came down to stealing the design for iMessage and throwing it into a webpage. This meant trashing our original design the day before we wanted to go live. But when it’s right, it’s right, and it gets done.

Launch Video

We make a lot of videos at the studio. For special events, our team meetings, and of course for client work and pitches. We knew we wanted a video that would explain the idea and stay true to the story of being completely real about about the streets and ephemera of the city. A video about real New York City shit, but made only with stuff from After Effects, might as well be made anywhere by anyone. It’d be a missed opportunity and a total shame not to take things to the next level and shoot some original footage.

We hit the streets again to do two things: get some footage of the things we had already captured, but grab shots that felt like a frenzied rush around the city. We wanted that noise and chaos, that real sense of being here, to come across clear as day. We also wanted to get some good shots of some pigeons, and see if they’d eat on some pizza (they don’t).

Soundtrack

It occurs to me I’ve completely glossed over the bucket music. Apologies. We needed a soundtrack that would add some energy but also cost nothing to license. The idea came about that we could make bucket music, like what you might hear walking through Union Square, and that was that. $10 later we had a drum kit from the hardware store.

We held a talent show to see who the best drummer was and only two people entered and only one was in the office once we had the buckets. Samir Zahran, the developer on our project, had been in band in high school and provided the proper level of skill to create that true subway sound. We recorded in our office after hours.

About 30 seconds of audio seemed to do the trick.