P-4 Building your own Design system

Welcome guys. Welcome to this part four video. If you have not watched the earlier parts like, please go and watch the part one, part two, part three. Because we've been learning what are design systems, what are the importance how to do it Exactly. And today we are going to learn how the intricacies of the design system is there. How you can able to communicate with your team, your management and other people using the power of this. Because this is going to change the course of your career in a different way. If you are a manager, if you are an executor, if you are an intern for all three people, I am telling you, if you are not understanding design systems in a core way, you will remain only as a design laborer. You will not be able to improve as a design manager or product manager or a strategic leader.

Okay?

That's the reason we need to understand the power of systems in order to scale the work, in order to see the big magnitude of your work to be done, in order to manage a very big larger organization and a design studio.

Okay?

So pay close attention and I'm going to give you a live activity also where you can pass this video and do it and then you can come back. Okay, let's jump in. So so far, just to just recollect quickly, on the day one we saw about introduction. Day two, we saw about importance and the tactical implementation and activity of it. And third is we started building some components of how a design system could be. Okay, we saw about IBM case study. We saw about Google Material case study. We also saw about Atlassian case study. So lot of elements is there. But let me make it clear, today we are great. So now you could see you're just thinking about too much on research. That could be one mistake. Maybe you're thinking too much on what can be done. Maybe it's already taken in your earlier. Day one, day two, day three. Okay, you don't have to create any new right now. You don't have something. Pick one topic. That's totally fine. Take one existing mobile app or take one existing product or service which you think physical product, digital products. Think about it.

Okay.

So your concept is to create a new design system. That's the point.

Okay.

Hey Jagdish, how do I really do it? First do product. I assume if you have already did this research properly in your project, this existing project, take that. If you are someone who is starting new, do a quick research for just 10 to 15 minutes about that project. Who is your user, what problem you're solving and how you're going to solve it and what this is, what is the existing solution? Or it's better to take the existing solution directly. I hope it is clear. Okay, next is you can do a little planning how to create this design system, how to do it, how to create a kind of a scalable system, how to create some kind of a component layout, color, typeface, all these things.

Okay.

And do a building and maintenance. Make sure this particular application is even going through some version change, like two version, third version, fourth version, people were able to easily implement it and come back to the old versions again.

Okay.

Because of some maintenance or maybe if any change is happening in the system, any bug fix is happening, something is happening. It should not have a lot of graphics crash, you should not have a lot of problem to even run down the entire system or software. You should always have a version 1, version 2 running in the backend which can be supported during that maintenance time. So systems are created for that purpose. Okay, now what I wanted you to do is because guys, I'll tell you, there's a specialty about this video is if you're doing it live only you will be learning something from it. It's not a video where you just learn, learn, learn. Too high on knowledge, very low on implementation. Nothing is going to happen for you. That's the reason there is an activity given for you here. Okay, so what you have to exactly do is make it a note for you. Okay, so first you have to do a primary research, very quick research. Okay, it could be something like 20 minutes, as simple as that. You could use ChatGPT or you could use any online method to do it.

Okay.

Second, you could have a small plan for your system. Okay, Your plan could include only for 30 minutes. Okay, again, your plan could include something like what you call. It could be like what kind of a, what kind of ratio for picture to text could be there, what kind of a color elements we can create, what kind of graphics we can create. It can be a basic illustration, it can be a animated one, it can be a pencil drawing, it can be a no text graphics. So you could have anything. Okay, just plan it out. I'm just giving you an option. But you can plan it out in a different way.

Okay.

And then you can even plan it out something like how the layout and grid should be there. Okay, Maybe the grid should have 2 into 2 pixels. Maybe it should have 8 into 8 pixels. Like let's say we'll go for IBM, we'll take that inspiration. Okay. Earlier videos I've seen I've shown you that. So you can able to easily take this understanding and come up with some.

Kind of a plan.

