1
00:00:45,029 --> 00:00:48,089
Eddie: Welcome to another
episode of Web Joy.

2
00:00:48,449 --> 00:00:51,659
I'm excited to have Jenny with us today.

3
00:00:51,659 --> 00:00:53,459
Jenny, say hi to the

4
00:00:53,549 --> 00:00:54,059
Jennie: listeners.

5
00:00:54,374 --> 00:00:55,214
Hey, Eddie.

6
00:00:55,219 --> 00:00:57,794
Nice to be here and excited
and thanks for having me.

7
00:00:58,064 --> 00:00:58,784
Eddie: Well, it's my pleasure.

8
00:00:58,784 --> 00:01:01,064
Thanks for, for coming and joining us.

9
00:01:01,574 --> 00:01:04,424
If you don't mind, just give
us a general overview, right?

10
00:01:04,429 --> 00:01:09,044
Who you are, what you do, where you work,
those just kind of high level details.

11
00:01:09,344 --> 00:01:11,834
Jennie: Yeah, so hi,
nice to meet everyone.

12
00:01:11,834 --> 00:01:12,464
I'm Jenny.

13
00:01:12,794 --> 00:01:16,454
I'm one of the lead designers at
Atlassian, and I've been leading Atlassian

14
00:01:16,454 --> 00:01:17,954
design system for the past three.

15
00:01:18,569 --> 00:01:21,989
and I started as a web designer
so many, many years ago, just like

16
00:01:21,989 --> 00:01:25,849
designing, developing, and it's kind
of nice that like the industry's

17
00:01:25,854 --> 00:01:26,969
evolved into systems and stuff.

18
00:01:26,974 --> 00:01:30,569
So I feel like all these hybrids have
kind of found a home in design systems.

19
00:01:30,944 --> 00:01:31,964
Eddie: That's awesome.

20
00:01:32,534 --> 00:01:33,494
Well, very cool.

21
00:01:33,494 --> 00:01:35,234
So that's interesting, right?

22
00:01:35,234 --> 00:01:38,714
You started out as a web designer,
you know, now kind of looking at

23
00:01:38,719 --> 00:01:40,424
design systems and stuff like that.

24
00:01:40,724 --> 00:01:43,574
So kind of how did you
get involved in tech?

25
00:01:43,574 --> 00:01:43,784
Right?

26
00:01:43,784 --> 00:01:46,664
What was that first thing that
said, Hey, this web stuff,

27
00:01:46,754 --> 00:01:47,984
I'd like to work with that.

28
00:01:48,344 --> 00:01:50,624
And then kind of what did
that journey look like?

29
00:01:50,624 --> 00:01:50,834
Right?

30
00:01:50,834 --> 00:01:55,244
How did you get from web designer
to leading design systems at ala?

31
00:01:55,814 --> 00:01:59,714
Jennie: When I was in college, actually,
they didn't really have any kind of

32
00:01:59,714 --> 00:02:04,634
web design courses and I had already
started delving into H M C S S and making

33
00:02:04,844 --> 00:02:10,574
basically like Sailor Moon fan sites
on, you know, like on Zoom and like AOL

34
00:02:10,574 --> 00:02:12,344
and all, and then Geo Cities and stuff.

35
00:02:12,344 --> 00:02:17,294
And so I really wanted to learn a lot
about like, not, not only like web design,

36
00:02:17,294 --> 00:02:19,154
but like just creating and crafting.

37
00:02:19,599 --> 00:02:20,559
And bring it to life.

38
00:02:20,949 --> 00:02:23,829
So that's why it was like super
interesting cause I like to customize

39
00:02:23,829 --> 00:02:26,259
and, and like code and bring it to life.

40
00:02:26,259 --> 00:02:29,649
So only thing I could major in
in college was computer science.

41
00:02:29,649 --> 00:02:30,759
That's the closest thing.

42
00:02:31,239 --> 00:02:34,689
And then like I remember
during one summer, I just.

43
00:02:34,719 --> 00:02:40,149
Took the design, like the design one class
and I just was just like super amazed

44
00:02:40,149 --> 00:02:43,869
and like I think I learned Illustrator
in that class and then it led into

45
00:02:43,869 --> 00:02:45,249
the flash class and all that stuff.

46
00:02:45,249 --> 00:02:47,589
So I kind of like started
doing it on the side.

47
00:02:48,009 --> 00:02:51,969
And so it seems like my hobby kind
of became my career, which is really

48
00:02:51,969 --> 00:02:55,059
cool cuz I start taking on internships
and stuff just to do web design.

49
00:02:55,659 --> 00:02:58,839
And funnily enough, when I graduated,
like I didn't know what to do cuz

50
00:02:58,839 --> 00:03:00,639
I was like, oh, I have computer
science degree, what should I do?

51
00:03:00,639 --> 00:03:04,059
So I actually applied for a
QA job, uh, which is funny.

52
00:03:04,344 --> 00:03:07,194
At Lockheed Martin, I was actually
there for almost seven years.

53
00:03:07,199 --> 00:03:07,544
Oh, wow.

54
00:03:07,554 --> 00:03:11,784
Uh, and instead of a QA job,
they saw my internship, um, and,

55
00:03:11,814 --> 00:03:13,764
uh, kind of like resume history.

