BoomBot - Designing an iPhone app
Just over a year ago, I worked on my first iPhone app. I LOVE the iPhone platform and so it was a pleasure to work on.. but I encountered a few hardships along the way which I will share with you!
It’s took 3 months (MONTHS!!) for Apple to approve, but when my first iPhone App, ’Boombot’ became available to buy, it was from page ONE of iTunes Appstore to boot!
I worked with the fab @edlea; the genius behind top selling TV plus, Copy Share, OverHere & THE MMS app that pretty much all iPhone owners used before the 3.0 update! Ed is well known for his innovative ideas, which is why I was also really chuffed he asked little ol’ me to design for him. 
Anyway, Previously knows as ‘Mack’ (explanation to follow), ‘BoomBot’ is your retro pocket speech synthesizer who will repeat anything you want him to say. Boombot also has his own ‘memory’ and stores all your saved phrases for easy access should you want him to repeat anything.
For anyone looking to team up with a programmer and design an app for iPhone, I’ll talk you through the process and unveil the story of our little ‘saga’ you may have heard me twittering about too…
As a designer, I can assure you despite my initial concerns, that your graphics will stay the same colour on the iPhone screen as they do on your computer screen. I can’t speak for the iPhone 4 (Yet!) but I was initially wondering if they would look any different, but they don’t. Not to me anyway, so don’t worry.
Using the same principles as saving for web, I saved all my graphics using Photoshop ‘save for web’ option and saved them as 72dpi transparent PNG’s, or JPEG for backgrounds etc. The JPEG’s were slightly smaller in file size than PNG so I found this was the best way.
For the animated mouth effect, the transparent graphics simply overlaid one another in the SDK, (Software Development Kit) and the alpha transparency was changed according to the volume of the speech.
The icons needed were a 57x57 pixel icon and a 512x512 large icon, (Actual sizes below) which Apple use to generate artwork for iTunes. The small one is the one you see on your phone’s screen.
I initially also created ‘rollovers’ of the on-screen buttons which were to look ‘pressed in’. However, The SDK seemed to automatically create a darker version of a button for this purpose. We went with the iPhone version to keep consistency and familiarity between the iPhone UI and its app as best as possible. Again, these were saved with transparent backgrounds.
The main background image was 360 x 518px, but if your app design needs a bottom bar then you’ll need to take that into account too. (Update) While this is true of the iPhone 3Gs; the 20101 iPhone 4’s iOS SDK simulator can also render an app’s images, user interface controls and text at a higher resolution of 640x960!
Aaaaanyway at the beginning of this brief, I set about illustrating Ed’s robot as one who would appeal to the vast audience. As I was sketching out my ideas, I somehow made something that kind of resembled an old iMac. It was that light bulb moment that then left me exploring the idea of having a robot made up of old Mac parts. Being exclusive to the Apple iPhone and all that. Well…I thought it was quite clever anyway :P
*Lazy tip for iPhone users* Rather than faffing with a scanner, i take a quick snap of the drawing and upload it to Skitch , (If I’m sharing with my twitterers) or simply just email it to myself. Much quicker! However, I know this wouldn’t work so well if you use Photoshop to clean up your hand drawn artwork – but I work by tracing sketches over in Illustrator to vectorise them anyway.
I finished him up using Adobe illustrator and even designed another ‘animated’ element showing the loading status, but it turned out we never needed it as the ‘cloud in the sky’ processed it much quicker than we originally expected while testing him.
I must admit I had a slight niggle Apple *might* have some kind of issue with it, but Ed liked it so we tried anyway (minus my *ahem* on/off switch 
). Technically, I hadn’t used Apple’s logo anywhere and had just made (be it strong) resemblances to their products.
It wasn’t okay. I should have known better.
They came back with this:
“Thank you for submitting Mack the Talking Robot to the App Store. We’ve reviewed Mack the Talking Robot and determined that we cannot post this version of your iPhone application to the App Store because of Apple trademark images. Please refer to the attached screenshot. We want to remind you of the importance of following Apple’s posted Guidelines for Using Apple’s Trademarks and Copyrights: <http://www.apple.com/legal/trademark/guidelinesfor3rdparties.html>.
If you believe that you can make the necessary changes so that Mack the Talking Robot does not infringe on Apple trademarks, we encourage you to do so and resubmit it for review.”
Meh. Luckily, being a vector graphic, it was much easier to edit and move bits around… so no big deal. For now. So I removed all major resemblances to Apple, his ‘Mack’ name chip, and I even changed the buttons just for good measure. (I had designed them by playing on the default iPhone UI designs to suit the ‘new speech’ and ‘memory bank’ ones we needed… and as Apple weren’t being specific we thought these could be part of the problem.)
Ed knew from previous experience, if/when Apple reject apps they’re generally quite quick to reassess them after you submit an alternative version but no. Not this time! They took weeks in fact… before coming back with the same ‘copyright infringement’ wall. FFS!
We were losing hope in little Mack, bless’im.
So now, from a designers point of view, I was making unplanned artwork changes which weren’t covered in the original contract. I’ll probably be stoned to death by fellow freelancers, but I decided to overlook it in this instance. Again, my fault. This should have been covered in the contract but wasn’t. Learn from my mistakes people!
I could have left Ed high and dry at this point but that’s not who I am. Sometimes to my detriment, I always like to go that extra mile for others and treat them as I would like to be treated myself etc. I know – not always good business sense but there you go. I’ll usually judge these things on gut instinct and am still happy with my decision.
I don’t mind sharing the fact that Ed and I had approached this partnership on a % deal. I would receive a % of profits after server costs had been taken away. So technically I hadn’t received any payment at this point. Although a method I wouldn’t normally recommend and a little risky, I simply looked at this as a learning curve and a chance to have my work published on a new platform. A platform that I love, and use everyday.
Knowing of Ed’s previous success, which was also an important factor in accepting the % contract, I was happy Boombot would sell, but think the exposure would make up for any shortfall should there be any. It should have been a smaller job than we both envisaged, but shit happens. I would be happy to design more apps with Ed, or other developers again in the future and this hasn’t put me off at all. These things are sent to try us. I’ll see if the % deal pays off and adjust my pricing strategy for the future based on that, and the developer in question, but I suppose the best way to learn is by doing…
Anyway, I made even more minor changes, but no. They didn’t like those either. WTF? This was getting beyond ridiculous.
I then decided I could spend ages delaying the project by changing lots of mini things, or just sack it and come up with a new design.
To cut a long story a *bit* shorter… this is how ‘Boombot’ came about. The love child of Mack, and the retro Boombox I’d spotted on Alan Carr’s ‘chattyman’ talkshow set. Don’t ask me how they met.. That’s their personal business
To end the ‘saga’, Apple approved this version (Huzzah!) and even put Boombot on the front page of the iTunes app store! Its climbed up the charts and, at it’s highest, came in at #12 in the top paid apps and #3 in the entertainment category. Love and happiness is restored.
Initial figures showed that is shifted about 800-1000ish a day while on page 1. Not bad for something ‘novelty’ I reckon. We stayed in the *new & noteworthy* for about 4 weeks, moving down a page each week.
In conclusion (if you’ve made it this far!) I swear it would have been easier to illustrate Steven Hawking and have that approved! :P
Peace out x
Emma’s recommended links:
Ed’s site
BoomBot’s Site
Here are the free iPhone UI vector graphics (and PSD) i used to mock up my design. Excellent resource! (Update) here’s an iPhone 4 template! —-> http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
And finally, a great article from SmashingMag, (Fantastic design blog) about designing for iPhone.
(Update)
Since this post, I have received many inquiries about how to get started designing for iPhone. My advice is to firstly check your idea hasn’t already been done (and better at that!) using the app store in iTunes.
Secondly, you might want to approach a coder familiar with the iPhone SDK. (Software Development Kit). If you don’t know where to start, perhaps use the app store to see which are the best apps and usually you’ll find the link to the developer beside his/her app. Always read the app reviews (But take them with a pinch of salt!) and then, if possible, try their UI out for yourself.
Please also be aware, while the app-market can be very lucrative, it’s also very overcrowded. People can be very fickle about apps they download and aren’t usually willing to pay alot for them. (Most of the money will come from mass sales and/or advertising.) The more unique your app the better and It ALWAYS pays to do your research!
