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