The Squircles

Type

  • Illustration
  • System

Role

  • Creative direction
  • Character design
  • Illustration
  • 3D Modeling

Timeframe

  • 6 Months
  • Jan – Jun 2012

Company

  • Nokia

The Squircles

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

The Squircles

00 · Summary

Challenge

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

Outcome

Beyond the full illustration set, I developed a comprehensive design system that enabled anyone with a vector editing tool to create a Squircle character. The Mr. Squircle character set became a Nokia patent and was widely used across its digital Maps platform, editorial content, and promotional materials.

Impact

The City Pages within Nokia Maps became the most visited editorial section in the application. The design system and visual language helped product teams align on a consistent illustration style for use across layouts and applications.

Credits

Ricardo Osório Santos

Art direction, illustration, character design

Ray Ho

Creative direction

01 · Approach

Nokia's iconic symbol

By 2010, Nokia began using 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 Finnish company. My approach was to derive all characters and illustrations directly from the Squircle itself.

Three stacked Nokia N9 handsets in magenta, cyan and black, the home screen showing the squircle app icon grid
The blue Nokia Play 360 Bluetooth speaker, a perforated cylinder with a squircle footprint

02 · Process

Bringing the Squircle to life

The drawing pad was my primary tool for exploring how the characters could be derived from the Squircle. Simplicity and scalability were at the core of the sketching process. Color played a crucial role in Nokia’s physical products, and I aimed to incorporate it as much as possible into the character development.

Pencil sketchbook page of early squircle characters, each a rounded rectangle body on two stubby legs
Coloured-pencil sketchbook page placing squircle characters in scenes: a figure under a green umbrella in the rain, and a city skyline rising from an open book
Four-step construction diagram deriving a character from the Nokia squircle: the icon shape, the squircle alone, the body and limbs blocked out, and the finished figure with camera
Five finished squircle characters standing in a row in front of a grey cloud, each with a different hairstyle, outfit and accessory

03 · Development

A modular character design system

Once the character shape and proportions were finalized, developing the design system became straightforward and enjoyable. It helped product teams align on an illustration style that was both on-brand and easy to execute and scale.

Identity page from the Deconstructing The Squircles guidelines, showing a character over its construction grid beside the squircle it is built from
Colour page from the guidelines, with six palette blocks pairing a dominant spot colour with its supporting swatches
Expressions page from the guidelines, showing the eye and mouth grid and four faces built from it
Shapes and sizes page from the guidelines, with a character dimensioned in pixels and its legs, torso and head broken out separately
A squircle character jogging in a yellow headband and striped vest, white earphones trailing from their ears
Arms page from the guidelines, specifying arm dimensions, the twenty per cent black shadow, and six arm positions
Library page from the guidelines, showing twenty-one characters spanning different ages, professions and cultures
The Deconstructing The Squircles guidelines laid out as overlapping spreads: basic shape, shoes, arms, colour, city facts, library and identity

04 · Final delivery

The design system in context

To meet the Nokia product teams’ need for illustrations, I was tasked with creating over 50 unique illustrations for the City Pages, an digital editorial product from the Maps team.

A Berlin city fact illustration: a character reading on a bench beside a bus stop, next to the note that a BVG standard ticket costs 2,30 euro and lasts two hours
Three greyed-out Nokia Maps City Pages for Berlin, with one city fact illustration magnified out of the page
A fifteen-illustration matrix showing five city facts, seasons, water, urban area, rainfall and beer, each drawn at three levels

Quantification and city facts

Each city featured nine generic facts, of which five were selected per city. For each fact, there were two to three variations of the same illustration—for example, the “price of beer” could be represented as cheap, average, or expensive.

One example of a city fact illustration is Hamburg: “Hamburg has more bridges than Amsterdam and Venice combined.

The Discover the world in 3D landing page for Nokia Maps 3D open on a laptop, a squircle character piloting a rocket across a night sky
Three full Nokia Maps landing pages side by side: Discover the world in 3D, sharing places with friends, and finding your way by public transport

05 · Customer feedback

Beautiful work, Ricardo. This will be incredibly helpful for the teams, and we will finally have a library of illustrations with a unique, consistent style. Nokia will also register a patent for your work.

—

Vitorio B.

Creative director

More case studies