56
00:03:13,764 --> 00:03:15,834
And they've realized I was
more of a web designer.

57
00:03:15,924 --> 00:03:18,924
So I actually, uh, created internet
sites and a bunch of other web

58
00:03:18,924 --> 00:03:22,314
design sites, uh, internally for
Lockheed for many, many years.

59
00:03:22,494 --> 00:03:26,844
And then from there, kind of went on to
some startups and then Shutterfly and

60
00:03:26,844 --> 00:03:30,384
kept jumping between like design and
development, joined a front end team.

61
00:03:30,804 --> 00:03:36,004
And then when I was at Udacity, I was
a their first front end design engineer

62
00:03:36,964 --> 00:03:40,954
and it was really cool because I think
I had left Shutterfly cuz I was a front

63
00:03:40,954 --> 00:03:44,704
end developer there and I was just like,
oh, I missed design so much cuz I was

64
00:03:44,704 --> 00:03:48,484
just strictly coding emails and just
coding, landing pages and stuff there.

65
00:03:48,784 --> 00:03:51,064
And I was like, I really
need to be in a role that.

66
00:03:51,379 --> 00:03:53,749
lets me, you know, explore both at times.

67
00:03:53,749 --> 00:03:57,649
And so that startup Udacity was
really awesome cuz they were basically

68
00:03:57,649 --> 00:04:03,049
like, we embraced generalists and
they very much like entertained the

69
00:04:03,049 --> 00:04:04,699
idea of having hybrids on the team.

70
00:04:04,704 --> 00:04:09,019
So, uh, that we were one of the
two UX engineers there and it was

71
00:04:09,019 --> 00:04:12,559
around there that we kind of fell
into like rebranding Udacity.

72
00:04:12,559 --> 00:04:14,029
We built a front end framework for.

73
00:04:14,534 --> 00:04:17,654
And around that time is when, you know,
the buzzword design system started

74
00:04:17,804 --> 00:04:21,464
buzzing and we're like, oh, actually
we're like building a design system.

75
00:04:21,794 --> 00:04:23,444
That's where it kind of led, led from.

76
00:04:23,744 --> 00:04:28,274
Eddie: So I love that you're doing
Sailor Moon , you know, like fan sites.

77
00:04:28,274 --> 00:04:32,804
I actually back in the day, did
like Final Fantasy fan site.

78
00:04:33,049 --> 00:04:37,639
Definitely is not well designed in
any yes phrase of the word . But

79
00:04:37,669 --> 00:04:40,609
uh, it had some fun final fantasy
music playing in the background.

80
00:04:40,639 --> 00:04:41,869
Like  C midi files,

81
00:04:41,869 --> 00:04:42,199
Jennie: right?

82
00:04:42,259 --> 00:04:42,829
MIDI files.

83
00:04:42,829 --> 00:04:43,249
Exactly.

84
00:04:43,649 --> 00:04:46,819
animated Kiss  banners flashing

85
00:04:48,559 --> 00:04:49,579
. 
Eddie: That's awesome.

86
00:04:49,639 --> 00:04:51,589
And yeah, I think mine
was so stunt Geo Cities.

87
00:04:51,649 --> 00:04:53,749
So definitely fun when is like, yeah.

88
00:04:53,749 --> 00:04:56,299
You know, you got into it just
by doing a fan site for something

89
00:04:56,299 --> 00:04:59,749
Jennie: that you love and always just
like right click and just like exploring.

90
00:05:00,224 --> 00:05:01,184
Inspecting the code.

91
00:05:01,274 --> 00:05:02,684
Eddie: Yeah, yeah, absolutely.

92
00:05:02,684 --> 00:05:06,644
That was like, you would find someone's
website that did something really cool and

93
00:05:06,644 --> 00:05:08,384
then you're like, oh sweet, I want that.

94
00:05:08,384 --> 00:05:11,324
So you right click it, you look
at it, you copy it and yeah.

95
00:05:11,324 --> 00:05:12,134
Piece it over into

96
00:05:12,134 --> 00:05:12,644
Jennie: yours.

97
00:05:12,734 --> 00:05:13,514
Yeah, for sure.

98
00:05:13,514 --> 00:05:14,504
Extending everything.

99
00:05:14,714 --> 00:05:15,724
I think it's funny cuz I think.

100
00:05:15,989 --> 00:05:19,769
People who like us, that have been
around, we have like coded layouts

101
00:05:19,769 --> 00:05:23,789
all the way from like, I like frames
to like tables, to like, you know,

102
00:05:23,789 --> 00:05:25,289
Daves to all the way to grids.

103
00:05:25,289 --> 00:05:25,409
It's

104
00:05:25,409 --> 00:05:26,009
Eddie: kind of funny.

105
00:05:26,309 --> 00:05:31,139
Yeah, it's definitely evolved
right from like really painful.

106
00:05:31,264 --> 00:05:36,604
To like less painful to now actually,
like with flex box and Flex Grid

107
00:05:36,604 --> 00:05:38,314
and stuff, it's like, oh my gosh.

108
00:05:38,314 --> 00:05:39,394
Like . Yeah.

109
00:05:39,399 --> 00:05:39,864
Yeah.

110
00:05:39,869 --> 00:05:42,514
What could we have done 20
years ago if we had this

