Part 2 Why proven Design system is good : IBM Case Study- How to Implement Successfully

Welcome to this day two. In this video we are going to learn how you can practically start implementing 1:1 concepts from the design system, which has been already proven in the last video. What we saw is what is mean by design system, what does it do in the real time design world. But this video is going to be even more detailed, like how you can really make a big leverage out of it. Today we are going to see a case study also with a live demo. Let's jump in. We are going to see something like a tactical implementation. How we can really go and understand this in a much deeper way. Okay, first, why are design systems important? We need to know it even more clearer. Okay, so yesterday we discussed about consistency, but there is one more efficiency. How you can efficiently work without any errors, without making a much efforts, but scaling in a very larger way. Because people like IBM, people like Apple, people like Airbnb, they have a very big products and service. What they cannot handle with only one person or one team or something, they need a systems in place or else they'll go crazy. They'll not maintain a consistency. So. And also it improves the collaboration nature because everybody will follow that particular system in order to improve that. Let me tell you what is that impact? It reduces design depth by 50 percentage and improves developer efficiency by 45%. How many of you are developers here? Type out in the chat. Yes, Jagdish, I'm a developer, I'm a dev. You put that would be great. Okay, so if you're a developer, you will definitely know why it is very important for a system to have in place. See, many times developers who come into UI UX field are also very much constrained towards this. I'll only do this icons, I'll only do this buttons. I'll only choose this typeface because this is more comfortable for me to develop it. In the platforms, you don't have that biasedness what user needs, you will have to align towards it.

Okay?

Systems and technology should blend to serve the people needs.

Okay?

Many, many times what I've seen is people are coming from the development background. They have that kind of a mindset.

Okay?

So please be little careful about why it is very important is when you have that kind of a consistency and everything people are working in the design system. First of all, they'll have a seamless experience to even work.

Okay?

Customer experience comes little later. But first the developer has to work with that experience. The developer or the designer should have a proper empathy. If they don't have a proper empathy towards their system, they Will not be even consistently creating many layouts and designs. This is more and more important. A lot of people don't talk about this, but it automatically improves the user experience. Also because they're scaling up on that systems only they are not building a new new system for new new design. Let us take a very deep case study now. Robust guidelines and components which ensures that consistency.

Okay?

That's what is a major key element. Let me tell you what are the key feature of this IBM design system. Because we are going to take design system of IBM today and then we are going to go a little deeper in it. Okay, what is this particular IBM design system is doing? First of all, it lays a very good principle for design. Foundational principle guides the design process to ensure that consistency. If you're not having principles, no matter what process you have what it will look very clumsy, very very non linear way. It should have a set of libraries same like what we saw in the last video Google design library. We also have an IBM design library in that particular thing.

Okay.

So you can use the reusable UI components that can be adhered to IBM design standards. It can be picked because it's an open source. You can pick and play with whatever you want. First test it and try it out. Second, it forms the guidelines for font usage sizes hierarchy to maintain that visual consistency. Fourth is they have a color palette define set of palettes which is ensuring how your brand could be consistent. Yesterday one of my students also did an activity and showed the consistency in how he is going to apply after watching this video. Please take one particular screen and implement this activity and apply it.

Okay.

And share me with share your link of wherever you put it. I'll read each and everything and comment to you guys. Because watching this video will not change anything. Taking action and getting reflection and correction will improve you to the next level. Okay, I believe you will do it. Wait till the last. I'm going to give you what is the exact activity which you can try it out and I'm going to show you live case study also so that you can replicate it if you're. If you're completely new. You can have a very good consistency and accessibility across platforms and layout and grid system framework for organizing the content on the screen creates a very structured balance. See, this is the most important because let's say if I'm asking you to design 20 web pages. If you don't have design system in place for each and every page, whatever you're designing for a particular client or something, you will put Lot of mental energy and a pressure will be built on you. How I can create a very seamless experience for this 20 page. But if you have a system in place, design system, maybe your system you're developing, or maybe IBM, Google, anything, you will have a much clarity on how you can build a second page, third page, fourth page, because it will all be putting in your framework. People are navigating. The 15th screen also will know, hey, this is IBM system only. This is IBM's website only. Or maybe your product or brand website only. They will have that continuity and the connection to go back and see and interface with your entire website. Or else you will lose your engagement rate and ultimately it impacts your business as well. Everything what we are discussing, it's not a learning, it's all impacting the business. If you're not able to impact the business, you will not be paid properly. Very simple, straightforward. If you're adding the advantage for the business using these principles and systems, you will be valued like anything. You will be promoted, you will be given projects, you will be limelighted like anything. Okay. I've seen people getting it. I myself have implemented a lot of this kind of a systems where my organization earlier did not have that. And then we started improving on top of that, efficiency drastically improves even for the small documentation. We created this kind of a framework because systems is very, very important, not just creating UI components, systems. Okay, I, I think you know what I mean. So this framework for organizing the content and screen to create a structure and balance design is very important, okay. And accessibility standards particularly, it ensures some kind of include inclusiveness for the people with disabilities. This is more and more important. Guys, people don't know about wcag.

