Client
Reliance,
Contribution
I was involved in creation of the Jio design system foundations & atomic as well as pattern level components. Role: UX/UI design, User Research.
Other Contributors
We are a team of 14 in-house designers collaborating with 4 other designers from AKQA, Germany
Tools
Figma, Maze, Miro, Google analytics, After Effects, Illustrator
Timeline
Feb 2021 - Dec 2021
Building a design system for a company with billions of users, 45+ products and partnered brands means cataloguing every component in meticulous detail. It's a massive undertaking that calls for both a big-picture view and a focus on specifics.
Our team of 18 designers believes that understanding and catering to diverse cultural contexts is paramount for creating impactful and inclusive experiences. This case study delves into the intricacies of designing for India, emphasizing the importance of unravelling and embracing its unique cultural and socioeconomic landscape.
We have an ecosystem of around 45+ products and counting. These include B2C, B2B, Marketplace as well as SaaS products.
Most of the products are available in all three environments: Android, iOS & Web.
A few notable products are:
• MyJio - Telecom & lifestyle product with 480 million+ users.
• JioCinema - the official streaming platform for the IPL, made an incredible opening for the 2024 season as over 114 million viewers logged in on Day 1.
• JioMart
• JioSaavn
• JioPOS
• JioGames
• JioOnePay
• JioTV
• JioNews
• NetMeds
• Distributor Management System
• JioGlass
• JioHealthHub
• JioCRM
• Fynd
• Heptik etc.
Key characteristics of a solid design system process
There isn't a single correct process for implementing and maintaining a design system. However, there are some common characteristics that a successful process should incorporate. Therefore, we've implemented a process that is collaborative, comprehensive, and adaptable.
9 Step Plan for Implementing a Design System
The diagram below outlines our design system implementation process that we've successfully implemented. Typically, this process aligns within the larger context of software development methodologies such as Scrum.
This visual representation encapsulates the stages and key decision points involved in implementing a design system. Each step is crucial in ensuring a cohesive and efficient integration of design principles across your organization's products.
As design system designers, we create the blueprint for consistent user experiences across a company's products. We blend style guides, design components, and documentation into a cohesive framework.
Unlike product-focused designers, we oversee the entire product landscape, collaborating with stakeholders to tailor the system to the company's needs.
Communication is key—we engage with various teams to gather insights and ensure alignment. Our role is about fostering consistency, efficiency, and scalability in digital experiences, empowering teams to deliver exceptional products seamlessly.
As a starting point, we wanted to define our DNA: Who we are as Jio? This will help us in any decision we need to make.
Our journey began with extensive research, engaging with users from different regions, backgrounds, and demographics throughout India. Through interviews, surveys, and ethnographic studies, we gained profound insights into the nuanced preferences, behaviors, and needs of Indian users.
• Cultural Fusion: In the Jio Design System, we celebrate India's rich cultural tapestry, weaving diverse elements into every pixel and interaction.
• User Harmony: Resonating with users across India means tuning into the symphony of their varied needs, aspirations, and backgrounds.
• Innovation Beyond Borders: Our design ethos transcends geographical confines, embracing India's unique blend of tradition and modernity to pioneer new paths in user-centric design.
Designing for India transcends mere replication of Western blueprints. It demands a deep appreciation and understanding of India's rich cultural and socio-economic fabric. By unravelling this intricate tapestry and embracing its diversity, we can create user experiences that are not only functional and usable but also deeply meaningful and impactful in the lives of Indian users. Here are some visual examples:
Linear
Abstract
Circular
Convenient
Functional
Emotional
Traditional
Formal
Neutral
Vibrant
Joyful
Jio is by your side in every walk of your life – we connect you with everything you need to live your life to the fullest. Connection is the heart of the JioBrand. To enable India. From getting connected to home, health, shopping, entertainment, business and so much more – Jio connects you to any need, opportunity, joy.
Our experience principles are the foundation of every interaction we have with our customers. Everything from visual design, to UX, from user flows to products should live and breathe these principles to ensure that we create one user experience, one feeling, one Jio. For whatever you create for Jio, let the experience principles be your guide.
Based on our experience principles we defined our experience and visual design direction.
It all starts with the JioDot, a fully rounded circle that is synonymous with our brand.
Circle
The mother of all shapes. The circle represents our core identity: dynamic, warm, friendly and inclusive.
1
JioDot
A fully rounded circle that is synonymous with our brand.
2
Ribbon
An (almost) infinite grid of dots that represent our people, products and services - all intelligently connected.
3
The Rainbow
An extension of the JioDot and a symbol of positivity and optimism.
Pill
The pill is a combination of two connected circles and is used for interactive elements, i.e. buttons.
Core actions
With their button-like appearance,
pills are used for interactive elements or as page navigators.
Sizing & appearance
An (almost) infinite grid of dots that represent our people, products and services - all intelligently connected.
Button
User interaction
The rounded hemispherical corners of the pill invite user interaction.
Our colour system was inspired by our beautiful country, from the explosion of gulal at Holi festival to our vibrant herbs and spices. Colour conveys meaning, directs attention, creates a mood and brings our digital experiences to life.
JioDesign comes with a built-in service theme made up of primary, secondary and sparkle colours, helping you create bespoke and multi-dimensional experiences across our products.
Our brand palette has 12 colour schemes, each fully accessible across all modes. From left to right: Crimson, Red, Orange, Marigold, Green, Mint, Sky, Reliance, Navi, Purple, Violet and Pink.
40
50
60
Our character describes ‘who’ our brand would be if they were a person. It reflects how we want to be recognised by people and it’s what makes us more than just another bland corporation.
Our character is what makes us relatable, approachable and, most importantly, human.
It’s a collection of human personality traits that describe who we are and, in turn, how
we speak.
Our brand values inform our character. They describe the principles that we live by and
the goals we pursue but they don’t fully describe who we are.
It is important to keep in mind that our brand values - Simple, Smart, Secure, Sustainable, Scalable don’t capture our voice, our personality or our emotion. That’s why we need a brand character.
Who we are
In its simplest form our brand character can be distilled into 3 character traits.
Our voice
Our voice is ‘how we speak’. It’s a combination of our character and our writing style. In each piece of communication, our writing style remains consistent and is set within our three traits of brand character. Think of them like our tone of voice foundational pillars.
We use everyday terms. No jargon. No business-speak. No technical terms that only people with a PHD understand. We want to sound as natural as possible and never come across as contrived. So, stick to everyday language and lose the corporate mumbo-jumbo.
We've also defined additional identity elements of the Jio Design System: layout, navigation, surfaces, typography, imagery, motion, logos, etc. Everything about the Jio Design System is documented in our online playbook: www.ds.jio.com
Our playbook isn't just for designers—it's a one-stop resource for developers, product managers and other stakeholders too.
The Jio Design System playbook is your recipe for a world-class experience. This playbook will be updated from time to time to include all the ingredients necessary for consistently producing a high-quality experience and ensuring the sustainable success of our businesses.
Before
After
Before
After
Please note that due to few constraints, I am unable to showcase the entire project. Let me know your thoughts!