111
00:05:43,744 --> 00:05:47,614
? 
Jennie: I still remember when we had
to make rounded corners on tables, you

112
00:05:47,614 --> 00:05:51,724
had to like export like the rounded
corner in that tiny, you know, that

113
00:05:51,724 --> 00:05:55,144
tiny corner and put that as the image
and then have that repor repeated row

114
00:05:55,144 --> 00:05:57,424
background, and then have spacers.

115
00:05:57,454 --> 00:05:57,664
Oh my.

116
00:05:58,249 --> 00:05:58,519
Yeah.

117
00:05:58,639 --> 00:05:59,839
Eddie: Memories . Yeah.

118
00:06:00,049 --> 00:06:01,369
Oh my gosh, that's so funny.

119
00:06:01,519 --> 00:06:08,659
I actually just recently had a podcast
with Miriam Isaac, who was a designer,

120
00:06:08,659 --> 00:06:11,899
and we were talking about design
back in the day, and she was talking

121
00:06:11,899 --> 00:06:16,669
about, yeah, that you basically had
to make these rounded corners, right?

122
00:06:16,669 --> 00:06:19,609
And then you had these, like you
had to do the background color.

123
00:06:19,729 --> 00:06:19,939
Yeah.

124
00:06:19,999 --> 00:06:23,279
Like you couldn't have transparency,
so you had these weird like triangles

125
00:06:23,279 --> 00:06:25,129
in the corner to like make your round.

126
00:06:26,009 --> 00:06:29,519
Corner and yeah, like the spacers, like
you said, you'd have like what a two

127
00:06:29,519 --> 00:06:34,259
pixel width image that you then are
like, okay, repeat this horizontally,

128
00:06:34,439 --> 00:06:38,849
, or, you know, repeat this vertically
to like create these fancy borders.

129
00:06:39,269 --> 00:06:39,629
Jennie: Yeah.

130
00:06:39,689 --> 00:06:43,709
I think it's like really funny how we
had to have those kind of workarounds,

131
00:06:43,714 --> 00:06:47,999
but I, I think it actually contributed
to making me super, like, detail-oriented

132
00:06:47,999 --> 00:06:49,439
and like looking at the pixel.

133
00:06:49,974 --> 00:06:52,914
You know, because I kind of like,
it's part of my, my job now where

134
00:06:52,914 --> 00:06:56,184
we're like really inspecting and
looking at everything super deeply.

135
00:06:56,484 --> 00:06:57,294
Eddie: No, definitely.

136
00:06:57,294 --> 00:06:57,534
Right.

137
00:06:57,534 --> 00:07:01,164
To break it down to like,
what's the smallest piece here?

138
00:07:01,314 --> 00:07:05,844
If you have this thing, what kind of
repetition exists that you can kind

139
00:07:05,849 --> 00:07:10,344
of, let's shrink this down to 10 pixels
and just repeat those 10 pixels and

140
00:07:10,344 --> 00:07:13,554
like, it makes a pattern, I guess
it's like pattern making in a way.

141
00:07:13,584 --> 00:07:13,734
Jennie: Yeah.

142
00:07:13,734 --> 00:07:17,154
It is breaking down everything to
like modules and building blocks.

143
00:07:17,154 --> 00:07:17,364
Right.

144
00:07:17,364 --> 00:07:18,624
Just like for, for systems.

145
00:07:18,624 --> 00:07:19,344
Yeah.

146
00:07:19,784 --> 00:07:20,654
Eddie: That's awesome.

147
00:07:21,344 --> 00:07:24,854
Yeah, it's, it's so funny, like
you said, I think a lot of people

148
00:07:24,854 --> 00:07:30,884
who do UX engineering, I don't
have many design skills in my

149
00:07:31,214 --> 00:07:32,984
mind and my body and my brain.

150
00:07:32,989 --> 00:07:37,404
So like I understand design aesthetics,
but I'm really bad at like, Coming up

151
00:07:37,404 --> 00:07:39,084
with stuff when it's an empty page.

152
00:07:39,504 --> 00:07:44,094
But so I really value people who
actually are like true UX engineers

153
00:07:44,094 --> 00:07:48,984
where they actually have like full
design skills and engineering skills.

154
00:07:49,344 --> 00:07:51,834
I think it's really interesting,
like you were talking about how.

155
00:07:52,229 --> 00:07:54,239
Companies didn't really know
what to do with that at first.

156
00:07:54,269 --> 00:07:57,989
Like it was kind of like, okay, you do
this job or that job and like you said,

157
00:07:57,989 --> 00:07:59,399
there was a lot of bouncing back and

158
00:07:59,399 --> 00:07:59,909
Jennie: forth.

159
00:08:00,179 --> 00:08:02,789
There's a little bit of
pigeonholing too back then.

160
00:08:02,794 --> 00:08:06,629
I feel like, ah, there was like one point
where I remember my manager was like,

161
00:08:06,689 --> 00:08:08,039
you have to choose one or the other.

162
00:08:08,669 --> 00:08:11,549
In one role and I was like, I can't,
you can't make me, I can't choose

163
00:08:13,199 --> 00:08:18,299
. 
Eddie: I love the both . So do you
think when you were working right in a

164
00:08:18,299 --> 00:08:22,259
job that had to do one type of thing,
were you doing the other like as a

