Background

Illustrations are becoming increasingly important for the user experience, as they help convey a brand's identity directly through a product. At kata.ai, illustrations are typically sourced from microstock image sites and undergo minimal distortion to align with their brand.

When I joined kata.ai in 2019, my first task and challenge was determining how to create illustrations for a conversational AI company.

A brief history of illustrations in Kata.ai

Before we began exploring the illustration, we were looking and wanted to integrate the illustration style concept with the kata.ai brand.

In the Indonesian language, "kata" means "word" - the smallest unit of language. It can be easily pronounced in any language and reflects our identity as an Indonesian company.

Referring to our brand name, the illustration should represent Indonesian culture. Indonesia has many diverse cultures and artifacts. For example, we found that the famous puppet in traditional Indonesian culture is wayang beber.

Wayang Beber is a puppet art that emerged and developed in Java in pre-Islamic times and is still growing in some areas of Java. It was named Wayang Beber because it was created in the form of sheets (beteran), which then formed into figures in the Mahabharata and Ramayana wayang stories. Wayang Beber emerged and developed on the island of Java during the Majapahit kingdom. The pictures of the puppet characters were painted on a piece of cloth and paper. It was then arranged in sequence according to the scene of the story.

Our illustrations incorporate traditional styles with modern touches to make a lasting impression. This can be seen in the head and nose, which are inspired by Wayang Beber's forms and characteristics. Furthermore, the skin colors consist of several shades, representing the diversity of the Indonesian people.

Wayang beber head figure

Aksalustration head figure

Principle

Easy to understand

Use simple shapes and minimal elements for clarity.

Use Closure

Use white space and closure to add depth.

Be Cohesive

Illustrations should be in context and use a simple metaphor.

Figures

Figures are used to differentiate one character from another. They can be used alone or combined with other illustrations.

Type of illustration

Hero

The hero illustrations are used to convey more complex information. This allows them to be more metaphorical and fanciful in nature.

Section

Section illustrations are simplified visual representations of concepts, often used in products as placeholders when content is lacking. They are more literal depictions of single ideas.

Spot

Spot illustrations are a convenient and precise expression of a concept. Because they are small and simple, they are often used in the product as an empty state or in a composition with other spot illustrations.

Preview

Learning

• The illustration helps to express a brand or product language via visuals.
• Kata.ai does not yet have an illustrator dedicated. Because the load is pretty high and the timeline very tight, the designer created the illustration that combined the body from microstock and the head figure taken from its owner.
• We need to re-style the illustration to be simple, and everyone can make it easy and fast.