Artwork for podcast WebJoy
S1 E40: Doing handshakes instead of hand-offs (Jennie / @JennieSYip)
Episode 40 • 23rd January 2023 • WebJoy • Eddie Hinkle
00:00:00 00:22:58

Share Episode

Shownotes

Jennie Yip joins the show to talk about her origin story, from building Sailor Moon fan sites to helping lead the Design System at Atlassian as a Design Architect.

We discuss how she got into design, her integrated passions for design and software engineering, and we dive deep into Design Systems and how they support the companies they are built for, and it's inevitable need for a rebuild.

🔗 Discussed Links

🙋 Guest Links

❓Listener Survey

If you have 3 minutes, take our short listener survey.



❤️ Reviews

If you could leave us a review on Apple Podcasts, that will help others find the podcast as well! You can share your favorite guest or topic!

Some other areas you can leave us reviews! Spotify, Podchaser.

🗺️ WebJoy Links

To stay up to date, you can subscribe to Little Bit of WebJoy which sends out a monthly email letting you know what's new in the WebJoy community.

Transcripts

Eddie:

Welcome to another episode of Web Joy.

Eddie:

I'm excited to have Jenny with us today.

Eddie:

Jenny, say hi to the

Jennie:

listeners.

Jennie:

Hey, Eddie.

Jennie:

Nice to be here and excited and thanks for having me.

Eddie:

Well, it's my pleasure.

Eddie:

Thanks for, for coming and joining us.

Eddie:

If you don't mind, just give us a general overview, right?

Eddie:

Who you are, what you do, where you work, those just kind of high level details.

Jennie:

Yeah, so hi, nice to meet everyone.

Jennie:

I'm Jenny.

Jennie:

I'm one of the lead designers at Atlassian, and I've been leading Atlassian

Jennie:

design system for the past three.

Jennie:

and I started as a web designer so many, many years ago, just like

Jennie:

designing, developing, and it's kind of nice that like the industry's

Jennie:

evolved into systems and stuff.

Jennie:

So I feel like all these hybrids have kind of found a home in design systems.

Eddie:

That's awesome.

Eddie:

Well, very cool.

Eddie:

So that's interesting, right?

Eddie:

You started out as a web designer, you know, now kind of looking at

Eddie:

design systems and stuff like that.

Eddie:

So kind of how did you get involved in tech?

Eddie:

Right?

Eddie:

What was that first thing that said, Hey, this web stuff,

Eddie:

I'd like to work with that.

Eddie:

And then kind of what did that journey look like?

Eddie:

Right?

Eddie:

How did you get from web designer to leading design systems at ala?

Jennie:

When I was in college, actually, they didn't really have any kind of

Jennie:

web design courses and I had already started delving into H M C S S and making

Jennie:

basically like Sailor Moon fan sites on, you know, like on Zoom and like AOL

Jennie:

and all, and then Geo Cities and stuff.

Jennie:

And so I really wanted to learn a lot about like, not, not only like web design,

Jennie:

but like just creating and crafting.

Jennie:

And bring it to life.

Jennie:

So that's why it was like super interesting cause I like to customize

Jennie:

and, and like code and bring it to life.

Jennie:

So only thing I could major in in college was computer science.

Jennie:

That's the closest thing.

Jennie:

And then like I remember during one summer, I just.

Jennie:

Took the design, like the design one class and I just was just like super amazed

Jennie:

and like I think I learned Illustrator in that class and then it led into

Jennie:

the flash class and all that stuff.

Jennie:

So I kind of like started doing it on the side.

Jennie:

And so it seems like my hobby kind of became my career, which is really

Jennie:

cool cuz I start taking on internships and stuff just to do web design.

Jennie:

And funnily enough, when I graduated, like I didn't know what to do cuz

Jennie:

I was like, oh, I have computer science degree, what should I do?

Jennie:

So I actually applied for a QA job, uh, which is funny.

Jennie:

At Lockheed Martin, I was actually there for almost seven years.

Jennie:

Oh, wow.

Jennie:

Uh, and instead of a QA job, they saw my internship, um, and,

Jennie:

uh, kind of like resume history.

Jennie:

And they've realized I was more of a web designer.

Jennie:

So I actually, uh, created internet sites and a bunch of other web

Jennie:

design sites, uh, internally for Lockheed for many, many years.

Jennie:

And then from there, kind of went on to some startups and then Shutterfly and

Jennie:

kept jumping between like design and development, joined a front end team.

Jennie:

And then when I was at Udacity, I was a their first front end design engineer

Jennie:

and it was really cool because I think I had left Shutterfly cuz I was a front

Jennie:

end developer there and I was just like, oh, I missed design so much cuz I was

Jennie:

just strictly coding emails and just coding, landing pages and stuff there.

Jennie:

And I was like, I really need to be in a role that.

Jennie:

lets me, you know, explore both at times.

Jennie:

And so that startup Udacity was really awesome cuz they were basically

Jennie:

like, we embraced generalists and they very much like entertained the

Jennie:

idea of having hybrids on the team.

Jennie:

So, uh, that we were one of the two UX engineers there and it was

Jennie:

around there that we kind of fell into like rebranding Udacity.

Jennie:

We built a front end framework for.

Jennie:

And around that time is when, you know, the buzzword design system started

Jennie:

buzzing and we're like, oh, actually we're like building a design system.

Jennie:

That's where it kind of led, led from.

Eddie:

So I love that you're doing Sailor Moon , you know, like fan sites.

Eddie:

I actually back in the day, did like Final Fantasy fan site.

Eddie:

Definitely is not well designed in any yes phrase of the word . But

Eddie:

uh, it had some fun final fantasy music playing in the background.

Eddie:

Like C midi files,

Jennie:

right?

Jennie:

MIDI files.

Jennie:

Exactly.

Jennie:

animated Kiss banners flashing

Jennie:

. Eddie: That's awesome.

Jennie:

And yeah, I think mine was so stunt Geo Cities.

Jennie:

So definitely fun when is like, yeah.

Jennie:

You know, you got into it just by doing a fan site for something

Jennie:

that you love and always just like right click and just like exploring.

Jennie:

Inspecting the code.

Eddie:

Yeah, yeah, absolutely.

Eddie:

That was like, you would find someone's website that did something really cool and

Eddie:

then you're like, oh sweet, I want that.

Eddie:

So you right click it, you look at it, you copy it and yeah.

Eddie:

Piece it over into

Jennie:

yours.

Jennie:

Yeah, for sure.

Jennie:

Extending everything.

Jennie:

I think it's funny cuz I think.

Jennie:

People who like us, that have been around, we have like coded layouts

Jennie:

all the way from like, I like frames to like tables, to like, you know,

Jennie:

Daves to all the way to grids.

Jennie:

It's

Eddie:

kind of funny.

Eddie:

Yeah, it's definitely evolved right from like really painful.

Eddie:

To like less painful to now actually, like with flex box and Flex Grid

Eddie:

and stuff, it's like, oh my gosh.

Eddie:

Like . Yeah.

Eddie:

Yeah.

Eddie:

What could we have done 20 years ago if we had this

Eddie:

? Jennie: I still remember when we had

Eddie:

had to like export like the rounded corner in that tiny, you know, that

Eddie:

tiny corner and put that as the image and then have that repor repeated row

Eddie:

background, and then have spacers.

Eddie:

Oh my.

Eddie:

Yeah.

Eddie:

Memories . Yeah.

Eddie:

Oh my gosh, that's so funny.

Eddie:

I actually just recently had a podcast with Miriam Isaac, who was a designer,

Eddie:

and we were talking about design back in the day, and she was talking

Eddie:

about, yeah, that you basically had to make these rounded corners, right?

Eddie:

And then you had these, like you had to do the background color.

Eddie:

Yeah.

Eddie:

Like you couldn't have transparency, so you had these weird like triangles

Eddie:

in the corner to like make your round.

Eddie:

Corner and yeah, like the spacers, like you said, you'd have like what a two

Eddie:

pixel width image that you then are like, okay, repeat this horizontally,

Eddie:

, or, you know, repeat this vertically to like create these fancy borders.

Jennie:

Yeah.

Jennie:

I think it's like really funny how we had to have those kind of workarounds,

Jennie:

but I, I think it actually contributed to making me super, like, detail-oriented

Jennie:

and like looking at the pixel.

Jennie:

You know, because I kind of like, it's part of my, my job now where

Jennie:

we're like really inspecting and looking at everything super deeply.

Eddie:

No, definitely.

Eddie:

Right.

Eddie:

To break it down to like, what's the smallest piece here?

Eddie:

If you have this thing, what kind of repetition exists that you can kind

Eddie:

of, let's shrink this down to 10 pixels and just repeat those 10 pixels and

Eddie:

like, it makes a pattern, I guess it's like pattern making in a way.

Jennie:

Yeah.

Jennie:

It is breaking down everything to like modules and building blocks.

Jennie:

Right.

Jennie:

Just like for, for systems.

Jennie:

Yeah.

Eddie:

That's awesome.

Eddie:

Yeah, it's, it's so funny, like you said, I think a lot of people

Eddie:

who do UX engineering, I don't have many design skills in my

Eddie:

mind and my body and my brain.

Eddie:

So like I understand design aesthetics, but I'm really bad at like, Coming up

Eddie:

with stuff when it's an empty page.

Eddie:

But so I really value people who actually are like true UX engineers

Eddie:

where they actually have like full design skills and engineering skills.

Eddie:

I think it's really interesting, like you were talking about how.

Eddie:

Companies didn't really know what to do with that at first.

Eddie:

Like it was kind of like, okay, you do this job or that job and like you said,

Eddie:

there was a lot of bouncing back and

Jennie:

forth.

Jennie:

There's a little bit of pigeonholing too back then.

Jennie:

I feel like, ah, there was like one point where I remember my manager was like,

Jennie:

you have to choose one or the other.

Jennie:

In one role and I was like, I can't, you can't make me, I can't choose

Jennie:

. Eddie: I love the both . So do you

Jennie:

job that had to do one type of thing, were you doing the other like as a

Jennie:

hobby on the side to keep up the skills and kind of work out that passion?

Jennie:

What did that look like for you?

Jennie:

Hmm.

Jennie:

That's a good question.

Jennie:

I feel like, I think I'm.

Jennie:

Kind of doing extra work back then on the side, but then it just

Jennie:

seemed like the stuff that, if it's not the actual work, you're kind.

Jennie:

Translating for the other parts.

Jennie:

So for example, like if I were like a Shutterfly as a friend and developer,

Jennie:

but then I still was like the translator between design and engineering, you know?

Jennie:

So I was still, I feel like still applying skills there in that way.

Jennie:

And then now it's kind of like, if you think about it, I, I transitioned

Jennie:

from engineer, so I, I was coding for like, I don't know, 15 years or so,

Jennie:

and I haven't coded in two years, which is kind of scary . But like now I've

Jennie:

transitioned to a design role, right?

Jennie:

And so sometimes I'm like, oh, I really, I might be a little bit behind on

Jennie:

engineering and stuff, but I just see it as like chances to, like if I can't

Jennie:

do both, cuz it's not like right now my role is not officially doing both.

Jennie:

because I'm in a, like the team is like full of hybrids and like the stuff that

Jennie:

we're working on is so interconnected.

Jennie:

I don't miss coding.

Jennie:

I just basically can oversee it, but, and I have a whole team of engineers

Jennie:

that can do all the coding instead.

Jennie:

Right.

Jennie:

So I'm kind of like seeing it as like you basically can flex.

Jennie:

Your muscles and whichever skill that you want to focus on.

Jennie:

And so I guess right now in my career, I'm just like, oh, I really

Jennie:

want to explore the design side again and really focus on that.

Jennie:

And if I need to jump back to engineering, I can, but it's just

Jennie:

focused a little bit differently

Eddie:

right now.

Eddie:

Nice.

Eddie:

No, that's awesome.

Eddie:

So I guess what.

Eddie:

Is it right that keeps you excited and interested in working

Eddie:

in the UX engineering space?

Eddie:

Right.

Eddie:

To be balancing, I guess, what is it about design and engineering and, and

Eddie:

maybe the way that they work together that kind of keeps you feeling like,

Eddie:

yeah, this is where you want to be, this is what you want to be doing.

Jennie:

It's like a constant, it's not a problem, but it's just a

Jennie:

constant challenge that all teams.

Jennie:

Because you know, whenever we have the full team, we do definitely

Jennie:

have design and engineering and even our team is a design system team.

Jennie:

Even before when I first came, they were a little bit siloed