165
00:08:22,259 --> 00:08:26,249
hobby on the side to keep up the skills
and kind of work out that passion?

166
00:08:26,249 --> 00:08:27,599
What did that look like for you?

167
00:08:27,689 --> 00:08:28,289
Hmm.

168
00:08:28,499 --> 00:08:29,609
Jennie: That's a good question.

169
00:08:29,609 --> 00:08:31,319
I feel like, I think I'm.

170
00:08:32,079 --> 00:08:35,559
Kind of doing extra work back
then on the side, but then it just

171
00:08:35,559 --> 00:08:39,439
seemed like the stuff that, if it's
not the actual work, you're kind.

172
00:08:39,899 --> 00:08:41,969
Translating for the other parts.

173
00:08:41,969 --> 00:08:46,349
So for example, like if I were like a
Shutterfly as a friend and developer,

174
00:08:46,619 --> 00:08:50,699
but then I still was like the translator
between design and engineering, you know?

175
00:08:50,704 --> 00:08:54,059
So I was still, I feel like still
applying skills there in that way.

176
00:08:54,419 --> 00:08:57,449
And then now it's kind of like, if
you think about it, I, I transitioned

177
00:08:57,449 --> 00:09:01,649
from engineer, so I, I was coding for
like, I don't know, 15 years or so,

178
00:09:01,649 --> 00:09:06,629
and I haven't coded in two years, which
is kind of scary . But like now I've

179
00:09:06,779 --> 00:09:08,699
transitioned to a design role, right?

180
00:09:08,704 --> 00:09:12,059
And so sometimes I'm like, oh, I really,
I might be a little bit behind on

181
00:09:12,059 --> 00:09:16,649
engineering and stuff, but I just see
it as like chances to, like if I can't

182
00:09:16,649 --> 00:09:20,129
do both, cuz it's not like right now
my role is not officially doing both.

183
00:09:20,794 --> 00:09:24,814
because I'm in a, like the team is like
full of hybrids and like the stuff that

184
00:09:24,814 --> 00:09:26,584
we're working on is so interconnected.

185
00:09:26,584 --> 00:09:28,144
I don't miss coding.

186
00:09:28,444 --> 00:09:32,614
I just basically can oversee it, but,
and I have a whole team of engineers

187
00:09:32,619 --> 00:09:34,774
that can do all the coding instead.

188
00:09:34,774 --> 00:09:35,014
Right.

189
00:09:35,014 --> 00:09:38,614
So I'm kind of like seeing it
as like you basically can flex.

190
00:09:38,634 --> 00:09:42,114
Your muscles and whichever
skill that you want to focus on.

191
00:09:42,114 --> 00:09:45,114
And so I guess right now in my
career, I'm just like, oh, I really

192
00:09:45,114 --> 00:09:48,564
want to explore the design side
again and really focus on that.

193
00:09:48,569 --> 00:09:51,795
And if I need to jump back to
engineering, I can, but it's just

194
00:09:51,800 --> 00:09:53,154
focused a little bit differently

195
00:09:53,154 --> 00:09:53,544
Eddie: right now.

196
00:09:53,694 --> 00:09:54,294
Nice.

197
00:09:54,354 --> 00:09:55,314
No, that's awesome.

198
00:09:55,584 --> 00:09:56,604
So I guess what.

199
00:09:56,939 --> 00:10:00,659
Is it right that keeps you
excited and interested in working

200
00:10:00,659 --> 00:10:02,639
in the UX engineering space?

201
00:10:02,639 --> 00:10:02,909
Right.

202
00:10:02,909 --> 00:10:07,409
To be balancing, I guess, what is it
about design and engineering and, and

203
00:10:07,409 --> 00:10:11,639
maybe the way that they work together
that kind of keeps you feeling like,

204
00:10:11,644 --> 00:10:14,189
yeah, this is where you want to be,
this is what you want to be doing.

205
00:10:14,399 --> 00:10:17,869
Jennie: It's like a constant, it's
not a problem, but it's just a

206
00:10:18,109 --> 00:10:19,619
constant challenge that all teams.

207
00:10:20,494 --> 00:10:23,284
Because you know, whenever we have
the full team, we do definitely

208
00:10:23,284 --> 00:10:26,434
have design and engineering and even
our team is a design system team.

209
00:10:26,824 --> 00:10:29,404
Even before when I first came,
they were a little bit siloed

210
00:10:29,404 --> 00:10:32,374
and also had, we still have like
challenges to work out and through.

211
00:10:32,794 --> 00:10:36,754
And so I feel like it's always
interesting because there's always

212
00:10:36,759 --> 00:10:39,364
someone or the other side to teach.

213
00:10:39,914 --> 00:10:42,314
, you know, so whichever side
there is, there's always some, a

214
00:10:42,774 --> 00:10:45,914
teaching moment that we can all
learn together and grow together.

215
00:10:45,914 --> 00:10:49,964
And I think, um, our team is especially
evolved because like we had a lot, a

216
00:10:49,964 --> 00:10:53,744
whole bunch of engineers and a very
few designers, and now I feel like

217
00:10:53,744 --> 00:10:55,724
they're closer because of the wave.

218
00:10:55,784 --> 00:10:57,524
We've kind of emphasized like us.

