The Making of a Monster, or “How I became a CGI vomit specialist”
You may not yet be familiar with our new app Hobson. It is literally a funny little app.
To celebrate WWDC 2015 we are making it free on the App Store from Friday 5th to Monday 8th June. Go and get a copy now, if you’re not too late so that you can use it while reading this. Please do read on because you will also discover some little-known Easter eggs in the app.
You’re about to recoil slightly as I tell you it is an “insult generator”, which sounds pretty lame. In fact it is an unfair description of Hobson, which has much more character and polish than this would suggest.
This is of course why the title of this post is “The Making of a Monster”. Humour is subjective. Also people can be pretty snobby about what they see as “novelty” apps. We were fully aware of all of this as we built Hobson. It makes us laugh and was fun to make, and we knew it would do that for some other people. If you can make a bunch of people laugh, that is a very rare thing.
We knew that we were over-engineering this app. How, you might ask? Well there are custom animations for many interactions. The Watch app and Phone app UIs keep in sync with each other when used concurrently. Yes, Favourites on the phone will update as you toggle them on the Watch. We have the best if not the only simulated vomit on the iPhone. We also attempt to get App Store reviews using hypnosis. I’m not joking!
I’m going to quickly take you through the anatomy of Hobson, to demonstrate the lengths to which one can polish what seems like even the most simple iOS app. Because even “small” apps deserve to be great, and there is great joy in the detail.
I’ll also hint at some of the undiscovered treats that remain to be found by users of the app. I am waxing lyrical here about all the attention to detail we put in. I can see how that might seem self-serving, but... the detail is what I love doing. I hope some of you like it too.
What does it do?
In a nutshell, you can generate endless insults just by tapping. You can favourite the funny ones and then see a random selection from them later in the Today widget or your Apple Watch glance.
You can also share them with friends as card images, so you can spam your friends over iMessage, SMS, Mail or social networks with comical verbal abuse.
Characterization and branding
A while ago our three-person team came up with the idea for the app.Adam Hinks worked on visual design and branding along with Mark Levy who created the illustrations and I (Marc Palmer) did the rest. This project existed entirely to ship, close to launch day, the most ridiculous thing to do with an Apple Watch. Of course it turned into a lot more, and in the end the iPhone app is the best part. We knew we wanted some kind of butler character who would be your snarky “assistant” on your Apple Watch. Mark began putting together some illustrations along these lines.
The illustrations went great. The colour scheme and look was settled upon. However for many weeks while we developed the basic app, we suffered terribly trying to come up with a name that worked and wasn’t trademarked. We exhausted so many, it really was the most tortuous process ever. At times I despaired we would ever come up with something we liked.
Thankfully we were all having so much fun with the app, and our illustrator began to churn out more and more little animations for Hobson, that we could use as reactions and idling ticks. This gave it a whole life of its own.
With the app basically done, we were thinking about what we might need to do for onboarding. The entire UI is based on tapping anywhere, so the mechanic of a tap creating a new insult hardly needs explaining. We decided that given the animations we had, “he” should be part of the onboarding and it should use the same UI as the rest of the app: one tap anywhere on screen to advance.
The only things to learn are the function of the Back, Share, Favourite and View Favourites buttons, so we integrated this into the onboarding sequence and introduced each feature one by one, with Hobson animating in sympathy.
We even made it so that you can test the “go back once” feature during the onboarding flow.
The fact is that while such a detailed onboarding was not necessary to use the app, it adds a lot of character and gives you a good feeling about it straight away. Without it, the first thing you’d see would be an insult that possibly wasn’t even that funny. Hey, it’s random and we have to be prepared for that.
The Filth Engine
I spent a fair amount of time brushing up on my grammar lingo to understand the nature of the kind of sentences we wanted to build. We needed something simple but tailored to the kind of output we wanted, which meant understanding the kind of words used in the sentence structures chosen.
Having enthusiastically curated our dictionary of innuendo in the office, we realised that it is the embodiment of the tone of the app. Rather than just being a random collection of swear words or obvious slang, we went for something a bit more oblique. We included those words at first, but found it was funnier without. We also decided to use encryption to protect the dictionary. Yes, we have to tick the box about Crypto in iTunes Connect... for an insult app.
The aforementioned tone actually took a long time to get right. We wanted to avoid it being too nasty and too obvious. We had many more words originally and whittled it down, removing some that in isolation looked innocent enough but often resulted in undesirable and truly offensive combinations that would vilify specific groups of society. It is fascinating when you start looking at language, semantics and cultural associations and the issues that spring up. Colours, for example, are very bad to use in an app like this. There are many phrases where they would be funny but also many that would be perceived as racist. It ends up being a very fine line, and you develop a lot of appreciation for great comedy once you go through this process.
During development we did transform it from general random rude phrases to “insult statements” that could be directed at oneself or a friend, and this resulted in something more focussed and much more fun to use.
The quote icon doubles as the back button. We made it so you can only go back once, to something you skipped past too quickly — which interestingly makes it somewhat game-like when you tap fast to find funny outputs.
To convey this the quote icon spins anti-clockwise, but it felt a bit anaemic. We then added a slight depression (shrink) of the button when you press it, which works great when you press and release and watch it spin and return to normal size at the same time. It makes it a tactile experience. Fiddle factor.
The tap mechanic & animations
You can tap anywhere on the screen to advance to the next insult. It couldn’t be simpler, but it felt too static.
So we added some tick animations and reactions to the phrases based on the words included. If you do nothing he’ll twitch a bit. If you tap to advance but on his face, he’ll blink, holding his eyes closed until you remove your finger from the glass.
It’s simple but changes the whole feel. Try it in the app.
We got so far using a multi-line
UILabel and word wrapping with shrink-to-fit… until we started getting hyphenation — and worse — straight-out line breaks in the middle of long words. Using "Supercalifragilisticexpialidocious" as a test word clearly demonstrated the problem.
It turns out the auto shrinking of fonts on a multi-line
UILabel can’t meet the constraints we have of “this must fit in this rectangle no matter how long the text is”. This is a niche requirement of course. The key problem is that the auto-shrink is not smart enough for multi-line content, and can do bad things like break words at characters if it gets desperate, or truncate the final line even if you set all the right settings.
So we had to write our own mini text layout engine specifically for the task. We never want hyphenation. We never want to split a single long word. I couldn’t find a way to achieve this easily with Core Text’s type setters so we went custom.
It turns out this paid off in two ways…
The Apple Watch
WKInterfaceLabel supports auto shrink of text too. But only for single line text. That took a while to work out. Anyway this meant that we had to use our custom layout code and render the text for the Watch as an image and send it to the Watch.
It’s very, very sad, but what can you do. That screen is small and the supplied UI elements simply can't handle it without ellipsis or vertical scrolling.
Word by word
The upside was the custom layout got us something we wanted early on but I had put off as requiring too much work: Word-by-word rendering of the insults. It turns out this completely changes the feel of it yet again. You get some sense of it being spoken, and the full text is revealed to you only at the end, so you tend to read along as it displays. It is a discovery process rather than a statement. I presume this is somehow related to our brains’ ability to recognize multiple objects simultaneously which seems to reduce the enjoyment when all the words appear simultaneously.
I also put in some timing calculations based on word lengths, as I quickly realised that fading in one word at a time, you shouldn’t fade the next word too soon — you want the user to have time to read and take in the previous word. So you increase the delay before the next word starts fading in based on the length of the previous word. We are talking fractions of a second here but it makes it feel great.
Now that we had custom word-by-word text layout, there was something else we could do pretty easily that was hard with
UILabel. Dictionary lookups of words that the great unwashed audience may not understand.
Adding this was reasonably easy even with the limited iOS reference libray APIs. We were also very pleasantly surprised to see that many euphemisms had the rude definition included. At least in the British English dictionary. If you don’t have that installed on your device you might want to add it.
Rate and review
We all know getting reviews in the App Store is simultaneously important and challenging.
Early on we realised that we could have some fun with this process in Hobson. Not only do we know which users are actually enjoying the app (they are adding to Favourites) we also have a personality we can use to make the process entertaining.
I won’t spoil it for you, but I will tell you this: add at least three favourites, exit the app fully, and then run it again. Go through a decent period of tapping for new phrases and you should get the least intrusive, most amusing “Rate us in the App Store” UI you’ve seen.
The money shot
No, not that kind of money shot you “Filty seed spitter”. Close to the end of development I had a truly silly idea. It is not obvious but you can shake the device to make it go back to the previous phrase once, just like pressing the quote icon. Doing so makes Hobson’s eyes rattle around in his head, which made us laugh.
We liked the kinetic feel of that and thought… what happened if you did that too often? Surely Hobson wouldn’t feel too good? Thus began the vomit engineering odyssey.
Again, I won’t totally spoil it for you but suffice to say I spent a lot of time tuning various
spewRate variables to get the particle system right. In fact, it isn’t to my satisfaction until build 1.0.2 which is not yet submitted for review, but 1.0.1 is good enough for now, at least for you WWDC degenerates.