Building an Illustration system from scratch

A case study about researching, conceptualizing, and creating an Illustration system and other visuals such as motifs, banners, etc. on Independence Day for a Leading Indian Car Marketplace

Role

Visual Designer, Illustrator

Industry

Indian Car Marketplace

Duration

3 Days

I aimed to move beyond cliché uses of the Indian flag, instead weaving the tricolor into the brand’s elements to create a uniquely creative and original celebration.

Stage 1. Getting Inspired

To kick off the project, I started by gathering a diverse range of inspirations and references to spark my creativity. I was particularly drawn to references that creatively incorporated the Indian flag into a story rather than traditionally using its shape.

Stage 2. Choosing the right colors

For my next step, selecting the perfect color palette was crucial.

Some primary colors were no-brainers, like saffron and green from the tricolor.
I often used off-white instead of white to make it pop against the white UI.
Yellow and red were also chosen with intent. Yellow brings a vibe of fun and happiness. Red, on the other hand, sparks nostalgia, e.g. Lightning McQueen from “Cars” and classic red Ferraris.
For the secondary color set, white was a given. Navy blue, inspired by the chakra of the Indian flag, added depth. The rest of the colors were drawn from the palette of famous car model

I aimed to move beyond cliché uses of the Indian flag, instead weaving the tricolor into the brand’s elements to create a uniquely creative and original celebration.

Stage 1. Getting Inspired

Stage 2. Choosing the right colors

For my next step, selecting the perfect color palette was crucial.

Some primary colors were no-brainers, like saffron and green from the tricolor.
I often used off-white instead of white to make it pop against the white UI.
Yellow and red were also chosen with intent. Yellow brings a vibe of fun and happiness. Red, on the other hand, sparks nostalgia, e.g. Lightning McQueen from “Cars” and classic red Ferraris.
For the secondary color set, white was a given. Navy blue, inspired by the chakra of the Indian flag, added depth. The rest of the colors were drawn from the palette of famous car model

Stage 3. Concept Development

Initial Sketches

For the initial sketches and ideation, I experimented with various car angles that could stand out individually yet appear cohesive as a family. I creatively incorporated the Indian flag and tricolor in different ways.

Stage 4. Designing an Illustration system from scratch

Before moving on to the final sketches or visuals, a key step was building an illustration system. Since the company I was working with didn’t have an existing system, I created as many components as possible to establish a solid foundation.

But why is an illustration system so important??
Creating a set of illustration standards can cut down on redundancy and build a shared visual language across the app. It helps establish a memorable brand identity, making it unique and relatable for users. Plus, it provides designers and tech teams with a go-to library of base illustrations they can easily use and reuse for various requirements.

I also experimented with creating character illustrations as placeholders and decided to build a unified system around them as well — because why not add a touch of cohesion everywhere?

Stage 5. Final Visuals

Illustrations

Illustration of a set of cars. Starting from the left, we have the base model in this angle, followed by a Hatchback, a Sedan, an SUV, a luxury Sedan, and finally, a luxury SUV

Motif illustrations featuring half and full lotuses. I deliberately chose lotuses to represent Indian culture.

The features and shapes are intentionally kept asymmetrical to give them a more organic and human feel.

Banners

Header Illustrations

A set of two illustrations for the header in the form of a carousel, featuring a red car as the common element. The car drives from cities to monuments, celebrating the special patriotic day.

Type Font header

The font conveys a sense of movement and speed, seamlessly incorporating the tricolor.

Stage 6. Glimpses on the screen