219
00:10:57,719 --> 00:11:02,759
Like pairing and like really doing
handshakes instead handoffs because

220
00:11:02,759 --> 00:11:04,109
everything is so interconnected.

221
00:11:04,109 --> 00:11:07,679
So even if say like the engineering
team needs to look into something,

222
00:11:07,684 --> 00:11:10,589
we always have at least a
design representative there.

223
00:11:11,009 --> 00:11:13,139
And so, and it's the same way, vice versa.

224
00:11:13,144 --> 00:11:18,119
There's never like a soul led, like
craft led siloed kind of initiative.

225
00:11:18,119 --> 00:11:21,449
Everything is really cross craft and
we're very intentional about that.

226
00:11:21,899 --> 00:11:26,634
And I think that's, Teams thrive when the
design designers and engineers are like

227
00:11:26,634 --> 00:11:28,284
really working and collaborating well.

228
00:11:28,734 --> 00:11:29,244
So I feel.

229
00:11:30,044 --> 00:11:33,524
This space is super interesting
cuz there's millions of teams

230
00:11:33,524 --> 00:11:34,994
that are having the same problem.

231
00:11:35,414 --> 00:11:39,464
And like, once they hit that magic
kind of like point, I feel like there's

232
00:11:39,464 --> 00:11:43,214
always this like, ah, I didn't realize
things could be this way, or I didn't

233
00:11:43,214 --> 00:11:46,664
realize, you know, I could pair with an
engineer or designer, you know, that way.

234
00:11:46,669 --> 00:11:48,614
And I, I feel like it
creates different hybrids.

235
00:11:49,034 --> 00:11:52,364
So it's like a lot of people think
hybrids are designers and engineers.

236
00:11:52,634 --> 00:11:56,734
I have content designers who are
also engineers or I have engineers

237
00:11:56,734 --> 00:11:59,834
that are interested in content,
you know, and or design, right?

238
00:11:59,839 --> 00:12:01,334
And so it's like a big mix.

239
00:12:01,364 --> 00:12:06,689
I feel like as, as they speak into cross
the kind of their like sole paths and

240
00:12:06,854 --> 00:12:11,594
just like interject, they can see that
they actually can become better designers

241
00:12:11,654 --> 00:12:15,014
or better engineers by learning about
the other craft and having more empathy.

242
00:12:15,669 --> 00:12:20,169
Eddie: Yeah, I definitely, like you said,
having people made up of hybrid skills.

243
00:12:20,169 --> 00:12:23,109
I think something else that's
really taken off lightly in the

244
00:12:23,469 --> 00:12:28,329
engineering space is where engineers
will switch between being managers

245
00:12:28,359 --> 00:12:30,159
and being individual contributors.

246
00:12:30,164 --> 00:12:32,469
And so they'll go and they'll be a
manager for several years, right?

247
00:12:32,469 --> 00:12:32,529
Yeah.

248
00:12:32,534 --> 00:12:35,889
And then they'll shift back into
being an individual contributor

249
00:12:35,894 --> 00:12:39,669
and like the things that they learn
while being a manager makes them

250
00:12:39,669 --> 00:12:41,529
a better individual contributor.

251
00:12:41,529 --> 00:12:42,099
I agree.

252
00:12:42,654 --> 00:12:43,404
design has the same.

253
00:12:43,584 --> 00:12:43,944
Yeah.

254
00:12:43,944 --> 00:12:48,924
So I think, like you said, all of that,
like mixing and melting of skills just

255
00:12:48,924 --> 00:12:54,324
makes people have more, be able to do
more in their individual positions.

256
00:12:54,329 --> 00:12:54,574
Mm-hmm.

257
00:12:54,654 --> 00:12:55,254
, and it just brings.

258
00:12:55,874 --> 00:12:56,774
So much more value.

259
00:12:56,864 --> 00:12:58,604
I think it's definitely really cool.

260
00:12:58,694 --> 00:13:02,414
Jennie: More empathy, better
communication, work more effectively

261
00:13:02,414 --> 00:13:04,784
together, cuz you understand
the other side a little bit

262
00:13:04,784 --> 00:13:05,114
Eddie: more.

263
00:13:05,354 --> 00:13:06,254
Exactly.

264
00:13:06,254 --> 00:13:07,394
Yeah, I love that.

265
00:13:07,724 --> 00:13:11,444
In this podcast we like to talk
about what brings people joy.

266
00:13:11,534 --> 00:13:16,304
Obviously we've started to tiptoe into
these waters cuz it is what you do.

267
00:13:16,304 --> 00:13:19,664
But, um, what is it that brings
you joy and you know, that

268
00:13:19,664 --> 00:13:21,104
you'd like to talk about today?

269
00:13:21,524 --> 00:13:25,244
Jennie: I have been thinking a lot
lately about, like myself as a designer

270
00:13:25,244 --> 00:13:28,934
and engineer, and now we're on design
systems teams, so we're building the

271
00:13:28,934 --> 00:13:34,214
tools for other designers and engineers
to work better and more effectively.

272
00:13:34,604 --> 00:13:34,814
Right.

273
00:13:34,814 --> 00:13:39,089
And so I've been really thinking
about like, Them being in the flow.

274
00:13:39,329 --> 00:13:43,559
It brings me joy when the things
that we provide are helping them

