Building an illustration system for Kaodim
A comprehensive graphic illustration style for Kaodim products
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.
These principles are explained below with guidelines or examples.
We are diverse
Kaodim group serves its users across Southeast Asia — Kaodim in Malaysia and Singapore, Beres 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.
Complementary elements
Backgrounds
Background shapes used in our illustrations are fairly simple. They are not geometric shapes, circles, squares, or round rectangles, but simply “wobbly”. A combination of two-three wobbles can be used, which is to give depth and projection.
Strokes
We adopted few ways to give depth and detailing to the illustrations. This is by using shadows and strokes. We don’t use full outlines on the illustrations, but only few disconnected strokes. This helps to add details, and also in a way helps these illustrations to “stand out” from some of the commonly found contemporary illustration styles across the internet.
Spot illustrations
Spot illustrations are “bit more complex than a simple icon can convey, but also don’t require a full illustration” due to space availability in the interface. These are secondary to full illustrations. Spot illustrations don’t require strokes as that would make illustrations complex to comprehend due to the smaller size.
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: —
A small note on our iconography
We have two types of iconography in our products. One is for service related, and the other app icons.
Services icons
Services icons follows a different guidelines, resonating with the brand colour and brand mark style.
App icons
In our product we use simple and straightforward icons. We follow these principles to maintain a consistent visual representation across products.
- Minimalistic, not decorative — Detailed icons increase cognitive load. Always use simple and common geometric shapes to create easily recognisable and understandable symbol, even on smaller devices.
- Straightforward, not abstract — Be very literal when choosing the right representation of a symbol. It should represent the most basic idea or concept. Avoid choosing a very abstract or deep metaphorical symbol.
- Professional, not playful — Focus on the icon’s role to communicate tone and content, instead of to introduce delight and fun into the interface
Grid & Keyline
Colour
All system icon uses the base icon colour. However, depending on the implementation and usage of the icon, the colour can be changed to brand colour, or any other accent colours to match the surrounding style.
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!