Jennie:

and also had, we still have like challenges to work out and through.

Jennie:

And so I feel like it's always interesting because there's always

Jennie:

someone or the other side to teach.

Jennie:

, you know, so whichever side there is, there's always some, a

Jennie:

teaching moment that we can all learn together and grow together.

Jennie:

And I think, um, our team is especially evolved because like we had a lot, a

Jennie:

whole bunch of engineers and a very few designers, and now I feel like

Jennie:

they're closer because of the wave.

Jennie:

We've kind of emphasized like us.

Jennie:

Like pairing and like really doing handshakes instead handoffs because

Jennie:

everything is so interconnected.

Jennie:

So even if say like the engineering team needs to look into something,

Jennie:

we always have at least a design representative there.

Jennie:

And so, and it's the same way, vice versa.

Jennie:

There's never like a soul led, like craft led siloed kind of initiative.

Jennie:

Everything is really cross craft and we're very intentional about that.

Jennie:

And I think that's, Teams thrive when the design designers and engineers are like

Jennie:

really working and collaborating well.

Jennie:

So I feel.

Jennie:

This space is super interesting cuz there's millions of teams

Jennie:

that are having the same problem.

Jennie:

And like, once they hit that magic kind of like point, I feel like there's

Jennie:

always this like, ah, I didn't realize things could be this way, or I didn't

Jennie:

realize, you know, I could pair with an engineer or designer, you know, that way.

Jennie:

And I, I feel like it creates different hybrids.

Jennie:

So it's like a lot of people think hybrids are designers and engineers.

Jennie:

I have content designers who are also engineers or I have engineers

Jennie:

that are interested in content, you know, and or design, right?

Jennie:

And so it's like a big mix.

Jennie:

I feel like as, as they speak into cross the kind of their like sole paths and

Jennie:

just like interject, they can see that they actually can become better designers

Jennie:

or better engineers by learning about the other craft and having more empathy.

Eddie:

Yeah, I definitely, like you said, having people made up of hybrid skills.

Eddie:

I think something else that's really taken off lightly in the

Eddie:

engineering space is where engineers will switch between being managers

Eddie:

and being individual contributors.

Eddie:

And so they'll go and they'll be a manager for several years, right?

Eddie:

Yeah.

Eddie:

And then they'll shift back into being an individual contributor

Eddie:

and like the things that they learn while being a manager makes them

Eddie:

a better individual contributor.

Eddie:

I agree.

Eddie:

design has the same.

Eddie:

Yeah.

Eddie:

So I think, like you said, all of that, like mixing and melting of skills just

Eddie:

makes people have more, be able to do more in their individual positions.

Eddie:

Mm-hmm.

Eddie:

, and it just brings.

Eddie:

So much more value.

Eddie:

I think it's definitely really cool.

Jennie:

More empathy, better communication, work more effectively

Jennie:

together, cuz you understand the other side a little bit

Eddie:

more.

Eddie:

Exactly.

Eddie:

Yeah, I love that.

Eddie:

In this podcast we like to talk about what brings people joy.

Eddie:

Obviously we've started to tiptoe into these waters cuz it is what you do.

Eddie:

But, um, what is it that brings you joy and you know, that

Eddie:

you'd like to talk about today?

Jennie:

I have been thinking a lot lately about, like myself as a designer

Jennie:

and engineer, and now we're on design systems teams, so we're building the

Jennie:

tools for other designers and engineers to work better and more effectively.

Jennie:

Right.

Jennie:

And so I've been really thinking about like, Them being in the flow.

Jennie:

It brings me joy when the things that we provide are helping them

Jennie:

be more effective and be better designers and engineers, for example.

Jennie:

So that's like my wish and like my goal all the time is like to build things

Jennie:

to make them in the zone, in the flow.

Jennie:

Cuz it's like, isn't it such a good feeling when you're like a designer

Jennie:

engineer and you have a system in place, or if you have like, you know, whatever

Jennie:

personal processes in place and like you get a problem to solve and you're just.

Jennie:

Super in the zone focused and you're like coding or you're just like, really, like

Jennie:

designing all these and or, or exploring all these things and like you're just

Jennie:

not disturbed by like the tools or, or the processes that you are in, you know?

Jennie:

So like, it feels super, I remember feeling super good.

