Design Systems: Part 1 Essential Insights for Big Products and Services

Without having a proper design system, industries cannot build lot of big products and services. When it comes to mobile app or website or any other thing. You know why it is very important in this video. I'm going to break it. Why having a design system is important and how you can start understanding what is mean by design system. Possibly it cannot be taught in one video. It cannot be explained in a video. But this particular video is having a series of six different parts.

Okay?

So what you can do is take your notes and understand and do the activity what has been discussed. Because without doing design system, you cannot possibly become a great designer. Probably you can become a freelancer. Probably you can become a very small designer. But if you want to work for a big organization, or if you want to create a big organization, you wanted to consult a big organization, you needed to understand what does it mean by design system. Let's jump. Okay, so design system is very powerful, particularly when it comes. See, there is something called system design. I wanted to clarify that also.

Okay.

System design is a connection of different systems and parts and everything that's very different. We are talking about a. We are talking about a material design system, okay. Which you will understand as we go along. We'll see the first thing introduction for this design system. Okay, so what is this design system? Jagdish, Let me explain you guys. A design system is something which is a collection of reusable components, okay? Reusable patterns for building certain consistent interfaces. Got it? And let me tell you why it is important. 71% of the companies use a design system report improved product quality. Let's say if you have a different button. Let's say if you have a different combination for your product itself. Let's take Microsoft example. Microsoft has a Microsoft Word, Microsoft ppt, Microsoft Excel. Have you seen all of their products and icons will be little same. Have you seen their. Let me open this tab.

Okay.

Microsoft options for ui. I'll take it. Okay. I'll put the images. I'll just try to see what are the images they have. Let's say I'm taking this image.

Okay.

As an example. As an example I'm taking. Okay, so you can see the kind of options when they have when they click the account option in it. When it comes to Microsoft Word, it is all a very singular icon. Singular lines, not having buttons. It's only a highlight is coming and there is a small icons available in the left hand side. Even when you open Microsoft PPT account option, it will be same. When you open even Microsoft Excel option The left hand side will be same, same spacing, same column, but the color will be different. Because the product is different there, they have to differentiate it very clearly.

Okay, why?

Because people inside that particular application will get confused if the consistency is not maintained. Let's take another example. Okay, Amazon, let's take Amazon Shopping app. Okay, I'll go for this. Let's take Amazon Shopping app. Okay, I'll just click it. So it's all opening here, right? When I go to this particular page, when I go to this particular, what you call switch accounts. Okay, I'm adding another account here, example. So there is a kind of page available here, right? There is a kind of email option, continue button, the radius. If I go to Amazon Music, imagine, okay, I go to Amazon Music if I have to create a new account, if I have to add or maybe login or sign up or something. Possibly. Okay, maybe I'm trying to sign out here. Okay, I just shared the screen of Microsoft. Sorry, Amazon Music. Okay, possibly this is not having a. Okay, sign in. Look at the, look at the similarity here. Can you see a difference between this screen and this screen? Can you see a difference between. In fact, I'm switching the tabs. So why Amazon needs to have the same kind of a button, same kind of a color, same kind of a. What you call. In fact, you can see the typeface is same. In fact, you can see the radius is same. It's almost everything is same. Okay, so why Micro? Why Amazon needs to have that? I will tell you why. If you're not reusing certain components and patterns inside your interface, people will get so much of confusion. You are increasing the cognitive load of the user. In fact, if you have a consistent user interface, it reduces the mental effort and enhances the user experience. People have certain learned behavior, guys, if you're changing that, people get frustrated. People will not use your application. People will leave the product or service people tend to leave the product. So that is the very, very important thing, why people are trying to engage the people for a longer time in their particular, particular application or anything. Okay, so you should be ideally getting a clarity now. Yes. So this is what is the importance of having a design system. It is what this is the importance of why having a consistency in your interface in your application is very important. Jagdish, what it can do? Let me tell you guys, consistent interfaces can reduce your cognitive load by 23 percentage. Let's say if you're doing any payment application, if you're scanning any barcode, if the barcode button Itself is very different. Will you recognize this is a barcode for scanning course?

Right.