And after that you could also use something like. I'll have five pages for my. For my number of pages. Okay, what kind of alerts? Alerts and communication for caution. I can give. Maybe your. Yours is a safety critical product or other maybe website or application what you're designing. How can I do it? Maybe if my user is totally not understanding how do I give speech mod? Okay, for that option I need to have light and dark mode. Okay, for that dark mode, I need to choose colors, I need to use grid, I need to use spacing, I need to use audio features. So this is exactly called planning. You're going to exactly understand how your system is going to be there. You see, you're not designing here. You're not using a software like Figma Sketch or Adobe Extreme Design. You're just planning it out your system, how it could be done. Okay, so pause this video now. Take 30 minutes and do this planning. I honestly wanted you to do it. Because if you're learning directly here and then you're going and implementing after you will not have much relevance. I'll tell you in reality, when you make mistakes, only you learn in it. It's not like you make you. You learn that and then you. It's not a school or college where you learn all the books and then you read exam, you go for test and then you go for job. That's not going to happen. That's a failure system. Of course, According to me, 18 years, 20 years we are studying and then we are getting only 20, 25,000 job. And that too after a lot of difficulty, right? If you do this, what I'm saying, you can even create your own industry. That kind of a power it has. Okay, so learn this first before you do any design project. Okay, so go pass this video and do that activity. Plan it out. I hope you would have planned it and you have come back. Okay, great. So now you could see you're just thinking about too much on research. That could be one mistake. Maybe you're thinking too much on what can be done. Maybe you are not clear on who is your target market. If this is the case, what you're having, very good. You are in the right track. Don't worry. Okay, go back to your research complete. Who is your target market? Understand what the market is requiring. Understand what kind of a product it is. Go to some competitor also and try to understand and then go to design systems Like IBM Google Material case study and then try to bing some elements and start building. Probably you could have also built some kind of buttons. You can, you could have thought some kind of graphics. What you can have. Maybe you could have thought about the layout. Maybe you could have thought about the number of pages. Maybe you would have thought about the alerts, what you wanted to create. That's totally fine. If you're doing that, you are in the very, very good track.

Okay.

It seems like you've already are having that clarity.

Okay.

Speech mode. Okay. You are also getting some kind of a plan for your project. Okay, this is one thing. After you do the planning, now you do the implementation. Okay, Jagdish, how do I know what I've implement is right or wrong? Have a competitor to benchmark it. Okay?

Have a.

Mentor or accountable partner to correct it. In this case, let me tell you guys, you can post your works in this video below. Let me give a feedback for each and every work whatever you're posting and I'll make sure to follow up with you. Don't think I'll not read. I'll read each and every comment. Even it's thousands of comments is available.

Okay?

The moment, the time when I watch video is going to be. I mean it's going to be in the very past. Maybe if you're watching in the later. But if you take action only you're going to change it. Okay? Remember very carefully and I'll be making sure you are getting proper information and the instruction from me.

Okay, good.

So this is how the implementation happens. You have to benchmark with your competitors. You need to have somebody to really account your properly check it out whether what you did is right or wrong. Then and only you can able to do the course correction.

Okay?

Okay, Jagdish, I'm still not able to execute it properly. I did it, but I'm not able to understand what is mean by design system. Let me make it very clear for you guys. If you're making outline plan, have a thinking in your mind. Hundred freelancers are doing this project with you, okay? They're going to create 100 different products for you. If you are communicating with hundred freelancers through your design. Hey, put big, big icons. Hey, put small, small icons. Hey, create this kind of a two, three pages. Hey, create some kind of a summary. Hey, use a paragraph text. If you tell like this inputs, freelancers will get confused. If you are communicating to your system or your team or your corporate or your freelancers or anybody, you need to communicate what size Is text Maybe in the activity what you did, you. You must have written, I need to have big big text. I need to have big big icons. I need to have lot of graphics. What is mean by a lot of graphics? What is mean by big big text? There is a number, right? What is the size of the text? What is the grid spacing? Mention that. Mention the RAL colors, right? Mention the RAL colors code and mention the spacing, right? It's. It's very clear at the moment. When you go very specifically to answer these questions, then people who are making at your end, they will make exactly what you require. Inside concept could be. Say inside concept could be very different because everybody has a creativity to do, but the system and the framework remains same.

