Improved design patterns saved 52.63% of designer's hours weekly.

Improved design patterns saved 52.63% of designer's hours weekly.

Jio is the largest operator in India and the 2nd largest single-country operator in the world, offering services such as connectivity, fiber, mobile devices, apps, and business solutions.
All our brands (Consumer Brands, Fashion Brands, Electronics Private Labels, and Multi-Brand B2B Business lines) have been expanding their reach through a multi-channel distribution model, leveraging a network of Reliance Retail stores and digital and new commerce platforms.
In this project, we revamped the user experience and created design patterns to improve designers' efficiency.

Year

2022

Year

2022

Year

2022

Services

Web and mobile Design

Services

Web and mobile Design

Services

Web and mobile Design

Client

Jio

Client

Jio

Client

Jio

/ What is the problem?

/ What is the problem?

/ What is the problem?

Designers spent significant time recreating similar patterns for different products and brands, leading to redundancy and inefficiency.

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%

Reduction in designer hours per week

/ My Role

/ My Role

/ My Role

As a Product Designer, I worked with a team of 4 to identify challenges and opportunities in post-order pattern creation. I collaborated with 3 other designers to analyze and synthesize research findings, and then used those insights to make user-centric design decisions. I also used data and user behavior insights to improve the user experience through design iterations. Additionally, I led the creation of UI designs and interactive prototypes to ensure a consistent experience across all platforms.

/ Team Structure

/ Team Structure

/ Team Structure

3 UX Designers/Researchers (including me)

/ Research method

/ Research method

/ Research method

Benchmarking, Coverage matrix, Interview, Usability testing

/ Research & Discovery

/ Research & Discovery

/ Research & Discovery

Before jumping into solution mode we conducted design sprints to facilitate collaboration across departments. Product designers, product managers, and creative teams contributed their fresh ideas to this sprint. The purpose of these sprints is to align everyone on the same goal—To improve the experience by solving our designer's problems today.

/ Key Findings

/ Key Findings

/ Key Findings

1.Repetitive Tasks

Designers spent significant time recreating similar patterns for different products and brands, leading to redundancy and inefficiency.

2.Inconsistent Outputs

The lack of standardized patterns resulted in inconsistencies across different channels and touchpoints, potentially diluting brand identity.

3.Time-Consuming Process

The existing workflow involved manual adjustments and iterations, making it time-consuming and prone to errors.

/ 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.

/ Final designs

/ Final designs

/ Final designs

Here's a detailed walkthrough of the post order pattern.

/ Order and Shipment Status Cards

/ Order and Shipment Status Cards

/ Order and Shipment Status Cards

Designers can easily pick a card that fits their unique business needs! Our card design is user-friendly, making important information stand out while ensuring everything is clear and easy to navigate.

/ Item selection

/ Item selection

/ Item selection

I have designed this cancellation flow to help users feel confident and in control of their choices. By breaking the process into clear steps for selecting items and confirming their decisions, we make it easier for users to navigate without feeling overwhelmed. Additionally, the data points can be manipulated based on business needs. We have created all the variants according to specific use cases.

/ Reason Selection and Quantity Input

/ Reason Selection and Quantity Input

/ Reason Selection and Quantity Input

I've created three easy options for cancellation and return reasons: L0, L1, and L2. Designers can quickly select these from the variant panel. Since some of our products need a bit more detail regarding cancellations and returns, this approach makes it easier for us to address any issues promptly.

/ Reason Selection and Quantity Input

/ Reason Selection and Quantity Input

/ Reason Selection and Quantity Input

Once the user picks a reason for cancellation, the user can easily choose the quantity, making the whole process a breeze! Plus, users will have the chance to double-check their selection to make sure everything looks good before you confirm.

/ 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!

/ So far, we have created 20+ patterned

/ So far, we have created 20+ patterned

/ So far, we have created 20+ patterned

We're excited to share that we've created over 20+ patterns so far

/ 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

1.Collaboration is Key

Working closely with other designers and stakeholders really made a difference in spotting and solving inefficiencies. It was a great team effort!

2.Scalability Matters

Creating designs that support scalability has really set Jio’s platforms up for future growth, all while keeping efficiency and the user experience smooth and enjoyable!

/ Next steps

/ Next steps

/ Next steps

  1. Alignment with all the stakeholders on the proposed design workflow.

  2. Finalise user stories & configs of all patterns with respective track PM’s



  3. Collaboration with Dev team for storybook and pattern release.

  4. Implementation of GA and UX analytics tools for all products.

  5. Create user panels for all products (for usability testing)

/ Conclusion

/ Conclusion

/ Conclusion

This project showed how great design can make a real difference in how things run smoothly while keeping the users in mind. By cutting down on unnecessary steps and creating consistent patterns, our team brought valuable benefits to both designers and the people who use the product.