275
00:13:43,559 --> 00:13:46,379
be more effective and be better
designers and engineers, for example.

276
00:13:46,379 --> 00:13:51,179
So that's like my wish and like my goal
all the time is like to build things

277
00:13:51,479 --> 00:13:53,669
to make them in the zone, in the flow.

278
00:13:53,699 --> 00:13:57,119
Cuz it's like, isn't it such a good
feeling when you're like a designer

279
00:13:57,119 --> 00:14:00,329
engineer and you have a system in place,
or if you have like, you know, whatever

280
00:14:00,729 --> 00:14:04,469
personal processes in place and like you
get a problem to solve and you're just.

281
00:14:04,739 --> 00:14:09,629
Super in the zone focused and you're like
coding or you're just like, really, like

282
00:14:09,629 --> 00:14:13,289
designing all these and or, or exploring
all these things and like you're just

283
00:14:13,289 --> 00:14:17,699
not disturbed by like the tools or, or
the processes that you are in, you know?

284
00:14:17,699 --> 00:14:21,329
So like, it feels super, I
remember feeling super good.

285
00:14:21,389 --> 00:14:22,889
That feels joy, right?

286
00:14:22,889 --> 00:14:26,249
Like that makes me feel like a
great designer, a great engineer.

287
00:14:26,249 --> 00:14:30,459
And I feel like I would love to
get other designers with engineers

288
00:14:30,464 --> 00:14:32,099
feeling that same feeling.

289
00:14:32,339 --> 00:14:33,149
Eddie: That's awesome.

290
00:14:33,179 --> 00:14:33,899
I love that.

291
00:14:33,899 --> 00:14:38,279
Yeah, because nothing breaks flow more
than like, Something that's small.

292
00:14:38,279 --> 00:14:39,239
Little details.

293
00:14:39,419 --> 00:14:39,479
. Yeah.

294
00:14:39,509 --> 00:14:39,779
Right?

295
00:14:39,779 --> 00:14:39,989
Yeah.

296
00:14:39,989 --> 00:14:42,749
Something that, yeah, especially
something that's broken, right?

297
00:14:42,749 --> 00:14:46,979
It's like your framework, your
tooling or your components and you

298
00:14:46,979 --> 00:14:51,869
like, you put it there and it doesn't
quite do what it needs to do, right?

299
00:14:51,889 --> 00:14:52,009
Yeah.

300
00:14:52,014 --> 00:14:53,609
Like it just doesn't quite fit.

301
00:14:53,849 --> 00:14:56,189
Um, like a puzzle piece that's
just off and you're like,

302
00:14:56,874 --> 00:14:58,194
You've gotta be kidding me.

303
00:14:58,194 --> 00:14:58,614
Like

304
00:14:59,274 --> 00:15:03,384
. 
Jennie: It's super fun to think about
that and put ourselves in their shoes

305
00:15:03,384 --> 00:15:08,604
cuz it's like very super little detailed
things that maybe not, might not be a big

306
00:15:08,604 --> 00:15:13,464
deal, might actually be really delightful
for like, for them in their workflow.

307
00:15:13,554 --> 00:15:14,604
Cuz that's what we're trying to do.

308
00:15:14,604 --> 00:15:19,314
We're trying to like keep them in their
workflow to do the best work they can

309
00:15:19,464 --> 00:15:20,994
and be in that flow in that state.

310
00:15:21,234 --> 00:15:21,714
Eddie: Nice.

311
00:15:21,714 --> 00:15:22,434
Absolutely.

312
00:15:22,434 --> 00:15:24,894
Well, that's one thing that
we've been talking about.

313
00:15:25,514 --> 00:15:31,934
My job is that we don't have a lot of
whimsy in our website and app right now.

314
00:15:32,114 --> 00:15:32,204
Mm-hmm.

315
00:15:32,534 --> 00:15:35,264
. And so it was like, well, how do
we start getting more like little

316
00:15:35,264 --> 00:15:37,664
animations or whimsy or things like that?

317
00:15:37,664 --> 00:15:41,979
And it's like, well, we don't have the
bandwidth to like,  have every front

318
00:15:41,979 --> 00:15:44,169
end engineer focusing on adding whimsy.

319
00:15:44,169 --> 00:15:46,479
Like we need to actually
build things that are useful.

320
00:15:46,549 --> 00:15:47,029
Mm-hmm.

321
00:15:47,035 --> 00:15:47,799
to our users.

322
00:15:48,339 --> 00:15:51,759
And so one thing we were talking about,
I was like, well, what if we find ways

323
00:15:51,764 --> 00:15:56,199
right to add variation in whimsy into
components that we're building out?

324
00:15:56,469 --> 00:16:00,249
And then just like allow those to
be selected by different attributes.

325
00:16:00,309 --> 00:16:04,149
So when the developer is like using the
component, they can be like, oh, let's

326
00:16:04,149 --> 00:16:07,689
give this little like flourish one or
flourish two or something, you know?

327
00:16:07,689 --> 00:16:07,809
And.

328
00:16:08,474 --> 00:16:13,214
It allows it to stay true to the
design language, but also allows it

329
00:16:13,214 --> 00:16:16,934
to be more engaging and a little bit
more alive, so it's not so static.

