 morning everyone welcome to this curiously titled it's called the software design system or how I learned to stop worrying and remove the chaos after the after a lot of I'm going to repeat the question how many designers do we have here can you just raise your hand okay designers have you ever been in a situation where you design something you give it to the devs you saw the bullet version or product version it's very different from what you had done just say yes and devs have you ever been in a situation where you reviewed everything and you were like this does not make sense why the fire there's three different buttons with this shade of same blue does that happen then you can also say yes just give me a yes okay so this is not a unique problem I'm glad it but a good product and so when you're working with us it also often happens that people are at on the ownership of the deliverables to the client or you think everyone is putting things in that direction without a clear communication between the team the design system going to be about has been that so far fighting for the control of the overall process is it's like we are in our own game of the title of the talk is the new two of them called Dr. Strange Love Stop worrying and love the bomb for this video just this movie had a backdrop of a cold war between US and Russia and I think similar cold war exists in companies between devs and us and title made a lot of friends who kind of refer to that cold war like I was saying it's as if we are in our own game of thrones some are out of planters out of stock and our managers so to give you a brief intro my name is Sages I've been designing for many years old for about 10 years now and although a lot of things you might recognize the company both on the depth also for each mentor let me jump right in how many of you have a new design system or a variation of any or few people so I would assume a lot of you are interested in design systems but have not used it right so what are design systems when we talk about design systems can you see you google for design systems and you will see a lot from lots of products which are like ready made designs you can just buy them download them start using those systems to create your products but what are design systems for design systems what is it design systems is documentation for laying down of foundations that you think it will be a product not just come to your component the foundation of a design system is principle that you create in order to kind of build the entire product so it involves a lot of other things in this component system because it forces you to think of the product in terms of a whole then spinning by spin and component by component spin so it is very important to look at these further principles can be very important rather than the deliverables and content of your so if you think of components and different ingredients as LEGO blocks then system is the guidebook that tells you how to make a star scooper or a castle out of those LEGOs so please some of the some of the ingredients of design systems first and foremost I can mention the four principles of the product what problem you are trying to solve with the product and more importantly what is your experience take on it so it's not just okay you need to use the 12 column grid or something how actually you are approaching the problem solving in the for example so this is might not be very digital but this is something that I'm working on and for the product design these are some of the foundational rules that we are coming up with in the user journey so for example how we come up with very logical defaults for all the options for the drop down for all the configurations in the product so these type of things in part of a user's journey in building the product is two principles become part of the design system because everyone has all the other team members not only other designers or other developers can also and at the more component or more craft level or how you might have seen this this is from material design how they define some of their four principles like they're using visually they're using material as a metaphor their aim is to make their apps very bold African and they use a lot of motions to provide feedback and different stages communicate a lot of questions so content is one of the three part of design which includes language that we use in our product images through stages and to do a lot of other media here first voice and tone so even if a product is mostly media something like instagram or youtube there are still a lot of messages a lot of text and labels in textual form so products are still a lot of textual communication in your design system you can define how you what is the tone of all those messages what's the tone you need to be talking about whether your messages need to be very concise a little bit elaborate whether you want to use humor as a way to talk to the user or if it's an enterprise app you might want to use humor that is very speed forward the last point is very important especially in today's design is inclusion how your messages in your text make everyone feel included in your product so taking example use of pronoun normally we use the surgical ad only for any third person but how do you actually move from there to include other genders and non-street genders also so those are the things that are very important in defining your product content this is an example from Dave who did very early work in voice and tone of their product I would really recommend reading their text and images so how many of you started using internet very early like late 90s or early 2000s you see images like this on so like if a service company was based out of Bangalore or Hyderabad or Ahmedabad and there those people did have an image like this see they are very common it was it was because it was a lack of awareness so didn't know that you could use to put pictures of people of other colors or other genders otherwise lack of resources and those resources online to find pictures which represented people like us so you can define in your design system how you are doing what your image strategy is and some more technical stuff about your size and resolution so why are we talking about content I mean if you are designers and developers not really our job to talk and define content right if someone is really HR or marketing or people who does that why us why we need to talk about it so A of course answer is the appreciate one which is content is the thing mainly also about content but more important the thing to do is that when you work on content with others and members of people in other departments it gives a shared ownership of the product not only that it helps break down the resources that you all work with people who are like us designers for the designers they work with us but you don't even know who those people and people of marketing are you work on those together take a big founded info chamber and both divers have both diverse opinions on the product and its typography a lot of interfaces are text in typography pages you store into not only being legible and communicating the text but also to communicate the tone the mood the values of the product so typeface is what direction is typeface which comes back to how legible they are how accessible they are at different sizes what mode mode we want to do you want a playful type you want to do that a little bit of work on and scale we actually scale to the typeface to filter this way i work with a company with company called webengage and and when these artists explore the choices of typefaces they have to look at a few work calls like Ariel and Stratica they have always been there you have to look at Stratica and Roboto main native typeface we compared them and kind of just added on Roboto was a good choice but then you saw the product using Roboto at multiple ways kind of slow down the website completely they went with a font stack which looks like this some of you might have used this but all this does is uses a system font which fonts have become much better so we banded this and separate this typography to colors okay colors you go back to your brand what your brand wants to do so a lot of times color palette would already be decided by the brand how you take that and then test them for different things different combinations like you come up with color palette from that this is the primary palette that we use for not only that as designers you also have to combine different styles so that they filter the requirements for specific people who don't have a strong vision as a source of it but a lot of people do fall on the understand some of the visibility that they have some problem detecting colors then so we will be establishing the secondary color palette using nature colors because this app uses a lot of data visualization so we use a picture free nature or other photos of nature that have derived on a palette out of that and also associated associated with motion most of state in the system so this was our secondary palette and how it went on a grid and structure so you can define uh you want to do or with your app demand or your product demand you just have to do away with the grid there are ways to design without grid or go with an hybrid grid you can also define how the product responds to uh resize the responses and for your typography and order elements you can define something like something called vertical rhythm so for example if uh those of you who have used materials to use a baseline of four pixels so every component and a multiple of multiple of four you can uh that helps in creating the three to follow rhythm so this is an example from IBM's carbon design system and how the grid system responds to three sizes and another example is for a typography fit on a vertical grid component sheet i am guessing that a lot of you have used component sheets because you have like a huge component like this component drop down and put speed navigation components sheets are the most popular form of design system and a lot of times components uh component libraries are fooled as designers because here are extremities of everything but they are just part of the whole not very good it involves defining all the elements and components how they are related with each other how they are structured this is more text and adding marking borders etc in their behavior how they behave under different browser or app sheet that they are active hours and sheets like how when a user is interacting with a composite component or a component for the first time how what sort of information they should get what they should get when they are using this uh uh there's no data to difference age like example is from Shopify's uh Polaris they have a really good design so to summarize the design system is made up of the four principles of your product uh content content grid typography colors the component library if you if your app uses a product uses a lot of data visualization you can define those in the system uh icons you can define your iconography you have motion design uh you can define those as well so why we need design okay let's say your you have very audio uh relationship in all that work just close mood need you still need design system what does what will it solve what problem will it solve i would say yes because uh what we have noticed from uh a couple of examples is that there are other benefits of using the design system which is available for communication using design systems makes the communication very easy to do so uh you can establish rules at the outset kind of share it with the entire team and then communicate using the same term and same language so it becomes very easy for people to refer to difference also when you're designing uh when you're developing a developer uh you know when you refuse uh excuse or new clothes or something that there are not going to be any surprises there won't be a appreciate of the same button and because it will be hopefully be picked by from the same repository that you have already established similarly for testers you don't have to repeatedly test the screen zoom because it's tested and certified once now you're just combining it into a different configuration so uh it eliminates all the surprises and these type of constraints when you already have an established system in the repository it makes lives easy for everyone this is an example from a product called intercomponent and this is the complete very well but in the life left is the definition of uh component or conversation how they're using the same in a specified or interdesigned uh uh deliverable then we have a four component called organization not only that the same uh uh pages or the same terminology is used on the health docs as well for the end users so starting from product definition to your end users they're using you're talking in the same language means you have very happy designers devs and testers constantly no happy users when you have this type of synergy in your team it goes very well to your transfers to your users as well scalability uh having a already established design system makes it very easy to scale your product at web engage especially they saw that they didn't have to create new components or anything for almost a year and which went they could buy a frame something start working on the design of visual putting them together of your design and production immediately from there it uh it created a very lower turnaround time from coming up with a low fidelity concept to production and it means money when you can scale things fast moving fast between uh concepts to production it it saves a lot of money for the it makes sharing the knowledge very easy not only between designers but in the entire team and your outputs are consistent because two designers and now now not coming up with their own version of uh the same design right if you have ever worked with earlier if you have ever worked uh in team with multiple designers one designer will give you something but the other one will have something slightly different you don't know which one to trust which source to trust that kind of inconsistency is taken care of uh cross functional team can see the rationale behind the design decision from your document because uh design is often seen as something where you only see the mock-ups you don't know why and how those mock-ups mock-ups were made so when you rationalize your design process in terms of principles and uh a system then it makes design less of a black box everyone can see what is happening how certain decisions were made it makes it very easy for the new team members to start becoming productive you already have something the new designers uh on team members can look look at the existing patterns start working on it immediately they have a very quicker ramp up they don't have to learn everything from sketch uh scratch on their own so you have happy news in the office uh response to external changes uh information architects is a firm based out of japan and several other places and they are very huge in uh uh product design and dev they did a research for one of their apps and they came up with this number 142900 devices in the market which means a huge spectrum of uh screen sizes right and that's not it because now you have different device types as well you have everything from watches to uh VR glasses to TV sets where you can use uh different products it is very hard to design and test across this entire spectrum of uh uh screen sizes what it can do in the design system is you can define how your uh uh content uh response and your product response to this type of screen size changes and then test at certain breaker breakdown points so this example is from material design how something that shows up in one way on uh uh larger screens kind of change ship uh ships uh uh its shape into smaller space so you have you can solve for the uh for the whole range of uh devices concurrent design is now you have one source of truth you have one repository multiple team members can start working together not only that you can have multiple teams working on the multiple modules different modules uh with a certainty that their output will be consistent and in accordance with what's already been established so uh you have uh five new features or modules to design you can still uh happily feel that okay it will it will add up to the coherent uh design of the product so people working together is one of the huge benefits a cure for imposter wellness how many of you here know what imposter syndrome is so imposter syndrome is when you feel like you are just a hack you are just putting together things without any skills or anything and you you you are not competent at all when you start rationalizing your design decisions in form of a document and principles you start feeling better about yourself as a designer as a developer whatever your role is you start to feel that you are actually competent because now you can see the rationalization behind all of your decisions some of the stuff you have internalized you just immediately make decisions but when you actually write those down you see that there was some logic behind it it makes you feel happy about yourself which is I think very important quality for any work you have so here are some of the uh I'm just summarizing all the benefits again the improved communication availability makes it easy to share knowledge between people uh you can define your responsiveness of the product the multiple teams can design together and it cures imposter syndrome uh design system and its implementation is not without its challenges it's again like in earlier talk we saw it's not a silver bullet it won't solve problems that are because of the product's culture or team culture or team dynamics that's for sure but what are some other challenges first one is you need time and resources to create a design system and then to maintain it because every time you come up with a new pattern of solving something and a new way of solving something you have to go back and document it in your existing system and also creating a system upfront takes up its own time so there is some additional overhead work that require that's required to create and maintain them top level bind it's very hard if you haven't if you don't start with a design system it's very hard to convince your top level to uh agree to kind of move into this direction because for them it means additional time and resources which no one really wants to put in because again this design systems promise you future uh uh benefit right and long term gain but you can easily trade it for uh some immediate like you can just uh easily design and develop a couple of new features then why go for a design system until very recently there the tools were not sophisticated enough to create a design uh system right this is getting slightly better now because there are tools like uh sketch sketch has libraries uh figma is already has a big built-in library and uh there are other tools also like ux pin there's also version controlling available for designers now called abstract so uh this is becoming better although the products are not there yet uh it's still better than what it will save a year ago here's an example of one of the design systems I have made for a company called web engagement is just to show you the kind of depending on different context how you can what you can actually make part of your system and deliverable because this was going to be used by other designers I kind of this is a little more verbose in how different components are stacked how they are actually made what are their actual specifications and different states and different variations of them I hope this will be better if you see the on a on a laptop but and then I just have one variation of application of design system to show for a company called wallet buddy they are based out of the parent company is based out of Bangalore we made a vanilla design system which then they can adapt to create multiple very different products so here's the vanilla design uh the vanilla uh here's a screen using vanilla design system which is very plain and very straightforward now changing some of the variables of the same uh system like typography a little bit of grid uh and uh moving to brand colors for a particular client we could come up with this which is not entirely different but there is a discernible difference to sell it to a different client who's aware that this is what we are getting so it's not as if we are cheating them selling the same product to five people but we can make discernible differences uh into multiple products and this is something a company called Vox who runs those things like many many I can't even count but they are the company behind verge or polygon uh vox.com right they have a similar design system where you just change certain variables to contextualize it for a particular website of publication but everything is at the core born out of the same system so this is a very primary uh application of similar concept so if you put them side by side on the right is the vanilla version on the left is uh improved version which for some reason is the reverse order of how I should have shown it anyway so here are a few examples in the wide of design system uh I'm not going to read all of them because you'll see the presentation you'll get a link to the presentation at the end but Salesforce Mailchimp uh atlation google who started the whole documentation thing uh design systems have become so popular now that they have their own libraries uh sorry sorry they have their own galleries so when when anything in design has a gallery you know that the thing has arrived uh so uh I want to leave you all with a question of if you are not using design systems in what format in what scope you can start using it when you go back and then uh you will have your own stories to tell about how they helped you whether they helped you or not whether it was an overhead which didn't really lead to any place you can maybe start very small and then take it from there but I would really be interested in seeing how you actually start implementing this that's my talk I have time for questions now thank you okay so do we have any questions here we have a question it was a nice session thank you I recently had a chance to work on a product where there was not a any design system in place and the US designer has a hard time to convince you know stakeholders and to come up with each screen so who owns the ownership of creating this design system in place before starting the development it exactly now it resets on solely on your designer or any other stakeholders involved in that including product manager yeah uh so uh it depends from one product to another uh I would say the bare minimum people who should be involved in design in the discussion of design system a your designers be your devs the product manager or rather manager because they need to know what's happening and how their resources are working on just to be in that no I would ideally want other people like other departments to also be involved it depends on your product but if you have a product that goes out to like really huge audience and at a level where legal and marketing and HR and even you might have a content team all of those are involved in your product they all should become part of the design system at one level or another at one deliverable or another probably they won't a content person won't be as necessary to be part of the component design right but they are definitely part of how the content what the content should be your content strategy and the I personally feel the goal of the design system is to make it transparent for everyone in the company not only designers and devs they are the immediate beneficiaries but in the end the way you implemented it goes everywhere like we saw in the case of intercom right their help documents use the same phrases same connoisseurs same all the same terms and phrases right so they are also at some point involved or touched by the design system so it's very easy to contextualize this which is the beauty of this I mean you don't have to follow one specific rule of how to create and who the audience should be and who should be the stakeholders designers and devs should definitely be involved but you can involve other partners in the beginning you had like four or five typefaces right and then you said that you picked robot so can you just talk about what sort of parameters or how do you go about evaluating different typefaces and why you picked robot sure sure sure yeah so we ended up not ended up not really picking robot up and but so for this particular product it's a b2b product and used by enterprise so it's not really a consumer product where and we didn't have a lot of mood to add to the product the product we didn't want to make the product with a personality right for example and I'll give you an example you use something like a mail gym it has its own mascot and it's targeted at really individual so someone running a small shop they would use mail gym to send out emailers and newsletter web engage was not targeted for that they are their target audience is larger companies so they wanted to take as neutral or tone as possible which meant our typefaces from the outset needed to be very simple now with no additional personality or flair of its own right we started so we start okay what are if we didn't want to use a paid typeface because the product goes out to like a huge audience right what are our options that's where we started okay Ariel and Helvetica because they have always been there what is the next freely available but really popular and really workhorse type of typeface which was Roboto and San Francisco because we had started to see that it is possible to use native fonts now in Mac every Mac comes with a San Francisco pre-installed it is easy to refer to it from CSS that was our starting point to narrow down to four from that Ariel and Helvetica we didn't want to use because we wanted slightly modern field to the app Roboto we ended up not using because including it kind of slowed down the app I'll just show you the that's screen again and so you can see like when we saw at some of the weight variations we needed right the load time became very slow which meant that for a product which is already built with a lot of JavaScript adding this one more which even in the beginning tells you that it's going to slow things down we didn't want to go with it and then the benefits to between I mean the variation between Roboto and San Francisco the Apple font was not very much so the what we ended up using this what this does is if you are an on an Apple laptop it will use San Francisco if not it will move to the next one so any Google phone or Chrome Chromebook or anything will get Roboto if you are on Windows machine you'll get the windows native font which this additionally did was it gives a very native field to the web application also you feel like you're using something that built into so that was our goal that was the process how we decided on like picked the few first runners and then narrowed down to our final choices that is not it so I was I don't know if I mentioned but design system is always a living document right you go back and you make changes after testing for some time now web engagement has realized that the visually there are some inconsistencies they want to fix right so we might have to pick a typeface and we are looking at something called inter which is a variation of Roboto but it has a few additional features that which we can just enable in the CSS so we are now looking at that so it's always a iterative process the decisions here are also not final