Design system for Kaodim products

Design systems are never done, they grow as your product grow, and it also evolves around various reasons and thought processes. I have been working in Kaodim since 2018, and I have seen how new features lead to creating a new component, which is added to the design system, retroactively updating some existing components as well.

In this post, I will write in brief and add previews to some of the components from the design system file, because there isn’t a public accessible link to Kaodim Design as of today.

Role: Senior Product Designer
Team: Product Design (3 designers)
Status: Ongoing

I joined Kaodim in 2018, and at the time there was a library file with most components used in the products. By end of 2018 we started redesigning all Kaodim products, and this meant to redesign the Kaodim Design system as well.

By 2019 we had the first version of the newly updated design system ready, and since then I have been contributing (along with my team members) to Kaodim Design System.

Kaodim Design System is a comprehensive collection of most of the components required to design. These include app icons, all Kaodim group logos, partner guidelines, typography styles, colours, iconography for products, and other interface components like buttons, avatars, forms, bottomsheet, dialogs, alerts, etc., consists of components, colours, text styles, iconography, forms etc.,

Previews of some components

Below are some of the screenshots from the design system file.

Initially shared as “Kaodim-Design.sketch” as a library shared on Google Drive, we later started using Abstract, so the library files are synced with all designers at all times. For developers, important screens are added to Zeplin for references, and a more documented version of the design system was prepared using Zeroheight. Here’s the preview for design system on Zeroheight.