00:00 wait question when we're talking sure 00:03 what we're on Frederick Philip Von Weiss 00:13 thank you for consuming thunder nerds a 00:15 conversation with people behind the 00:17 technology love what they do and do tech 00:20 good doing tech on the show we we spoke 00:28 once a long time ago 00:29 and it was just me I I think that few 00:31 people were sick at the time but yeah 00:33 it's great to have you on actually yeah 00:37 this is great 00:41 uh-huh remember I was able to do your 00:43 your intro the rapid I thought it bring 00:52 it yeah I love the the ukulele so uh are 00:57 you still doing those intros I am so 00:59 he's talking about is my bucket please 01:01 my podcast I do every other week it's 01:04 called Tuesday I do 01:05 ukulele intros as like the intro music 01:08 because we don't have intro music so 01:10 actually we write a song over the topic 01:11 is about that week and it's been going 01:14 on for a while I guess haven't been a 01:16 play like that for I guess almost two 01:18 years yeah yeah I like how you guys were 01:24 like oh yeah we'll get it intro 01:26 eventually but we're just gonna do this 01:28 in the meantime and that's gonna keep me 01:30 on character of the show yeah and that's 01:32 started before I would just sing songs 01:35 cuz the podcast is three years old this 01:38 month Wow a week or two and so I would 01:41 just sing songs really badly but it's 01:45 funny everything about it putting out 01:48 like a little side album you know if you 01:51 saw sure I got it 01:54 what about like you the screen it's like 01:57 a little bit of like funny talented but 02:00 for sure nothing like any musical sense 02:03 I think you got the voice I think you 02:05 could do it thank you 02:07 so people know you from tools day they 02:10 know you from your new youtube channel 02:14 the markup 02:14 artists which I really enjoy recently 02:17 yeah do you mind telling our audience a 02:20 little bit about you yeah so I your cat 02:23 bustle digital group I'm the director of 02:25 product design and muscle digital group 02:27 is a digital media company and we 02:29 currently run the sites of Fussell 02:31 romper Elite daily this a report and 02:33 we're going to be relaunching Gawker 02:36 soon that's like a public thing so 02:40 that's that's been a fun challenge 02:44 because we're constantly doing a variety 02:47 of a variety of like internal products 02:50 and also be the big websites on the side 02:52 like you mentioned I have the podcast I 02:54 do a lot of side projects and working on 02:57 a new side project right now involving 02:59 Deenie CSS Houdini I'm I do this YouTube 03:04 channel which is about fashion and tech 03:05 I do a Instagram I have an Instagram 03:09 account called dev doodles where I do 03:11 illustrations of web development 03:14 concepts like just little drawings like 03:18 how to remember what the spread operator 03:19 is and stuff like that and yeah I don't 03:22 know those are my favorite I love them I 03:26 was looking at them and like I saw your 03:29 stuff via KHOU pen and left open and 03:32 then like you know linking towards you 03:33 like the Google whole right and like 03:37 seeing like okay well here's here's how 03:39 you do this sliding thing right and 03:41 you're like it's literally two pictures 03:43 and it's like how does how does a I wish 03:45 I could draw that beautifully in five 03:47 seconds it's so beautiful challenge 03:52 because like right now I'll read 03:55 something in the mom try to illustrate 03:56 just like as a mnemonic for me for me to 03:57 remember but then also to see other 03:59 people 03:59 so like the symbol data type primitive 04:03 in JavaScript like I don't really know 04:05 how to illustrate that but I need to 04:06 come up with a way to illustrate it 04:07 because this week I decided to do data 04:08 types enjoy it's hard to illustrate its 04:15 plan imagine it's also the same kind of 04:18 issue where it's hard to come up with a 04:20 song for a topic that you're gonna do on 04:22 your show it's actually really easy for 04:23 me 04:25 the songs like within 30 minutes show so 04:28 I know I'd be so panic it's just like 04:32 rhyming react with something else like 04:37 react take it back that rhymes the well 04:39 enough something like that I'm making 04:40 like that into a sentence structure and 04:42 then I don't know like you just pick 04:44 four chords you can make a song out of 04:46 it yeah yeah I still think you could put 04:50 out a little like that 04:55 yeah and it's called a Y design systems 04:59 fail yeah so that was about it was about 05:02 Isis it was about I personally have 05:07 worked and a few companies and built a 05:09 few different design systems and I've 05:11 seen them be used at various levels of 05:16 integration and completion into the 05:19 company have an engineer infuse them so 05:21 the talk is on how to ensure that people 05:23 are using your design system how to make 05:26 sure it's successful how to make sure it 05:28 has longevity and a lot of that is about 05:30 people ops but also the way that you 05:32 architect it and like how you sell the 05:34 design system how you like your rollout 05:36 plan like there's so many things are 05:37 involved in design systems that aren't 05:39 just like how do you build a component 05:41 mm-hmm sounds kind of it was about own 05:44 empty and so there were a lot of like 05:47 this this was one of the people who 05:49 talks I was able to see thus far there 05:51 was a lot of lay on its cuz I'm late 05:55 girl like but yeah it was really really 05:59 a what I really enjoyed about it is that 06:01 you kind of broke everything down so can 06:04 you kind of give us some of those ten 06:05 steps that you had of like kind of how 06:08 to make a success successful design 06:11 system happen or maybe not yeah so it 06:14 starts with your goal setting or making 06:17 a hypothesis and that's sort of the 06:19 reason why you want to build a system 06:21 because if you don't have a reason to do 06:22 it you shouldn't be doing it so that 06:25 reason could be making our performance I 06:27 decreasing accessibility bugs decreasing 06:30 code craft decreasing like 06:33 inconsistencies in the UI like there's a 06:35 lot of different things that you can 06:36 choose to start with um the next step 06:38 be to analyze your entire current UI so 06:42 there's a lot of different tools that I 06:44 shared about that like a web name way 06:46 these really accessibility tools their 06:48 CSS stats which is a great website for 06:50 analyzing your CSS performance if you 06:53 wanted to reduce the SS cleft size 06:55 there's I should another one but I don't 06:58 remember what it was but so you get the 07:03 data you get your like for and then you 07:06 can start working with that data to then 07:08 convince whoever needs to be convinced 07:10 that design system is something to 07:11 invest in and a lot of the talk was 07:14 about how this investment is so crucial 07:16 to the success of the design system 07:17 because if you don't have support from 07:19 the company then you can't be like a 07:21 loan advocate for design system and so 07:25 you use that to get buy-in stakeholders 07:28 and project management from design and 07:30 development so that everyone's like 07:32 working together like supporting a team 07:33 from there you kind of start with what 07:37 you have so looking at all the colors 07:39 that you have like what you want to 07:41 break down into your core primitives 07:43 like if you have five shades of blue 07:45 what's the key shade of blue what is the 07:47 single source of truth its then cutting 07:50 out the rest like we had like 70 grays 07:52 like literally 76 very valuable in a 07:55 project I had worked on so you did a 07:57 workshop cut all those down five picked 08:00 and chose where the other values fell 08:02 under I'm started building things out 08:04 that way you can do that with blending 08:06 types and typography if all your headers 08:08 you could do it for all the different 08:10 components that are involved and then 08:12 start building that back up from the 08:14 ground up so starting I think you're 08:16 smart components like buttons where 08:18 those live and then pulling that into 08:21 larger components that are like complex 08:23 UI elements and then from there like 08:26 iterating testing making sure that 08:29 communication is really strong 08:30 throughout the team versioning this 08:32 thing I talked about is really really 08:34 really important in design kingdoms and 08:36 then like keeping your users who are 08:38 your engineers in your company informed 08:40 with what you've been doing so the 08:42 progress you've made and then how you're 08:45 continually communicating between them 08:47 in your signage developers it's like a 08:48 process like a lifecycle I should draw a 08:50 diagram 08:53 so you just said versioning like how 08:56 does that come into play how do you once 08:58 you have a version how does that get 09:00 pushed out and made make everyone else 09:05 aware hey you know what there's been an 09:07 update that's a good question and it 09:09 really depends on how big your company 09:10 is that'll determine how often people 09:13 have to keep up to date with that 09:15 version so what I mean my versioning is 09:17 like if you have a version of your 09:18 design system that's like version like 09:19 1.2 and you update the button component 09:24 and that fun component is now 50 pixels 09:27 wide instead of 100 pixels wide I don't 09:30 know if you can ever smell so now you 09:34 could potentially of breaking changes in 09:35 UI is of people who have the previous 09:38 version yeah so that's why it's 09:41 important to version things people can 09:42 include your design system as a module 09:44 and then when they're ready you can 09:46 announce there's update they can take 09:48 their time and make their own timelines 09:49 for updating to the new version of the 09:51 design system to keep up to date 09:53 visually and that version can also 09:55 coincide with your like sketch assets if 09:57 you'd have design assets that code like 09:59 a line with that versioning system 10:01 mm-hmm 10:02 then you can have like a visual system 10:04 that is lined with like your 10:06 semantically versioned 10:07 module system for your design system but 10:14 well how do you keep track of those 10:16 versions like you know is it part of the 10:19 actual ecosystem as a whole or is it you 10:22 know like a post-it note or what how do 10:25 you kind of github is a great tool for 10:35 that because you can release things on 10:37 github and every release gets versioned 10:39 mm-hmm so what we had was a hook that 10:41 when our version got released on github 10:44 then that was also something that 10:46 triggered a build tool to build out we 10:50 had these static assets that was like 10:51 another way to use our design system an 10:53 asset dissolution so having that give 10:56 hell the first name system was kind of 10:58 the source of truth for what updates 11:00 from a that lets you comment in there 11:02 and then use that was assets that you 11:04 republish it to MPN mm-hmm at the same 11:07 time we could create static assets don't 11:09 push that system so would you say 11:11 keeping the design system and the 11:14 product itself separate is probably the 11:16 best kind of weighted to do that to make 11:19 sure that the system itself has its own 11:21 version I think that's the best idea 11:23 because your content could grow in 11:25 evolve and grow outside the system so 11:27 usually we don't have all of our product 11:30 within repo so having a separate repo 11:34 for your design system or it doesn't 11:36 have to be a repo but just if you have 11:39 just a way that you're separating your 11:42 assets like your projects then you 11:44 should separate your design system just 11:45 like you separate the other project it's 11:46 done so if your other projects are in 11:48 different repos your design should be 11:50 able to meet both your projects are in 11:51 like a mono repo which is how we build 11:54 front-end now at my current job which is 11:56 new for me and interesting and I really 11:58 like it then the design system would be 12:01 like its own folder within that there's 12:02 kind of like a mini repo within a bigger 12:04 project yeah so however you have that 12:06 organized but most places have been at 12:08 it's been a pattern of separate reakless 12:11 or separate projects that kind of like 12:13 feed into each other makes sense yeah 12:15 yeah so is it a lot of times you'll have 12:18 some kind of conflict where it might be 12:22 it not as easy for like a dev team to 12:25 get on board where you'll have a design 12:27 team that says I've created this and 12:29 that's what it is and you know I got the 12:32 C levels behind me saying you do this 12:34 and there's not actually a discussion 12:37 back and forth of but actually can we do 12:39 to solve your your your opinions how do 12:43 we alleviate that I think that's common 12:45 design systems it's frustrating for 12:47 everyone and something that we should 12:48 try to avoid at all costs I talked about 12:51 this on to talk of it which was 12:53 involving developers from the start so 12:55 they feel like they're hurt and getting 12:57 their inputs also getting them sort of 13:01 on your side by showing them this is a 13:04 product that will make their lives 13:05 easier just kind of going from this 13:08 perspective of my job is to make your 13:10 life easier how can I best do that and 13:12 then getting that insight to help to 13:15 make decisions for 13:16 the design system itself it's hard 13:19 because we we have different metrics 13:21 that were being judged on and that's 13:22 like where you run into that conflict 13:25 because if your job is like ship ten 13:27 features and someone else's job who 13:30 works in science systems like build a 13:33 unified performant codebase then it 13:39 might be that you're at odds but if you 13:42 can show that your product which is 13:44 design system in this conversation will 13:46 make your life easier will make their 13:48 product work more efficiently will make 13:51 it look better without them having 13:53 effort into it then it we've beneficial 13:56 for them and they'll kind of be on your 13:57 side that's kind of how you win yeah so 14:00 when do you not want to like have a 14:02 design system I think that if so we 14:07 talked about this I talked to if cost of 14:10 making system is great for the benefit 14:12 if you don't really if you spending time 14:17 on that size system is more costly in 14:20 terms of getting clients or getting like 14:25 features pushed out that are important 14:29 and core to the company and that design 14:31 system is also not going to improve 14:33 performance or consistency that's when 14:35 you run into this like state of it might 14:38 be fun to fill the sizes Emily I mean 14:40 look at your core metrics look at your 14:42 income from like what the company is 14:45 making a design system can I think the 14:48 issue it's accidents like you run into 14:50 this argument of there's no way to show 14:52 its value up front like you're not gonna 14:55 see that monetary value until later on 14:58 when it's a sufficient system so I think 15:01 that we heard this like overarching like 15:03 everyone should have the designs instead 15:05 of tone the ring that's not necessarily 15:09 true but I do think that in a lot of 15:10 cases it helps and there are some cases 15:13 in which it might not be the right 15:15 solution for your team at the time and 15:17 that's one you have to kind of evaluate 15:20 you need one I think most teams could 15:22 definitely use one but not always and 15:25 that's a cost 15:25 benefit analysis thing ya know make 15:27 sense I mean Brad was also talking about 15:29 maintaining and you know the design 15:32 system as a whole do you think that 15:34 could also play into effect on whether 15:37 or not you need it like what if there's 15:38 only one or two people who are dedicated 15:40 to that task and you have a team of 15 15:42 people and that's too many people like 15:45 oh yeah I gave a great talk also that's 15:48 instance it was interesting that this 15:50 conference get three wait and the 15:52 coolest part was one fried ass like who 15:54 here works in size and seems like almost 15:56 two-thirds audience raised their hands 15:58 and said well this is now how we're 15:59 designing in the future and there was a 16:01 lot of people who are their corporations 16:03 here which of course the other sensitive 16:05 because their product is pretty big yeah 16:08 but I think that with maintenance it is 16:12 a another argument for having one 16:15 because the cost of millions decreases 16:17 over time it's important to still have 16:20 people on the stem keeping it staying 16:22 current and that's kind of what they 16:23 fall out of out of hand but the cost of 16:26 maintenance will always be there just 16:27 the decrease over time whereas the 16:29 benefits stay consistent because or even 16:32 increased because you're ensuring 16:33 accessibility performance your code base 16:36 you I couldn't like continuity and 16:38 consistency you're making it easier for 16:40 devs to prototype assets things like 16:43 that yeah absolutely 16:44 that makes sense yeah agree so and what 16:50 kind of frameworks have you built design 16:53 systems and besides just three acts I 16:57 have like spun up my own frameworks for 17:00 most things and by that I mean like not 17:02 JavaScript frameworks but um UI frame 17:05 experience design system so I mean it's 17:08 just it's just making sure that you can 17:13 put out the most performant small this 17:16 codebase whatever that fits into the 17:18 system that you're building within the 17:21 example I was giving area tacos we were 17:23 working within a system that was ember 17:26 based but also we had to support in 17:28 vanilla JavaScript because it was just 17:30 like microsites 17:32 so we just built a framework that was 17:35 surrounding 17:36 sass like the CSS 17:38 processor and we use that as like a 17:40 basis for extending our components we 17:43 had like custom functions in there we 17:44 had a utility for responsive design 17:51 media queries without having to write 17:54 media queries they were part of class I 17:56 think that's kind of like making your 17:57 own designs yeah don't ever and then 18:01 yeah I've worked with react based 18:04 systems but it's like a whole different 18:06 ball game there because you can use like 18:09 success engine yes I really like CSS 18:10 modules I use that at work now 18:12 and it lets you like write your CSS 18:14 alongside your JavaScript and either the 18:17 same file or next to it and it pulls it 18:19 in that way make sure that you're not 18:20 including any extra code on your site 18:23 there's so many different ways to do 18:25 this you could like talk forever about 18:27 it but it's really just about what the 18:31 user's codebase lives in and if they 18:34 want to keep it there or they want to do 18:35 that yeah I love that you're able to 18:37 like kind of customize it to your own 18:39 needs and still like to the business 18:41 eats as well which is pretty awesome so 18:43 it's really cool that you can create 18:45 like a whole kind of ecosystem Robo dog 19:04 a little dog that walks around by using 19:08 javascript importing it through like 19:11 johnny-five and tart we never what ever 19:13 you want to use a little dog so yeah I 19:15 don't think I'm still enough in that 19:17 field to do it but theoretically it's a 19:19 possibility you can read something about 19:21 it 19:29 that's cool so um what would you tell 19:32 somebody that you know obviously we've 19:34 got some people that can't make the 19:35 conference with work or whatnot 19:37 what would you like to tell some of the 19:40 our audience some of the takeaways or 19:43 some of the things about your talk um I 19:47 think that it covered a lot of it here I 19:49 think the biggest thing is getting 19:51 port buying good communication is really 19:54 important making a strong scalable 19:57 architecture that you can grow from 19:59 making accessibility something that you 20:01 think you got from the start because it 20:03 definitely scales with your design 20:05 system as more people use it and 20:07 thinking about how you can have a 20:10 cohesive discussion around the system 20:13 with whoever you need to there's a lot 20:15 of moving parts Design Systems but most 20:17 of it is people have such as designer 20:20 development it's people and it's how you 20:23 work together with those people well 20:25 said excellent well you know thank you 20:27 so much thank you really appreciate your 20:29 coming on the show to you Anna Kravitz 20:30 everybody and stay tuned we'll have a 20:32 lot more coming up thanks guys