Particularly when it comes to financial transaction and all people get really, really annoyed. If that interface is very different then you'll have to break that pattern and make the user learn a new pattern which is not correct. People will develop an error, people will develop a frustration and they will eventually leave your product or service. This is what will the effect. It will happen. Okay, so you need to get this clarity. So this neuroscientifically, it reduces your cognitive mental effort. When you are using medical applications, when you are using aerospace, when you are using kind of a. When you're designing a cockpit, it should be very carefully thought through before designing all these things. That is why every company, when you take Boeing, when you take Airbus, they create a very consistent interface inside it. Even when a brand is picking up like let's say a Lufthans Airways is going to rebuild this entire thing. They will not rebuild the entire thing. They'll try to tweak here and there, but they'll not change the basic design system. It's because of this reason, because pilots who are coming from this flight to that flight, like let's say Airbus 320 you have, then you have a Boeing 787 they are driving. It will not be very different. The systems will be little same. Maybe the brand items will be a little different. Okay, see there is a huge difference between brand guidance and design system. Which I'll record a separate video but not here. Okay. Brand guidelines is different, design system is different. Okay, I'll give you one case study to watch. Because this video is not going to give you 100% clarity. Taking action towards going to this particular website will give you clarity. Okay, so material design adoption, improved user satisfaction by 20 percentage. This is what is the Google material design statistics is about. Okay, so they are saying the user engagement, the user satisfaction goes up by even 20 percentage if you are using consistent material design systems and all. Okay, I'll give you a live activity. Go to Google Material design. Okay, go to Google Material Design and try to take few inspirations, whatever you think it is very comfortable for you. Let me open the tab for you. Okay, this is the tab of Google. I'm just going to this home website. Just play around with this website. Try to understand what they're trying to say, what they are doing, like what is mean by material design at Google. Because there are many industries like IBM, Google, Apple, they have created some kind of a material system for them. Okay, so Catch the latest update resources guides. There are a lot of videos and blogs and materials available, guys. But let me make it very clear. Google is actually having right around the corner and the material design team will be there for latest updates to on demand content. It's time to start planning your agenda. We have collected all your material content. You won't miss out anything. So they are having some kind of a materials resources guides. In fact, if you wanted to build a figma kind of a kit from this particular material, you still can do it. Look, I'm just getting started. I'm just pressing this button. Okay, so what's material? They've given some understanding why Google has come up with this. Why certain industries are following this. And there are some many proven principles, many proven attitudes, many proven. Sorry attributes, many proven components, many proven variables, many proven elements which is out there which can be used by you. It's an open source platform. You can copy and get inspired and do it. That's okay. That's the objective of this.

Okay.

The activity for you after watching this video is take out that element which you really like.

Okay.

And use it in your any one case study. That would be ideally. Ideally good. Let's say foundations inform the basis of any great user interface form from accessibility standard to essential pattern for layout and interaction. They have this thing, okay, so they have something like an accessibility. They have something like content design. So they wanted to give you. What is this about? So accessibility in material design is very important. They have given accessibility by default as a core design value for any material. How accessible it is. Accessibility requirements and goals are documented across component pages and guidelines. Because if that is not documented, people will not understand it properly. Okay, there is a reason. There is a reason when some kind of a interface is created like this, there is a reason why certain measurements are created like this. There is a reason why certain corner radius is created like this. Even in fact you can see Google has built their own design system to really create a kind of component here which can be used in all the pages. Or else what happens is they will not know whether if it is a Google website or something else. People will get confused.

Right?

Like when I take this elevation. I'll take an example of this one. Maybe I'll take another example. Okay, so I'll take this. Icons. Okay, so icons are small symbols for action and other items. That's what we know, right? So when you design an icon something like this, it conveys a different meaning when it is a thin line, it conveys a different meaning when It's a thick line. See, look at this. They have given two styles, right? I think first you would have observed, see, look at this thickness. So different icons, different brands, different conveys a different meaning. But you need to be very consistent across platform. Just like what I showed you in Amazon. Okay, when you go for the shopping website, when you go for the, when you go for the material website, anything when you go for the Amazon music, when you go for the Amazon prime, it all should look same.

Okay?

And when you want to download this Figma plugin, you can create a Figma plugin so that it will be directly imported as a Figma file. Look at this because they have a tie up and Figma is also a community open builder for them and you can reuse this and you can just open in Figma automatically. All these components will be copy pasted there. Try it out because if you're not doing this particular action, what happens is you will not understand what is mean by system design systems. You'll just hear it as a theory. Okay, look at this, look at this interaction. So you can increase the weight also you can increase the gradations, you can increase how much radius sizes you want. Because many times what happens is people when they are inconsistently keeping this in fact products inside their company will not be recognizable. People will not see. Okay, whether have I designed my own product or a different product, right? How many of you are getting this? Yes, Jagdish, many times when I open this website suddenly in between the process I came to know whether have I opened the correct website or not. It's because of not having this consistency, right? Type out of the chat. Yes, me in this video then I'll know. Yes, you're also facing the same thing because you are giving enough option to think about why and what it is. This looking very consistent. See you can open this Google Material tab and then you can start taking some components and inspiration and then you can look the weight got increased. Look the gradation got increased, the emphasize got increased. So size. So you can see what is this. You can see many of the components getting available here for the open source. Just try to take 1 inspiration or 2 inspiration and put it across your project. Create a very good new system design for your project or whatever it is.

Okay?

Don't try to do only some screens and keep doing, doing, doing. Take your one case study and try to be consistent and have this learning of design system. Whenever you are asking an interview, whenever you are even going for a big organization Samsung, everybody has this design system, you need to first ask them, inside the design system, how I can solve your problem. You cannot create a new system. Then the people inside the Samsung will not know what is the exact problem you're trying to solve. If Samsung has to build many applications, many products inside them, it has to have a consistent layout, it has to have a consistent typeface, it has to have a consistent brand language in order to create that kind of a visual system.

Okay?

Again, there is a difference between design consistency and brand guidelines and design system, which I'll teach you for now, this activity, I hope everybody is clear now. I hope everybody is getting the understanding.

Okay?

In the next video, what we will see is in the next video, what we will see is tactical implementation, how we can do it.

Okay?

So stay tuned.