Building an illustration system for Kaodim

The original was published on Kaodim’s official Medium channel on 6 April, 2020. Please visit Medium for the full article.

How we started it

By early 2019, being a part of the small design team in Kaodim, I proposed to redesign our new illustrations in our core products. Prior to this we had very few illustrations in our products, and it was not based on any strict guidelines. For sometime the long-time-sleeping artist/comic-maker in me (ermm, or a wannabe one) was having a wee-bit concern that we needed to build something fresh and new. Beginning of the year seemed like a good time to start something new and fresh.

For those who haven’t heard about the product — Kaodim is a services marketplace connecting consumers with service providers to help get job done for services like house cleaning, aircond servicing, plumbing installation, local moving, etc., to name a few.

So, why are illustrations important anyways?
Illustration is a way to communicate. An illustration accompanied with text can convey a message far better than with text alone. It can very well resonate with a user’s moods easier than words could. Also, this may sound cliched, but “an image speaks louder than words”.

Key Objectives

If you search for “app illustrations, empty state illustrations, product illustrations”, you will see a lot of similar looking results. Sadly, most digital products have embraced generic, similar illustrations over the years. Hence, our main objective was to create a fresh, authentic and a natural-looking style, moving away from any fancy colours, shapes, gradients, and instead to show true-to-life interactions and emotions representing diversity of people who connect through our platform.

Exploring ideas and establishing principles

Even though art is subjective and challenging to convey the same meaning to the observer, it shouldn’t stop from defining certain principles. Simpler shapes, short strokes and limited colour palette preserving brand colour, primary and secondary colours were decided as key visual guidelines.

In order to explore within a set of constraints, and to not go overboard with too many ideas, we restricted explorations to few core principles:- Diverse, Human, Colourful, Empathetic, Relatable, and On Brand.

We are diverse

Kaodim group serves its users across Southeast Asia — Kaodim in Malaysia and SingaporeBeres in Indonesia and Gawin in Philippines. Our product have a diverse user base — people from different backgrounds, cultures, age groups, etc., We portray diversity with varied skin tone palette, physical features and true-to-life body types.

Be human

We use human characters wherever it is possible. Characters should be in action, expressive, or doing something instead of being stiff, life-less or generic.

Colourful

Although we don’t have a complete colour palette for all the colours that can be used on illustrations, we do have a recommended set of colours to be adapted from our style guide in Kaodim Design System.

Kaodim Brand is the brand colour, as well as the primary colour in our products.

Kaodim Blue, Kaodim Green, Kaodim Orange, Kaodim Red are secondary colours from our style guide. Apart from these few skin tone colours recommended for illustrations.

Empathise with users

Empathy is fundamental in product design, the lack of it can give disastrous user experience. To resonate with our users, we try to empathise with our users on by reflecting on their emotions, thoughts or experiences.

Relatable

As you have already seen from the above usage examples, all our characters are relatable to real people. Our style does not have any abstract metaphors

Embrace the brand

There are no strict rules on colour choices, but we try to include “brand colour” on some elements in an illustration. For example, an illustration of a service provider should always spot a ‘Kaodim branded t-shirt’. For other characters there are no limitation on colours, however, having some element in brand colour in those illustrations is highly recommended.

When to use illustrations

Having guidelines or style isn’t just enough, you also need to use it properly. An illustration is only as powerful as the way you present it. Avoid doing illustrations that end up being distracting or overwhelming. Respect the user’s primary goal in every situation with the product. An illustration should only guide, assist or help the user relaxed.

When do we use illustrations in our products‌‌

  • Scenarios where a user may have no clue on what to do next
  • For misunderstood or highly ignored features (including introducing to a new feature)
  • Empty states, error states & clear states
  • On-boarding (tutorials on first time launch of the app/screen)
  • Assist a long text that might be misunderstood
  • Success and celebratory moments

Below are some of the screens where illustrations used in Kaodim app: —

Final notes

Our design team — myself, Irene and Anne have been working passionately to build a comprehensive design system for Kaodim, and the illustration system is only a category from it. We have also been working on to collaborate efficiently with other teams about the new styles, to keep everything consistent across the products — to adapt the new illustration system reflected across other teams in Kaodim (branding, marketing, social media, etc.,).

Thank you, and stay safe

Thank you for reading, and I hope this had been informative to you. While I am penning down this I am on my fourth week of working from home. We are still facing the COVID-19 pandemic and I hope for things to turn out good soon. Stay safe, all of you!