Right?

So WCAG is a website. Content accessibility guidelines. Yeah. So this provides a standards to evaluate your parameters, what you did, it provides some consistent and seamless visual communication or else what happens is people get lost. So what are the benefits of it? The benefit for learning and growth for a designer who are starting their career. It. It provides a great learning and growth. You can definitely go to it. I'll open that website and then you can learn it. Okay, let me first share that screen so that you will also know how it is important. This is a carbon design system for IBM.

Okay.

What they've designed. So go and read this website. Carbon is IBM open source design system for product and digital experience with IBM design language. It consists of working code, design tools, resources. You can just go and understand what is this website, how it is structured. This itself is a design system. This itself is a design system and you can pick and play a lot of elements, whatever you want.

Okay.

You can just click start designing. Maybe if you're a developer, you can take some development tools. That's totally up to you. I'm just sticking with the design so you can learn about why they have built. Let me give you a short summary and understanding this. IBM has actually built it because they had a very huge problem in terms of scaling their system. If they're not having a system in place, they are going to lose a lot of clients. In fact, Airbnb faced this problem in 2007 or 11. They have a huge product, but the thing is they are not able to consistently create and serve for many needs and accomplishments what they have inside them. That's where they are forced to build the system. The moment when they developed and designed the system, they were able to scale much faster. They were able to have a very consistent output and their efficiency improved. Like anything, we are going to see how it is impacting the business. This is the point. People are not just doing it. Ha. I'll give a free resource. No, IBM has developed, Airbnb has developed because of that pressure which was came to them and they made it as a global universal standard as well. In fact, that's a contribution they give a lot of design community and the people are accessing from that thanks to them. I want to really credit them in this video because many of the proven principles. You don't need to have a research laboratory to find that. Take time research. They have already proven that it's an open source. Why don't you pick and play to your consistent need of your customer? What you want, you can bring it on. It's as simple as that. This is the advantage of using that. And also you can access many tools. Figma Figma files is directly available. You can get a Figma file download whatever you're finding in this website. You can directly have a pick and play off in your Figma files and everything. Okay, so let's start with something. Let's start understanding this Figma sketch or whatever. Some kind of a plugin is available. But let's go into some interesting element. I'll go with some spacing. This is interesting. Spacing is an important and often overlooked a part of product design. Carbon provides tokens and other utilities to take the guesswork out of. Spacing helps deliver clear and functional layouts. Because many people don't have a clarity in how they can space the elements using the systems using the power of Design frameworks you can scale to multiple places, designing multiple tabs, multiple web pages, multiple application screens. It's possible. Let me make it clear. There is something called margin and padding. Again, it's a very deep subject, but I'm just giving you a short nugget.

Okay.

Margin is like. Spacing is a negative area between the element and the component. It's commonly controlled in the code with margin and padding. Carbon offers several methods such as tokens and layout components to make implementation spacing in product easier. If you see developing buttons inside this particular. There is a padding available here. Left, right, bottom and down.

Okay.

