Jar Design System
A design system is an indispensable tool that serves as a comprehensive guide to maintain consistency in user interface, interaction patterns and branding elements. As a fintech being trusted by users for sensitive transactions and information ensuring a cohesive user experience is crucial and as the team scaled, we decided to establish a robust design system. As the product visual designer, I led the initiative, guiding the process from inception to implementation to maintenance.
A well-structured design system provides a library of pre-designed, reusable components (buttons, inputs, cards, etc.). This eliminates the duplication of effort for product designers and prevents inconsistencies across the product. Developers can quickly integrate these components into their work, significantly reducing development time. A polished product leads to an enhanced user experience. Consistent and predictable user experience can lead to increased user satisfaction and loyalty. Structured systems allow for adaptability to accommodate future growth. It is easier to maintain and update over time.
Atomic Design Methodology
Atoms: Basic building blocks like buttons, text fields, and icons.
Molecules: Combinations of atoms to create more complex elements.
Organisms: Groups of molecules to form larger UI components.
Templates: Layouts for specific pages or screens.
Component Library
We created a centralized library to create and store all the atomic and molecular level components, along with their usage guidelines.
Design Tokens
We tokenised the design decisions to define variables for color, typography, spacing and other component specific decisions. This made it easier to update the design system and handover to the developers.
Illustration Library
A unique illustration style was developed to align with Jar's brand identity. Ensuring the style to be scalable to create 2d animations, relevant to the product, and comprehensible by the Indian users.
Icon Library
Jar's icon library was created to represent various actions, objects, and concepts in the Indian fintech context.
Epilogue
This system serves as a foundational framework that guides the design and development of the product. It was essential to conduct regular audits and evaluations to identify areas for improvement. There were challenges in ensuring consistent adherence and alignment across teams. But with regular workshops to educate teams on the design system's principles and guidelines, we could bridge the gap.