Okay?

So they can have video playing in half screen, maybe audio playing in navbar. The nav bar size could be 20 into 30. See, now nobody will make a mistake. Everybody is in proper guidance and the system with you. Because you have established the system, you have created a document and everything. You need to create justification. Why it is like that? It should be exactly, exactly based on justification.

Okay?

You should have a clarity, guys. If you are not able to justify it properly, let me tell you, the person will not understand. Everything needs to have a justification.

Okay?

I wanted you to understand this first. See, you need to have a justification. I'll just try to put it here because then you will have a clear understanding why I'm asking you to create it.

Okay?

The justification should be the like it's a brand guideline. Maybe the justification could be this much. Users are already working with us. Or maybe the justification could be this much product is already working well in the market. So please try to do it. So it has to be justified with the proper notes section, explanation dimensions detailing color code. If it's a development handoff, copy the code and everything and then give it to your system. If you're able to do this, guys, let me tell you, all of your freelancers will have a same uniformity across implementing this project. Now you have learned what is mean by design system. I told you, right? You learn only after doing that mistake. It's not like a theory if you're watching this video continuously. I'm really sorry, you'll forget this. Whatever I told you in next two days, 100% sure, including me. Everybody forgets in one or two days, whatever they are learning.

Okay?

But if you would have taken an action and if you would have probably gone through this mistakes of this, how to size this, how to find out which is working for me. How to find the grid system, how to, how to find. What kind of a component should I keep. Then you will make sense. You will make sure. I mean you will also make a relativity of what I'm explaining you now. And then you'll be able to do a design system in your organization. No matter whether you're working in a freelance organization or maybe if you're working in a design studio, or maybe if you're working in a corporate. Everybody uses this. It prevents confidence. It makes easier to find and use components for the user as well as for the designers. Design thinking towards planning and execution becomes so easy. This is a great advantage. And you can use a system called Polaris Shopify Beautiful website. Guess. Okay, you can use this particular Polaris Shopify design system. So you can find lot of components which has earlier worked for this.

Okay.

And people have created lot of open source codes and materials and tutorials and all these things. That's why it is also very, very famous. I'm just sharing you the screen now. So you could, you could see here. So this is like you can find some foundation courses, you can find some design, you can build a lot of elements from, which has been already proven here. See Pro design language, color depth icons, you can find icons here and you can find lot of clear icons, consistent icons. See universal icons. So these things could be downloaded directly. See, they have mentioned some do's and don'ts also. So please try to take any elements of this and try to create your own design system around this. See, I'm not here to explain you all these things. I'm here to just show you. This is the case study. You can take it out from there.

Okay.

25 percentage increase in design productivity will happen. 15 percentage decrease in user errors will happen. In fact, let me tell you, it's even more than 15%. When you have a consistency in your design process, in your design system, you could get work done with hundreds of clearances at the same time. If your design system is exactly to the point, crisp and clear, no fluff, no beating around the bush, just to the point.

Okay?

So don't communicate this word like big, small, too large, big. Communicate with the dimensions, detail, and that's how the system is ensuring the consistency and it improves the productivity. If you are somebody who is applying for a design manager, we'll talk about productivity.

Okay?

So start building a system that's a live activity I want to give you. Take a hypothetical project, do it and definitely I'll be giving you a feedback for this thing.

Okay.

I hope this particular day is clear for you. Particular activities is clear for you. In the next video, we are going to see something very interesting which is called real time implementation of a project. Okay, See you in our next video.

Take care.