Real NYC: The most work anyone’s ever put into an iMessage sticker pack
Or, how we got inspired and had tons of fun making something
With the recent release of iOS 10, Apple added stickers to iMessage. Sticker packs are dead simple to make, but that means there are tons and tons of them out there. We decided to throw around some ideas and try to find something that would really feel special, and then spent about three weeks putting together everything for Real NYC.
This is the story of how you find a good idea, push it as far as you possibly can, and have as much fun as possible in the process.
We got together a small crew and threw around about 50 ideas. We gathered them in Google Slides, all super low-fi, and just talked out loud about what we thought would be cool to use and cool to make.
Someone suggested a sticker pack inspired by New York City. We quickly realized that most of the stuff on the sticker store is cutesy or comic book illustration, and there was a big gap for something REAL. We decided a reality-inspired pack for New York was the best idea, and the only way to do it right was to take honest-to-god, real-life photos of the grit and grime we experience in our city every single day.
Prove that concept
We started by mocking up a motivational moodboard/poster/site. This came to fruition via spitballing back and forth in the office. What are the things all of us see on the streets every day? It’s not the landmarks, or the tourist attractions—it’s the grit. We kept honing in on the things we instantly understand as locals, and also the things that would be a fun surprise in the context of a conversation.
We sat together and started throwing out ideas. Every time someone said an idea and someone laughed, we added it. Just pulling things off Google Images and throwing it down helped us fake a little product page.
After an hour of laughing almost non-stop, we had a real sense that this would be awesome to make. For us, it was scratching an itch.
Pricing
After these initial 50 or so ideas I said we should do 99 stickers for 99 cents. I told everyone in the office, “C’mon, that has a ring to it.” It also seemed obtainable, and provided a limit so we wouldn’t go completely overboard. There was much argument over this. Too many stickers they said, too much scrolling! Whatever, we needed to get started. Where are these photos coming from?
Shooting
We thought for a moment that maybe we could find rights-free images—we wanted to sell this after all—but that was a waste of time. There’s nothing real about stock images. Besides, buying images would have been absurdly expensive. And really, buying a photo of things that are just outside our door? Lazy.
So, we grabbed an umbrella, broke it, threw it on the ground, snapped a photo, cut it out in Photoshop… We went through the moodboard for each item, over and over. One shot after another.
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.
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.
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.
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.
I got some field recordings waiting for the train and then composed everything in Ableton Live. We were aiming for something that started out slow, went fast, and then at the end had a definitive wrap up for some of the take-aways.
After all the shooting and recording, an afternoon in iMovie was all it took for Brett to thread the needle and bring it together into a great story.
Hopefully that was an enjoyable run through, I thought it all too fun and ridiculous to keep everything to ourselves.
Have at it
- Install from the iMessage App Store
- Visit the website
- Watch the promo video
Wait, how do I use these things?
Before we let anyone else know about the sticker pack we told a few friends. What kept coming up was that people had no idea where to get stickers, how to install them, or all the cool things you could do with them. They’re new of course. Here’s a quick video of everything you’d want to know.