330
00:16:17,324 --> 00:16:20,504
Jennie: I actually think about that
Atlassian because we're, we're expanding

331
00:16:20,624 --> 00:16:24,884
in terms of brand and personality,
so I feel like ways that you can

332
00:16:25,124 --> 00:16:28,604
kind of do that is by having strong
principles and values in place.

333
00:16:28,964 --> 00:16:32,984
And so for example, like we have design
principles and one of them is to be bold

334
00:16:32,984 --> 00:16:35,744
and optimistic and practical with a wink.

335
00:16:35,984 --> 00:16:38,474
So that little practical with
the wink part, I feel like is

336
00:16:38,474 --> 00:16:40,634
the little whimsical stuff.

337
00:16:40,634 --> 00:16:43,094
And it kind of like shows
up in different ways.

338
00:16:43,094 --> 00:16:46,244
It could be through the ui, it could
be through the content and the way

339
00:16:46,249 --> 00:16:49,454
they're expressing the words, and
then that, that what you're speaking.

340
00:16:50,264 --> 00:16:53,654
For about the components, like
we're thinking about evolving

341
00:16:53,924 --> 00:16:55,034
the parts in our system.

342
00:16:55,034 --> 00:16:58,664
Cuz right now our system's 10 years old,
so it's a little bit old and we need to

343
00:16:58,664 --> 00:17:00,524
evolve it to be a little more flexible.

344
00:17:00,914 --> 00:17:04,484
So to do that, we're thinking about
really evolving them to be a little

345
00:17:04,484 --> 00:17:07,304
bit more composable and configurable.

346
00:17:07,629 --> 00:17:12,129
And it's in that configurable part where
I see like product teams being able to

347
00:17:12,129 --> 00:17:16,029
like express themselves a little bit more,
whether it be through like expression,

348
00:17:16,029 --> 00:17:19,014
through like design tokens and a little
bit of theming, allowing the brands

349
00:17:19,359 --> 00:17:21,309
to be a little bit more personalized.

350
00:17:21,309 --> 00:17:24,939
Like Confluence is like an editor, so it
may be a little bit more personalized.

351
00:17:25,444 --> 00:17:28,534
And then there's like, you know,
Trello is like more of a fun brand.

352
00:17:28,534 --> 00:17:30,694
Let them do a little bit more
fun stuff and they have a little

353
00:17:30,694 --> 00:17:32,254
bit more micro animations.

354
00:17:32,644 --> 00:17:35,374
And then there's like other
tools and products that we have

355
00:17:35,374 --> 00:17:37,354
are more like less personality.

356
00:17:37,354 --> 00:17:40,654
So we are saying those are less flexible,
you know, so those are more like,

357
00:17:40,684 --> 00:17:43,804
oh, they all look the same, they're
very Atlassian and stuff like that.

358
00:17:43,804 --> 00:17:47,164
So we kind of have this spectrum of
that whimsy that, that you're kind

359
00:17:47,164 --> 00:17:48,424
of talking about through different.

360
00:17:48,969 --> 00:17:49,929
Eddie: Yeah, definitely.

361
00:17:49,934 --> 00:17:51,309
Well, and I think that's
interesting, right?

362
00:17:51,309 --> 00:17:55,209
When you get to be working at a company
with so many different products, like

363
00:17:55,209 --> 00:17:59,259
you have to be able to account for that
as opposed to companies that just have

364
00:17:59,264 --> 00:18:02,439
one or two products and they can be
like, these things are pretty similar.

365
00:18:02,439 --> 00:18:05,709
Maybe they just have different color
schemes or something, but that they, yeah.

366
00:18:05,769 --> 00:18:06,249
The rest.

367
00:18:06,704 --> 00:18:10,514
But when you have, to your point, right,
a text editor that needs to be a lot more

368
00:18:10,514 --> 00:18:17,744
customizable and then, you know, just very
different kind of brands and tools and

369
00:18:18,014 --> 00:18:19,904
kind of expectations that the users have.

370
00:18:19,904 --> 00:18:24,944
I guess, how do you all approach that,
right, to build a design system that.

371
00:18:25,459 --> 00:18:29,689
Is encompasses everything that you
need, but is also flexible, I guess,

372
00:18:29,689 --> 00:18:33,149
what do you keep in your mind to
kind of try to keep that balance?

373
00:18:33,149 --> 00:18:33,469
Jennie: Mm-hmm.

374
00:18:33,549 --> 00:18:36,739
, that's exactly why I mentioned
that we are evolving in the system.

375
00:18:36,739 --> 00:18:40,489
So we have a new vision and strategy for
the next three to five years, and it's

376
00:18:40,489 --> 00:18:44,209
really brilliant building a little bit
of new infrastructure under the hood.

377
00:18:44,509 --> 00:18:49,609
Um, some design tokens, some primitives
and stuff to enable and we're moving from

378
00:18:49,609 --> 00:18:52,309
this like kind of enforcing previous.

379
00:18:52,844 --> 00:18:56,534
Everything was very like, super glued
together and stuck in a way, kind of

380
00:18:56,534 --> 00:18:58,124
stuck in the past ca and kind of thing.

381
00:18:58,394 --> 00:19:01,844
So now it's like we're trying to be
more open and empowering and stuff.

382
00:19:01,849 --> 00:19:06,194
So our new design system principles is one
of the, the principles are foundational,

