BoomBot - Designing an iPhone app

emma@andhertoonz.co.uk — 2009-07-22T17:54:50+01:00

Hurrah! It’s only taken 3 months for Apple to approve, but my first iPhone App, ’Boombot’ is finally here and available to buy 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 well chuffed he asked little ol’ me to design for him. :D

Anyway, Previously knows as ‘Mack’ (explanation to follow), ‘BoomBot’ is your retro pocket speech synthesiser 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 recently 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 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.

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 or Littlesnapper, (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 (Hurrah!) and has since put Boombot on the front page of the iTunes app store. Its even climbing up the charts as we speak and is currently something like #12 in the top paid apps and #3 in the entertainment category. Love and happiness is restored.

Current figures show it is shifting about 800-1000ish a day while on page 1. Not bad for something ‘novelty’ I reckon. Apparently, we’ll stay in the *new & noteworthy* for about 4 weeks, moving down a page each week so we’ll see how things go. I’m guessing one reason Apple noticed this app was down to Ed’s previous rep. Which may I add, is definitely well deserved.

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!

And finally, a great article from SmashingMag, (Fantastic design blog) about designing for iPhone.

Thankyou, Grandpa

emma@andhertoonz.co.uk — 2009-03-13T10:15:20+00:00

My ‘re-designed’ website was long in the making (A whooole ‘nother blog post!) and was finally published last week thanks to RapidWeaver, My Brother-in-law to be, and lots of encouragement from my Grandpa.

Every week, my Grandpa would ask my progress, and check for any online. He showed much interest in new technology, and was the only one in his school class to be a member of FriendsReunited. He never stopped learning.

Grandma and Grandpa lived just around the corner from us, but moved in with here for the last few months so we could care for him. Although he was extremely poorly in his last days, I managed to break the good news that my site was finally live. He passed away just a day later (Probably at peace that the damn thing was finally done!). I am therefore dedicating my first blog post, as well as my entire site to him.

Although it still doesn’t seem real, I write this the day after my Grandpa’s funeral. He was 81 years young.

My Grandpa was basically my Dad. He should have been there to give me away at my wedding later this year, but the world works in mysterious ways.

Grandpa taught me to draw. And paint. And make things. He sat with me and helped me with my homework, college and university projects. In fact he helped me with some of my early freelance commissions! He took me on holiday, built our extension and gave me so much more than anyone showered with money. Time.

He had time for everyone. Grandma had once come home be greeted with a tramp eating a full English breakfast at her dining table. Of course Grandpa had taken him in and this short tale sums him up perfectly, but there are countless other stories of similar nature! I could write forever on how fantastic he was but in a quote from a relative:

“Ronnie was a truly wonderful and kind man. Tremendously clever in every way with so much talent and extremely modest with it. Not one person in the whole world could possibly dislike him. He will be very much missed by everyone who was privileged to know him and the world is now a lesser place without him.”

I have 25 years of happy memories with my Grandpa/Dad, and for that I will always be thankful.

This is the last piece of work I finished for my family, also given to my Grandpa at the chapel of rest as a final thankyou.

Technorati Profile

And'ertoonz Bloggity Blog

BoomBot - Designing an iPhone app

Thankyou, Grandpa