Ramp Champ, a game from the Iconfactory and DS Media Labs, is now available for download in the iTunes App Store for iPhone and iPod touch. I sincerely hope you enjoy the game, we’ve had such a great time working on it so far. Below is a little bit of insight into the design and development of the game, all the way from concept to launch.
Concept
Last November, I joined the Iconfactory. In that month, we had a meeting about our ideas for a new iPhone app. I had the idea in my head of a kind of “Skee Ball” game. (Mind you, at the time there was no such game on the App Store.) My idea stemmed from the fact that within a factory full of designers, we could each create themed versions of a singular game model and prizes you could win for playing.
In December, we brainstormed ideas for what the different ramps should be and decided who would design them. We laid out plans for a bunch of ramps: a default ramp (which was transformed into Clown Town), the Icon Garden, Breakwater Bay, Space Swarm, Tiki Island, Ninja Attack, and Happy Place. Of course, I’d be lying if I said these didn’t go through major revisions (and name changes) over the course of the design phases, but these were the final names based on the ideas we had in December.
Christmas break was upon us, and we were to return in January with detailed sketches for each ramp with a description, prizes, point values, achievements and trophies. What started out as a very simple idea became a very complex game. But it was still not obvious to us, even then. I designed a blank template of what the ramp should be like, the perspective, and basic layout for everyone to draw their ideas.
We came back to work in January with a little more than sketches. A few of us had quite a bit designed already, way past the sketching phase. And then, we thought we were ahead of schedule.
Design
I started designing the UI for the game, which is actually quite simple. There are four sections of the app, which you navigate with a tab bar. The first tab “Play” lists the ramps you can play, “Prizes” shows a booth of prizes that you can redeem your tickets for, and “Loot” was your personal collection of prizes and trophies. Add-Ons came later.
We were all hard at work on sketching out our prizes for each ramp (nine of them). It didn’t seem too bad, you know, we’re icon designers after all, we do this for a living! While we were designing, DS Media Labs began developing what I had created so far by structuring the game around a diagram I drew of the user experience.
It was at this time we then realized that we needed a name for our game. After brainstorming ideas in January and February, it was obvious none of us had a clue. We came up with some really embarrassing things, so we put it off and kept working.
My original intent was to design this app where it looked clean and “iPhone” when you were playing, but I injected a bit of carnival flair to the Redeem section of the app. I had peg-holes with shelves that the prizes were sitting on with a display at the top with carnival letters spelling out “Prizes.” It was cute and appealing, but for the most part the rest of the app’s UI was pretty stale. I didn’t really mind, because like I said I wanted it to be clean. The fun part of the game was the ramps themselves, and I didn’t want to drown it all out by over-designing the UI.
Development
Sean Heber was hard at work coding up the game. Gameplay was frustrating. Getting everything to work as intended was painful. Rolling the ball up the ramp at the right angle, giving the ball the right amount of force with your flick, making targets transition to a hit state, there was a lot to do. It never seemed to stop.
As we were designing ramps, we often got into a “Wouldn’t it be cool if we could…” phase. Some people call this feature creep. “Wouldn’t it be cool if when you hit this target, another one popped out?!” This first happened with what I believe was Ninja Attack. When you hit a ninja or the gong, we wanted something to happen. Not just transition to a hit state, but instead we wanted a new target to become visible.
And thus it became immensely more difficult. We found ourselves creating new ways for the ramps to work. We designed targets with different point values, increasing over time, giving it a better progression of play, instead of being static. This made the game a lot more fun, as it was challenging and engaging, but what we failed to realize at this moment was… it meant a LOT more art and a LOT more code. (Oh, and sounds too.)
You see, Sean had developed a very good solution to ramp creation. There was a Mac OS X app that he wrote where we could stick our 2D art in a 3D space, thus creating the illusion of depth but using our two-dimensional artwork. This was fantastic. We could edit the position, what happened to the target when you hit it, etc. The problem was that we kept asking for more things to do. Could it sway? What about a group of targets that has to be hit before something happens? You get the idea. The editor application on Mac OS X became quite complex. It was obvious now that the original idea I had was expanded upon in more ways than I could have predicted.
Actually, it became pretty hilarious: when we were creating our ramps with new progressions, as soon as one person made a cool string of targets, the other ramps looked pale by comparison. So it became a kind of game in of itself, where we were all competing to make really awesome targets and progressions in our ramps. It was out of control. Like I said, hilarious.
From January until May we had been working furiously on this project, getting all the ramps complete, the prizes, trophies, UI. It was almost ready, but then we realized we needed a name. Dangit!
Again we brainstormed some names, and eventually we arrived at Ramp Champ. It was cute, funny, and yes, it rhymes. It was a good fit, and we were luckily able to snag the domain name, so Ramp Champ it was.
Craig, Corey, and Anthony went to WWDC ’09 with Ramp Champ on their devices. A few people that managed to snag them during the conference got a chance to play. We got some much-needed feedback and fixed some issues that other people noticed.
Somewhere around here, I took a completely different design direction with the app that started with the About screen. I was thinking that the Prizes screen was too cool for the rest of the app and didn’t fit with the previous 70′s lightshow/starfield look we previously had, so I designed a new carnival-style poster for the About section. We had a clash of styles going on now.
Beta Testing
In late June, we started a private beta test. We included designers, developers, and some average Joe’s (mostly our friends and families). We received a lot of helpful feedback about the style. Seemed most everybody liked the carnival style of the Redeem section and asked why the rest of the UI was so stale. I didn’t really have an answer to that. (I previously held the notion that I wanted it to be clean and “iPhone,” but they had a point. You can’t just half-cover the app in a carnival theme.)
Throughout the testing we had made changes to the gameplay functions, making it more natural to roll the ball to hit the targets you wanted. We also added more depth and more carnival-themed elements. We covered the app with posters, texture, backdrops and things that (frankly) most people might not notice. It felt good, and I’m glad that David and I were able to re-style the app like we did, it’s so much more fun.
I was also able to squeeze in some really fun (almost needless) things like iPhone wallpapers and attraction-style posters. David and I designed the website (it’s totally ridiculous) and Anthony coded it up as quickly as he could, and we got all of the assets, screenshots, and video all ready to go.
Things were looking good, and most everybody seemed to enjoy the app. We were feeling pretty happy until…
The Black Hole
Okay, I could have probably titled this section “Submit.” Anyway, we submitted the game to the App Store and waited. And waited… and waited. It seemed like an awfully long time, almost 3 weeks total. We had actually set up a pool at the office to guess when it would be approved. (Admittedly, it was partly our fault for not understanding a bit about the app description, but after that was fixed…)
I was sleeping. Well, I could have been, but I was watching 101 Dalmatians. Ged text messages my iPhone and tells me to get over on iChat. It could only mean one thing… IT WAS APPROVED! OMG! We were so incredibly excited, we changed the teaser page to announce the new launch date and now, you too can have Ramp Champ on your device!
It was fun creating the app (and a little stressful), but mostly fun! I’m glad to have worked on it, and I really hope you have as much fun playing it as we had creating it.
Also if you’re wondering who designed each ramp:
Clown Town — David Lanham & Louie Mantia
Breakwater Bay — Anthony Piriano
Space Swarm — Gedeon Maheux
The Icon Garden — Talos Tsui
Ninja Attack — David Lanham
Tiki Island — Dave Brasgalla
Molar Madness — Von Glitschka
Happy Place — David Lanham
We’re working on more ramps for the future, so stay tuned for one of mine!
A little hint: It only takes one little ticket to redeem some extra goodies, it’s just a matter of how long to hold onto it.
