JioBook Design System

The project started with a detailed phase of discovery and research. We went deep into organisational goals, user needs and existing design challenges. Through interviews with key stakeholders and comprehensive research on competitors’ design systems and industry best practices, we identified pain points, inconsistencies and opportunities in the current design.

We then defined clear goals and objectives for the system, and created user personas to understand the diverse needs of stakeholders. We outlined the scope of components, patterns and guidelines. The design principles emphasised clarity, accessibility, inclusivity, consistency and scalability.

Design tokens were the crucial first step towards visual consistency and accessibility. They encapsulated essential design decisions — colour choices, typography selections, spacing guidelines — in a structured and consistent manner.

The result was a unified visual language, easily adaptable across apps, user flows and use cases, so every element in the JioBook ecosystem adhered to the same set of rules.

With the visual basics and components defined, we built complex, reusable and scalable patterns: notification messages, modal windows, window definitions, task bars, native application landing pages, right-click windows and the desktop.

Designing the dark theme was a meticulous process focused on both aesthetics and experience. Contrast ratios were adjusted, the colour palette fine-tuned, and interface elements such as icons and typography optimised. Smooth transitions between light and dark were implemented, and usability testing refined the theme against real preferences.

The last step was the design system document — the cornerstone of a successful system, and a reference for everyone involved, from designers and developers to stakeholders. It outlines the rules, guidelines and components that hold visual and functional consistency across the product.