When we were first discussing Noah’s initial idea we sat around and conjured up some ‘human’ buddies to be animated and be included in the app. But there was something about them that just wasn’t right. That ‘something’ was everything.
We grabbed ten minutes with Matt Powell, Lead Designer at our guru app company Matmi to find out how he banished humans from DiaryZapp and instead brought Zappicons to life…
What was the inspiration behind our lovable Zappicons?
The concept started early on in our journey with Charlie, Jon and family. Our very first pitch document contained all our ideas about how we could bring DiaryZapp to life. It needed character, someone to motivate and guide the users through the experience. So I was thinking; ‘What’s a fun, friendly character that people would rally behind?’ Then it struck me. Sports mascots. Those familiar, squishy suited creatures with super-sized characteristics – Vancouver 2010 had major mascot game. It’s a personalised costume with unlimited scope made for your in-app companion. Who (or what) is actually inside the outfit? Well I can’t reveal that…
What is the child psychology behind the style of the Zappicons?
We knew the app needed a character as a guide, and we knew from research that the key demographic is big on self-expression and creativity. So the characters needed to be modular, share some stylistic traits that children could identify with, yet be really flexible in terms of customisation options. Our interns, Izzy and Dan did a great job helping out here, creating a wealth of hats and body parts following my style guidance. It took a while to really work out how to get the most out of the one ‘skeleton’ which drives the character’s animation. For example, we needed to make the hat bone which is suitable for both birthday hat and bunny ears. We got there in the end, though and I’m really pleased with the outcome, I think they match the upbeat mood of the app really well.
How many versions or variations are there roughly?
So I did some quick calculations. Using all the customisation options for the body, arms, legs, eyes, nose and hat, there’s over 14,000 different character options. However, if you get creative and use the colour wheel, the combinations are practically infinite…
What software did you use to bring them to life?
We developed the app in Unity, but the characters themselves were designed in Photoshop and animated in Esoteric Software’s really phenomenal 2D animation package called Spine. It’s got some really epic time-saving timeline features and neat skinning tools which were integral to the part-swapping mechanic in DiaryZapp.
What other factors and considerations were relevant when you were designing the Zappicons?
Time was, and always is of the essence because alongside the character design we also had to crack on with crafting the look of the app UI. If it was up to us, we’d have been creating body parts until the cows came home.
But while we’re talking about the user interface, I should mention how the stylistic elements of the Zappicons came into play throughout the app itself too. The shading, the sharp-but-textural lines and the general inflated, round and playful personality.
‘Clear communication’ was also a big deal and became a bit of an in-house mantra in the design and development process.
While we were looking around at the other apps out there, they all seemed so dull and lifeless. So I wanted to take the legible iconography and flat aesthetic, but introduce ‘errors’, little bits of texture and fraying around the edges of buttons. Just for a touch of humanism. My aim was to create a whole uniquely playful aesthetic which sits perfectly together with the Zappicons who inhabit it! I like to call the whole thing ‘sketch-perfect’.
Thanks Matt, we just love them. It’s fair to say you absolutely nailed it.