383
00:19:06,224 --> 00:19:08,114
harmonious, and empowering for everyone.

384
00:19:08,504 --> 00:19:09,764
So it's like foundational.

385
00:19:10,004 --> 00:19:13,604
We want everything to be this
base set, high quality, you

386
00:19:13,604 --> 00:19:16,634
know, accessible, performant,
everything that should be table.

387
00:19:17,334 --> 00:19:18,594
That everyone can build upon.

388
00:19:19,224 --> 00:19:22,914
Harmonious means we want everything
to work together as a family.

389
00:19:22,914 --> 00:19:26,124
So that means a family of,
could be Atlassian family of

390
00:19:26,124 --> 00:19:29,334
brands, but we also want all the
components to be more composable.

391
00:19:29,394 --> 00:19:33,084
And you know, we're, we're abstracting
primitives out to like help people

392
00:19:33,294 --> 00:19:36,714
be able to compose their own
specific product specific patterns.

393
00:19:36,719 --> 00:19:39,474
Cuz we can't build every
pattern for every product.

394
00:19:40,299 --> 00:19:41,559
And then the last one is, yeah, sure.

395
00:19:41,559 --> 00:19:43,299
Talking about empowering for everyone.

396
00:19:43,299 --> 00:19:46,359
So we're trying to make the system
self-serve, you know, really high

397
00:19:46,359 --> 00:19:48,339
quality, accurate documentation.

398
00:19:48,729 --> 00:19:51,759
Ha offer things like advocacy
to like start teaching and,

399
00:19:51,879 --> 00:19:53,049
uh, upskilling everyone.

400
00:19:53,409 --> 00:19:58,299
And also just like make the system as
intuitive and self-serve as it can be.

401
00:19:58,299 --> 00:20:02,049
So it can empower more than just
designers and engineers to more.

402
00:20:02,509 --> 00:20:06,259
So like project managers or maybe
just even someone who wants to

403
00:20:06,259 --> 00:20:08,809
change roles and learn how to
like code or design and stuff.

404
00:20:08,809 --> 00:20:10,849
So we're trying to empower everyone.

405
00:20:10,849 --> 00:20:14,509
So we're moving from a enforced
kind of older system to a newer,

406
00:20:14,509 --> 00:20:16,459
more open empowering design

407
00:20:16,459 --> 00:20:16,849
Eddie: system.

408
00:20:17,149 --> 00:20:18,529
We're doing something similar.

409
00:20:18,709 --> 00:20:22,909
So at Glassdoor, you know, we've
had Glassdoor for a while and we've

410
00:20:22,909 --> 00:20:25,879
started to incorporate in our kind.

411
00:20:26,994 --> 00:20:30,484
Business side of things where employers
log in, like interfacing with Indeed.

412
00:20:30,484 --> 00:20:34,684
So now we've got the Glassdoor brand
and we've got the Indeed brand, um, cuz

413
00:20:34,684 --> 00:20:36,094
we're owned by the same parent company.

414
00:20:36,214 --> 00:20:36,484
Mm-hmm.

415
00:20:36,544 --> 00:20:38,224
And now we just bought Fishbowl.

416
00:20:38,344 --> 00:20:38,554
Right.

417
00:20:38,554 --> 00:20:40,204
Which is an anonymous social network.

418
00:20:40,234 --> 00:20:42,124
And so that has to get integrated.

419
00:20:42,124 --> 00:20:47,189
And so you've got kind of three brands now
and we're looking and saying, well, How

420
00:20:47,189 --> 00:20:52,349
do we operate right as the new glass door
that isn't just the standard traditional

421
00:20:52,349 --> 00:20:54,389
glass door of several years ago.

422
00:20:54,389 --> 00:20:59,849
And so that's actually, we're creating a
new design system and component library

423
00:20:59,854 --> 00:21:04,559
from scratch starting this year realizing
that, hey, we need to be more adaptable.

424
00:21:04,559 --> 00:21:06,689
We need to be able to
hit different use cases.

425
00:21:06,779 --> 00:21:08,039
Yeah, so I love that.

426
00:21:08,364 --> 00:21:11,724
Both of our companies are kind
of in similar moments right now.

427
00:21:11,724 --> 00:21:14,724
We're like, all right, how do
we grow to have design systems

428
00:21:14,724 --> 00:21:16,434
that meet the company of today?

429
00:21:16,554 --> 00:21:16,644
Jennie: Mm-hmm.

430
00:21:17,004 --> 00:21:19,824
so much scale, so much expansion.

431
00:21:19,824 --> 00:21:21,324
So much complexity.

432
00:21:21,474 --> 00:21:21,774
Yeah.

433
00:21:21,924 --> 00:21:22,164
A lot of

434
00:21:22,169 --> 00:21:22,404
Eddie: stuff.

435
00:21:22,404 --> 00:21:23,124
Balance, exactly.

436
00:21:23,214 --> 00:21:23,484
Mm-hmm.

437
00:21:23,854 --> 00:21:25,774
Jenny, thank you so much
for joining us today.

438
00:21:25,774 --> 00:21:29,464
It's just been a pleasure to chat and
get to know you, your story, and kind

439
00:21:29,464 --> 00:21:32,524
of hear how design systems excite you.