So this would accessibility across different different platforms. The responsiveness changes for each and every screen and website and app. So this ensures that is happening properly. SP Interesting. Carbon spacing scale components are 2x grading. In fact, Carbon has that kind of a grid system, 2x and they keep all of their typeface, icons, text, everything included in that. Let's say if you are. If you're multiplying this two, you get four, you get multiplied by two, you get eight. So the, the grid spacing happened that way and then they are. They are going in twos. Can you see that? It's not 16, it's 12. Because 2 into certain elements. Like let's say it could be 4 into 3, 12, it could be 4 into 4, 16. So that is the kind of structuring they have. If you develop this kind of a structuring in your spacing, even if you have 100 elements in your screen, it will look visually rhythmic. Are you understanding it will look visually rhythmic. If you don't have that kind of a consistency and then you're developing 17, 18, 35, it will look very different. People will not understand how that scaling happens. People will not get a clarity. Hey, have I come to the correct website of the second page or have it guided to a different website? How many of you have felt that because it's a poorly designed product, right? So applying this particular spacing can give you this clarity. Look at this. This is what is the mistake which has happened. This is the exact spacing how they can give in order to get it clear. You can see spacing is 5, spacing is 2, spacing is 5. Maybe they would have established a guideline saying 5. Maybe the scaling component is 10, 20, 40, something like that.

Okay.

But the spacing will make sure this is consistently applied on all pages. Let's say if you're building 20 pages, you can copy paste directly to establish that initially you need to Think okay, I'm just taking one concept, but you can explore a lot more concept guys. You can explore as much as possible because this is a free open library. There are few other non token methods that can be used. Like let's say center, auto, gutter. Like these things are non token method. They have a token method which is what we have seen. Now they have a non token method also. I'm just giving an example of what is there in the website. You can very well go and understand this description link. This particular website link will be available in that bottom. You can just Google IBM Carbon design system. It will have much more clarity. Like let's say when you take color. A lot of people have doubts in colors, right? Look at this. You must have got a clarity like they're explaining all these concepts through a small video and you can find how they've differentiated between primary, secondary and tertiary elements. If you have that consistency in all pages, people will know when to trigger an action, when to note the alerts and notification, when to not interface. See how much seamless experience you are able to create with one small element like this. You have all the methods, guys. Go and use it, study it, read it. Pick one element which is more consistent and you can see how it is corrected later. So you can find the difference. How it is scalable, how it is, how it is consistency across all the platforms. IBM has taken a blue color, but you could take mint. You can pick anything, no problem. That's totally up to you. Please learn and grow. The website has so much of details. You can find lot of practices which is very well proven and it improves your consistency. This system provides a consistent approach to design with help young designers create professionals and have a cohesive product development. It improves your efficiency. I already told you very clearly, reusing these components and guidelines can save a lot of your time and effort. It is a collaborative platform where the design system fosters a great collaboration and team members and community can answer your questions. And they will have a common language and set of tools. And also it is accessibility awareness. So this emphasizes the need for inclusive design. This is very important. And also as a professional you will develop a lot of community sense and you will awareness. This enhances a designer's portfolio resume and make them more attractive to the potential employee. That is a major advantage which I understand what it is doing in the industry. This is more and more interesting. 30% reduction in design time. If I spend one hour time with the designer money, I don't have to pay him because it's Already reduced in my systems. See businesses are saving huge amount. They'll only spend 70 lakhs. 30 lakhs is a savings for them directly. By implementing systems in place, user satisfaction get improved and also Design system adoption. 70% of the leading companies have adopted this design system. It is a statistics by InVision. Whatever you're going to work already they have a design system. Companies using the design system report 50% faster time to market. Design system survey said that this is all statistics and real data. By applying design system how much leverage you can take an advantage. 80% of the designers says design system improves product consistency. UX Collective have found this accessibility impact. 1 billion people globally benefit from accessible designs. World Health Organization said that so understand the impact what it is creating. Guys, you will know why it is to implement the design system and start using this library to your advantage. You can go and read about InVision Design System surveys, you can find IBM Research on Design System UX collectible insights and you can go to World Health Organization data. If you're not implementing this activity, you will not have a big difference. Please note it very carefully. You need to take one component, one concept from that IBM website, analyze, understand the guidelines and implement it in your product icon. You can take grid, you can take spacing, build it as a system and implement it in every of your page. Implement one system, one element, one concept. Watch that video, read it carefully, import it into replicate it in all of your. If you are able to do this, you will have confidence, authority, be able to adopt design systems very easily. Seamless integration will be there in your organization and see my case study that using this aspect and design system, I've improved my own project by 50 percentage more 2x more. This creates a different respect in a recruitment community. This one activity is going to have a good impact in your portfolio. Send me what you did in your portfolio and I'll be making sure you read each and every comment. See you in the next video. Bye.