Jennie:

That feels joy, right?

Jennie:

Like that makes me feel like a great designer, a great engineer.

Jennie:

And I feel like I would love to get other designers with engineers

Jennie:

feeling that same feeling.

Eddie:

That's awesome.

Eddie:

I love that.

Eddie:

Yeah, because nothing breaks flow more than like, Something that's small.

Eddie:

Little details.

Eddie:

. Yeah.

Eddie:

Right?

Eddie:

Yeah.

Eddie:

Something that, yeah, especially something that's broken, right?

Eddie:

It's like your framework, your tooling or your components and you

Eddie:

like, you put it there and it doesn't quite do what it needs to do, right?

Eddie:

Yeah.

Eddie:

Like it just doesn't quite fit.

Eddie:

Um, like a puzzle piece that's just off and you're like,

Eddie:

You've gotta be kidding me.

Eddie:

Like

Eddie:

. Jennie: It's super fun to think about

Eddie:

cuz it's like very super little detailed things that maybe not, might not be a big

Eddie:

deal, might actually be really delightful for like, for them in their workflow.

Eddie:

Cuz that's what we're trying to do.

Eddie:

We're trying to like keep them in their workflow to do the best work they can

Eddie:

and be in that flow in that state.

Eddie:

Nice.

Eddie:

Absolutely.

Eddie:

Well, that's one thing that we've been talking about.

Eddie:

My job is that we don't have a lot of whimsy in our website and app right now.

Eddie:

Mm-hmm.

Eddie:

. And so it was like, well, how do we start getting more like little

Eddie:

animations or whimsy or things like that?

Eddie:

And it's like, well, we don't have the bandwidth to like, have every front

Eddie:

end engineer focusing on adding whimsy.

Eddie:

Like we need to actually build things that are useful.

Eddie:

Mm-hmm.

Eddie:

to our users.

Eddie:

And so one thing we were talking about, I was like, well, what if we find ways

Eddie:

right to add variation in whimsy into components that we're building out?

Eddie:

And then just like allow those to be selected by different attributes.

Eddie:

So when the developer is like using the component, they can be like, oh, let's

Eddie:

give this little like flourish one or flourish two or something, you know?

Eddie:

And.

Eddie:

It allows it to stay true to the design language, but also allows it

Eddie:

to be more engaging and a little bit more alive, so it's not so static.

Jennie:

I actually think about that Atlassian because we're, we're expanding

Jennie:

in terms of brand and personality, so I feel like ways that you can

Jennie:

kind of do that is by having strong principles and values in place.

Jennie:

And so for example, like we have design principles and one of them is to be bold

Jennie:

and optimistic and practical with a wink.

Jennie:

So that little practical with the wink part, I feel like is

Jennie:

the little whimsical stuff.

Jennie:

And it kind of like shows up in different ways.

Jennie:

It could be through the ui, it could be through the content and the way

Jennie:

they're expressing the words, and then that, that what you're speaking.

Jennie:

For about the components, like we're thinking about evolving

Jennie:

the parts in our system.

Jennie:

Cuz right now our system's 10 years old, so it's a little bit old and we need to

Jennie:

evolve it to be a little more flexible.

Jennie:

So to do that, we're thinking about really evolving them to be a little

Jennie:

bit more composable and configurable.

Jennie:

And it's in that configurable part where I see like product teams being able to

Jennie:

like express themselves a little bit more, whether it be through like expression,

Jennie:

through like design tokens and a little bit of theming, allowing the brands

Jennie:

to be a little bit more personalized.

Jennie:

Like Confluence is like an editor, so it may be a little bit more personalized.

Jennie:

And then there's like, you know, Trello is like more of a fun brand.

Jennie:

Let them do a little bit more fun stuff and they have a little

Jennie:

bit more micro animations.

Jennie:

And then there's like other tools and products that we have

Jennie:

are more like less personality.

Jennie:

So we are saying those are less flexible, you know, so those are more like,

Jennie:

oh, they all look the same, they're very Atlassian and stuff like that.

Jennie:

So we kind of have this spectrum of that whimsy that, that you're kind

Jennie:

of talking about through different.

Eddie:

Yeah, definitely.

Eddie:

Well, and I think that's interesting, right?

Eddie:

