The Squircles case study
  • Type
  • Illustration
  • Character design
  • Design system
  • Client
  • Nokia
  • Feb 2012
  • My roles
  • Art direction
  • Character design
  • Illustration

The Squircles

I was commissioned by Nokia Berlin to illustrate a total of 62 individual facts of 62 curated cities. These cities were featured in the editorial section of their Nokia maps' platform.

Squircles overview

00 · Project summary

Challenge

In the summer on 2011, while freelancing at Nokia as an AKQA contractor, I was asked to create a set of 53 illustrations to be featured on the editorial section of the city pages of Nokia Maps, each one depicting an interesting fact about a city.

Outcomes

Beyond the full illustration set, I've delivered a comprehensive design system, that allowed anyone with a vector editing tool to create a Squircle character. The Mr. Squircle character set became a Nokia patent and was widely used on its digital Maps Platform, editorial and promotional content.

Impact

The City Pages within Nokia Maps became the most visited editorial section within the application.

The design system and visual language helped product teams align on an illustration style to be used on layouts and applications.

01 · approach

Nokia's iconic symbol

By 2010, Nokia started to use a branded graphic element to differentiate itself from competitors, the squircle. From product design to the interface of the Nokia N9, the squircle became an iconic element for the finish company. My approach was to derive all characters and illustrations from the squircle itself.

Nokia N9 Nokia play
Early sketches Early sketches
Squircles construction
Squircles characters

02 · Design system

Playfulness and character on the new Nokia City Pages

The City Pages were intended to be inspirational and informative. A page you would click to learn about a city you are planning to visit. The illustrations, within the city facts' module, brought playfulness and character to a very text-heavy editorial layout.

Soon, other product teams within Nokia, requested illustrations for their own products. The need for an illustration library and a unified illustration style, led me to create a playbook to achieve consistency across product teams.

Squircles storytelling
City fact City pages

Quantification

Each city had 9 generic facts — 5 chosen per city. For each generic fact, there were 2 to 3 variations of the same illustration. Example: Price of beer would have the same illustration represented as cheap, average or expensive.

City facts quantification

53 City facts illustration set

A selection of some of the illustrations used for 53 city facts. Example: Berlin is the only city in the world with three active opera houses

03 · Further narratives

Additional illustrations and storytelling

As the illustration style became adopted by the product teams, I started to get requests for the creation of visual narratives to help with on-boarding processes, or to improve the storytelling of specific information pages.

Squircles storytelling
Squircles storytelling
Squircles storytelling

06 · Client feedback

You know you did a good job when a great designer tells you this.

Our review sessions on your ongoing process were my weekly highlight for the past 3 months. Thank you so much for your hard work.


Tanja Neubert
Sr Art Director Nokia

Next case

Made of air