Who Was Heroes - Google Action

 

Working with: Matchbox Mobile, PRH, & Google 

Key contributions: Initial Research, planning and running a design sprint, assessing the content, creating a strategy, mapping out the product, pitching concepts, Google Canvas visuals (using PRH assets), designing and creating Lottie animations, snagging and refinement

Everyone at PRH is such a pleasure to work with, they’re enthusiastic, proactive and just plain lovely. So when Matchbox Mobile put me on this project as the Lead Product Designer I was pretty happy about it. 

Working with Rebecca Evanhoe, the aim was to bring the Who HQ brand to Google Nest. Allowing children to discover new inspirational characters each month. 

My top 3 takeaways from this project were:

  • Make sure you fully understand the content before you start designing

  • Animations are a necessity rather than not a nice to have

  • Don’t let dynamic content stop you using voice-over

Make sure you fully understand the content before you start designing

When working with existing content the first step is always to understand the content and identify any potential problems. With WhoHQ there were a few key issues identified:

  • A lot of the chapters exceeded the Google playback length limit

  • Some of the audio required supporting graphics, which wouldn’t be possible on voice only devices

  • The illustrations were very varied, from tiny stamps up to large double page spreads.

Identifying potential content issues right at the start meant that they could be included in the design workshops. This has a huge benefit as you’ve got the whole project team and the key stake-holders at your disposal. I’ve witnessed many issues get solved in an instant by a developer mentioning a new API they’ve read about, or the client saying they can provide content in a different format.

Google Canvas & Lottie animations

This was my 3rd project using Google Canvas and the second Google Action that I’ve used Lottie animations in— if you haven’t yet used Lottie before I highly recommend you give it a go. 

A static screen while the device is speaking can make the product feel like someone talking over a slideshow. Using animated loading states, transitions, and graphics really helps make it feel like a refined multi-modal experience. Lottie converts your After Effect animations into Json code for you to hand over to the dev team. And if you want to get really smart you can add dynamic content to them and link them to loading percentages. 

Using voice over for dynamic content

If the past 4 years have taught me anything it’s that Matchbox team are an ambitious bunch. So when it was decided that the experience would be full voice over, despite the menu items changing on monthly basis. I was confident they’d pull it off. This came with risks, but building and testing the experience using in-house recorded audio allowed the team to refine the experience before investing in professional voice talent.

 
Previous
Previous

AA Car Genie - Native Apps

Next
Next

Kenra Professional - Alexa Skill