When you get to be working at a company with so many different products, like

Eddie:

you have to be able to account for that as opposed to companies that just have

Eddie:

one or two products and they can be like, these things are pretty similar.

Eddie:

Maybe they just have different color schemes or something, but that they, yeah.

Eddie:

The rest.

Eddie:

But when you have, to your point, right, a text editor that needs to be a lot more

Eddie:

customizable and then, you know, just very different kind of brands and tools and

Eddie:

kind of expectations that the users have.

Eddie:

I guess, how do you all approach that, right, to build a design system that.

Eddie:

Is encompasses everything that you need, but is also flexible, I guess,

Eddie:

what do you keep in your mind to kind of try to keep that balance?

Jennie:

Mm-hmm.

Jennie:

, that's exactly why I mentioned that we are evolving in the system.

Jennie:

So we have a new vision and strategy for the next three to five years, and it's

Jennie:

really brilliant building a little bit of new infrastructure under the hood.

Jennie:

Um, some design tokens, some primitives and stuff to enable and we're moving from

Jennie:

this like kind of enforcing previous.

Jennie:

Everything was very like, super glued together and stuck in a way, kind of

Jennie:

stuck in the past ca and kind of thing.

Jennie:

So now it's like we're trying to be more open and empowering and stuff.

Jennie:

So our new design system principles is one of the, the principles are foundational,

Jennie:

harmonious, and empowering for everyone.

Jennie:

So it's like foundational.

Jennie:

We want everything to be this base set, high quality, you

Jennie:

know, accessible, performant, everything that should be table.

Jennie:

That everyone can build upon.

Jennie:

Harmonious means we want everything to work together as a family.

Jennie:

So that means a family of, could be Atlassian family of

Jennie:

brands, but we also want all the components to be more composable.

Jennie:

And you know, we're, we're abstracting primitives out to like help people

Jennie:

be able to compose their own specific product specific patterns.

Jennie:

Cuz we can't build every pattern for every product.

Jennie:

And then the last one is, yeah, sure.

Jennie:

Talking about empowering for everyone.

Jennie:

So we're trying to make the system self-serve, you know, really high

Jennie:

quality, accurate documentation.

Jennie:

Ha offer things like advocacy to like start teaching and,

Jennie:

uh, upskilling everyone.

Jennie:

And also just like make the system as intuitive and self-serve as it can be.

Jennie:

So it can empower more than just designers and engineers to more.

Jennie:

So like project managers or maybe just even someone who wants to

Jennie:

change roles and learn how to like code or design and stuff.

Jennie:

So we're trying to empower everyone.

Jennie:

So we're moving from a enforced kind of older system to a newer,

Jennie:

more open empowering design

Eddie:

system.

Eddie:

We're doing something similar.

Eddie:

So at Glassdoor, you know, we've had Glassdoor for a while and we've

Eddie:

started to incorporate in our kind.

Eddie:

Business side of things where employers log in, like interfacing with Indeed.

Eddie:

So now we've got the Glassdoor brand and we've got the Indeed brand, um, cuz

Eddie:

we're owned by the same parent company.

Eddie:

Mm-hmm.

Eddie:

And now we just bought Fishbowl.

Eddie:

Right.

Eddie:

Which is an anonymous social network.

Eddie:

And so that has to get integrated.

Eddie:

And so you've got kind of three brands now and we're looking and saying, well, How

Eddie:

do we operate right as the new glass door that isn't just the standard traditional

Eddie:

glass door of several years ago.

Eddie:

And so that's actually, we're creating a new design system and component library

Eddie:

from scratch starting this year realizing that, hey, we need to be more adaptable.

Eddie:

We need to be able to hit different use cases.

Eddie:

Yeah, so I love that.

Eddie:

Both of our companies are kind of in similar moments right now.

Eddie:

We're like, all right, how do we grow to have design systems

Eddie:

that meet the company of today?

Jennie:

Mm-hmm.

Jennie:

so much scale, so much expansion.

Jennie:

So much complexity.

Jennie:

Yeah.

Jennie:

A lot of

Eddie:

stuff.

Eddie:

Balance, exactly.

Eddie:

Mm-hmm.

Eddie:

Jenny, thank you so much for joining us today.

Eddie:

It's just been a pleasure to chat and get to know you, your story, and kind