Case Study
Leading with vision:
Establishing the pattern framework for JioDesignSystem
Solution
A framework/ work model
Role
Design leader
Collaborators/ Stakeholders
Head of design, Head of business/ operations
Impact
30000+
average monthly pattern inserts
Used consistently across the Jio org’s Figma ecosystem from a curated set of 18 patterns.
0.04%
average pattern
break rate
Exceptionally low error incidence, reflecting robust design governance and reliability.
600+
designers
served
Actively used across the entire Jio Platforms ecosystem, ensuring alignment and efficiency across cross-functional teams.
Data as of Aug 04, 2025)
Context
JioDesignSystem (JDS) was envisioned as a transformative initiative to bring coherence and consistency to the entire Jio product ecosystem, creating a unified perception and experience under one design philosophy. The goal was clear: Consistency, Scalability, and Efficiency.
Following the successful rollout of JDS Components, we took the next natural step forward: introducing JDS – Patterns. This extension of the system aimed to deepen the design language, address recurring UX patterns, and further accelerate design and development harmony across products.
An anecdote that sparked this evolution: After implementing JDS across nearly 60 products, a senior leader, during a high-level review, posed a simple yet powerful question:
"If the design system is meant to drive consistency, why do the login experiences look so different across products? Shouldn’t that be unified too?"
That moment catalyzed the creation of the JDS Patterns team. It was more than a continuation; it was a necessary evolution to ensure that our system not only standardized components, but also reflected consistent user experiences across repeatable touchpoints. While components and blocks help us accelerate visual consistency by grouping common component layouts, patterns help us design at scale by standardising how users move through key tasks and journeys. Components and blocks make the page consistent. Patterns make the experience consistent.
Where does pattern fit into the product cycle and how does it differ from components and blocks.
Roles and responsibilities
The responsibility extended beyond leading the DS Patterns team, it was about envisioning and establishing a scalable framework for pattern creation that upheld a unified design DNA. The objective was to ensure each pattern felt cohesive, as if authored by a single team, rather than a collection of individual contributions. This required not only internal alignment but also strategic communication with leadership to gain trust, endorsement, and organisational adoption.
At the time, the challenge was amplified by the maturity of the industry, few global design systems, with the exception of pioneers like Apple, had begun formalising pattern libraries. There were limited precedents or benchmarks to refer to.
Before scaling the initiative with a five-member team, the focus was on crafting a clear, repeatable process for pattern creation, one that could be pitched to leadership for alignment and approval. To validate its effectiveness, we developed two demo patterns based on this process and tested them in live product environments.
What follows is a deep dive into the battle-tested framework, tailored to meet the scale and diversity of Jio’s ecosystem, and proven effective in driving consistency across a portfolio of products with highly varied use cases.
The proposed team setup (was designed post framework). Adding it here for better storytelling.
The definition
When we initiated this effort in 2022, the concept of design patterns was still relatively underdeveloped across the industry. Apart from Apple, very few organisations had begun to formalise what a "pattern" truly meant within the context of a design system. While the executive team had already articulated the broader intent, our first task was to ground this vision with clarity and structure.
Through extensive collaboration, discussions, and cross-functional workshops, we arrived at a shared understanding:
A pattern, in its simplest form, is a cohesive group of components, orchestrated through user-initiated interactions and state changes, to accomplish a specific, focused task.
Unlike components, which are often nouns (e.g., "Button," "Input Field"), patterns are inherently action-oriented, more verb-like in nature. For instance, while a "button" exists as a singular UI element, a pattern might be "Add ratings and reviews", representing a purposeful interaction flow designed to complete a user goal.
Each pattern typically comprises:
-
A collection of reusable components
-
Defined user interactions
-
A progressive, goal-driven flow
We broadly categorise patterns into two types:
-
Micro-patterns: Smaller, functional flows within a single screen
-
Journey-patterns: Larger, end-to-end flows spanning multiple touchpoints
This foundational definition has since shaped how we create a framework to design patterns.
Definition of pattern.
The framework
What follows is the final framework, shaped over two months of rigorous iteration and hands-on experimentation. It continues to evolve through ongoing learnings from real-world implementation, and remains in active use today.
A testament to its strength: with over 30,000 pattern inserts per month, the framework sustains an impressively low 0.04% average break rate, demonstrating both its reliability and resilience at scale.
The final framework
Up next, you’ll find a glimpse into how this framework came to life through real pattern examples, each designed with its own embedded logic while staying true to the overall system. These samples reflect the kind of structure and thoughtfulness that drive truly effective patterns at scale.
Due to confidentiality agreements, I’m unable to share all project details publicly. The case studies below are private and available upon request.
If you’d like to hear more about the thinking behind the framework, how it evolved, or explore deeper stories from the journey, feel free to reach out.
Snippets
The outcome (collage of few of the high-conversion designed patterns)
Whiteboard brainstorming (during early days)
Messy output (process driven pattern work in figma)