How a modular design pattern library saved Jio's designers 52% of their time weekly

How a modular design pattern library saved Jio's designers 52% of their time weekly

Jio is India's largest telecom operator and the world's second-largest single-country operator, with a product ecosystem spanning connectivity, mobile devices, apps, and retail. With multiple consumer brands, fashion labels, electronics private labels, and a B2B business line all running on different platforms design consistency was a serious challenge at scale.

Year

2022

Year

2022

Year

2022

Services

Design Systems · B2B

Services

Design Systems · B2B

Services

Design Systems · B2B

Client

Jio — India's largest telecom operator

Client

Jio — India's largest telecom operator

Client

Jio — India's largest telecom operator

/ What is the problem?

/ What is the problem?

/ What is the problem?

As Jio's product portfolio grew, designers across teams were independently recreating the same UI patterns for different brands and platforms. There were no shared standards, no reusable components, and no documentation. The result: wasted hours, inconsistent user experiences, and a fragile design process that couldn't scale.

I was brought in to lead the design of a post-order pattern system — one of the most complex and frequently replicated flows across Jio's platforms.

Note: We developed several patterns during our project, but I want to highlight the post-order pattern, as I was closely involved in its creation and implementation.

/ Final outcome

/ Final outcome

/ Final outcome

Created a modular pattern library, organized by brand, application, and style, with usage guidelines to ensure consistent and flexible brand application.

/ Impact

/ Impact

/ Impact

52.63%

52.63%

Designer hours saved

20+

20+

Patterns created

Mobile + Desktop

Mobile + Desktop

Platforms covered

/ My Role

/ My Role

/ My Role

Senior Product Designer on a team of 4. I led the research synthesis, pattern design, and usability testing for the post-order flow. I collaborated closely with product managers, business stakeholders, and developers to ensure the patterns were both technically feasible and brand-flexible.

/ Team Structure

/ Team Structure

/ Team Structure

4 UX Designers/Researchers (including me)

/ Research method

/ Research method

/ Research method

Benchmarking, Coverage matrix, Interview, Usability testing

/ Research & Discovery

/ Research & Discovery

/ Research & Discovery

We began with a series of cross-functional design sprints involving product designers, product managers, and creative teams — aligning everyone around a shared goal: reduce designer inefficiency without compromising the user experience.

Our research methods included benchmarking against industry-leading design systems, a coverage matrix to map existing patterns across all products, and in-depth interviews with the designers who were living with the problem daily.

/ Key Findings

/ Key Findings

/ Key Findings

1.Repetitive Tasks

Designers were rebuilding the same flows from scratch across different brands, creating weeks of redundant work per quarter.

2.Inconsistent Outputs

The absence of shared standards was producing visually inconsistent experiences across Jio's touchpoints.

3.Time-Consuming Process

Manual iteration cycles were slow, error-prone, and blocking faster product delivery

/ Design Process

/ Design Process

/ Design Process

We sketched multiple user flows before committing to any direction — diverging first, then converging on the strongest patterns. Early wireframes and mid-fidelity designs went through 5+ rounds of iteration, each shaped by stakeholder feedback, business constraints, and usability insights.

We validated our designs by testing prototypes with 17+ designers in a controlled environment — treating them as the primary users of the system.

/ Benchmarking & Coverage matrix

/ Benchmarking & Coverage matrix

/ Benchmarking & Coverage matrix

We did benchmarking and coverage matrix, which helps to identify strengths, weaknesses, and trends in similar products and ensure that all necessary aspects of the user experience are addressed.

/ Sketches

/ Sketches

/ Sketches

I sketched multiple user flows to visualize ideas quickly. My focus at this stage is to diverge first, and converge later. Here are some early sketches of the return flow.

/ Early designs

/ Early designs

/ Early designs

A sneak peek into my early wireframes, mid-fidelity designs, and drafts. The designs have gone through at least 5+ iterations. It is due to several reasons: Change in business direction or simply to improve the user experience

/ We went through 10+ iterations.

/ We went through 10+ iterations.

/ We went through 10+ iterations.

The initial designs underwent several user tests and discussions with product designers, managers, and business teams to ensure a friendly and scalable user experience.

I wish I could show you every single part of the process!

/ Usability Testing

/ Usability Testing

/ Usability Testing

To validate our designs or test prototypes, We've tested the prototype with 17+ Designers in a controlled testing environment.

/ The Solution

/ The Solution

/ The Solution

We built a modular pattern library, organized by brand, application type, and visual style — with clear usage guidelines to ensure flexible yet consistent application across all of Jio's products.

For the post-order flow specifically, the library included:

/ Order & Shipment Status Cards

/ Order & Shipment Status Cards

/ Order & Shipment Status Cards

Flexible card components designers can configure for any business need, with key information hierarchy built in

/ Item Selection Patterns

/ Item Selection Patterns

/ Item Selection Patterns

A step-by-step cancellation and return flow designed to keep users in control and reduce anxiety

/ Reason Selection (L0 / L1 / L2)

/ Reason Selection (L0 / L1 / L2)

/ Reason Selection (L0 / L1 / L2)

Tiered reason input variants covering the full range of cancellation and return scenarios across different product lines

/ Quantity Input & Summary Screens

/ Quantity Input & Summary Screens

/ Quantity Input & Summary Screens

Clear confirmation states that reduce errors and build trust before final submission

/ Cancellation Process Summary

/ Cancellation Process Summary

/ Cancellation Process Summary

Clear refund and cancellation policies build trust, while easy navigation and clickable buttons create a seamless user experience.I wish I could show you every single part of the process!

/ 20+ patterns total

/ 20+ patterns total

/ 20+ patterns total

Covering both mobile and desktop experiences

/ We went the extra mile!

/ We went the extra mile!

/ We went the extra mile!

We designed these patterns with everyone in mind! Not only do they look great on mobile devices, but we've also made sure to enhance the desktop experience too.

/ Key takeaways

/ Key takeaways

/ Key takeaways

The biggest lesson from this project was that designing for designers requires the same rigour as designing for end users. We had to understand their workflows, their pain points, and their mental models — and then build something flexible enough to serve a complex multi-brand ecosystem without feeling restrictive.

/ Next steps

/ Next steps

/ Next steps

  1. Stakeholder alignment on design workflow governance.

  2. Finalise user stories and configurations with respective track PMs.

  3. Collaborate with engineering for Storybook integration and pattern release

  4. Implement GA and UX analytics across all products.

  5. Establish user panels per product line for ongoing usability testing.

/ Conclusion

/ Conclusion

/ Conclusion

This project proved that systemic design thinking — applied internally — can deliver just as much business value as consumer-facing product work. By eliminating redundancy and establishing shared standards, we gave Jio's design teams back the time and headspace to do their best work.

Create a free website with Framer, the website builder loved by startups, designers and agencies.