A whale of a story

Defining a scalable visual language for our products

A while back, we spoke of our efforts at crafting a unique story for our products. We had to draft the product story and then illustrate it. Alternately, we could add life to our product with illustrations setting the context of use.

We identified the potential screens where illustrations could help build context and aid clarity.

Manuel scribbled ideas and created drawings for the identified scenarios. The unbridled visual explorations were mini stories on their own. The outcomes were promising and this seemed like a much better approach than going with a pre-defined story. He continued churning out individual drawings and let the narrative evolve into a larger story world.

“The universe is not made up of atoms; it’s made up of tiny stories.”
- Joseph Gordon-Levit, The Tiny Book of Tiny Stories

Mini stories created for the identified scenarios

What emerged was a ‘Lewis Carroll’ kind of fantasy world. While this looked like a great start for a story, there were problems to be solved.

The illustrations were created by one individual. Others on the team would not be able to create new illustrations in the same style.

The illustrations were too detailed and looked noisy at smaller sizes. The key message of the story context had to be communicated without distraction.

How do we achieve scale and uniform style which anyone on the team could produce?

We knew of the work done by Pablo Stanley with project Humaaans. We looked at the minimalist illustrations of the recently rebranded Uber.

‘Hyper efficient, easy to understand and inspiring through metaphors’ were the principles of Uber illustrations.

John was particularly impressed with the way focus is achieved in Google account’ page illustrations.

Illustrations on Google Account bring greater focus on the key message object while fading out the setting.

“The ability to simplify means to eliminate the unnecessary so that the necessary can speak.”
- Hans Hoffman, German-American Artist

Manuel sat down to further simplify his sketches.

Before

After

We were able to simplify the illustration language by:

1. Making the background a single blob of colour with no noise
2. Bringing the message object in colourful detail to the foreground
3. Relegating the story object to the background as negative space

This simplified language worked well for others to adopt and develop stories for other products.

For now we have achieved a unique and scalable visual language. To be fair, Manuel isn’t happy with the simplified style.

The next challenge for us is to bring back the richness of hand drawn illustrations. Now thats a story for later.