Back to Podcast List

1. What are Design Systems?

Episode 1 - December 09, 2019

In the pilot episode of the Design Systems Podcast, host Chris Strahl talks with Evan Lovely about design systems as a whole. What are they? Who are they meant for? What are the benefits? And more.

Guest

Evan Lovely

CTO and Co-Founder, Basalt

Evan Lovely's Stats:
Evan is the CTO of Basalt. His pragmatism and craftsmanship are contagious within project teams. He believes that encouraging creativity, tinkering, and close collaboration leads to the most elegant solutions. A respected and trusted resource in the tech community, Evan is the Pattern Lab PHP Maintainer, an open-source platform for static site generation using atomic design.

Show Notes

  • In this episode, the guys are drinking Migration Brewing's Straight Outta Portland IPA.
  • If you have questions, topic or beer suggestions, you can find us on Twitter @TheDSPod.

Episode Transcript

Chris Strahl:

Welcome to the Design Systems Podcast. We're all about the places where design and development overlap. We talk with the industry experts about trends in design development and take a look at new ways to build digital experiences, typically over a beer or two.

Before we get started, I wanted to take a second to introduce myself. I'm your host Chris Strahl. I have a little bit of street cred in the digital space. I've been working with the web since I was in middle school. I had one of those old Mac LLC3s way back in 1995 that I used to make my first website. I think it was in Netscape Navigator 4, I was a coder first and then I turned to business. I've managed a lot of designers and development teams over the years. Most of my time has been spent in agencies or startups, either building products for the web, or literally building the web itself for really large enterprises, folks like the Obama White House, Time Inc. The US Department of Defense, et cetera, et cetera, et cetera. I started my current company with my two co founders based on the idea that we're building the web the wrong way.

Even with the web being about 25 years old, a lot of people still think that web design is building a bunch of pictures of websites that ultimately developers end up turning into websites. There's this idea that design and development are actually separate disciplines that have this big wall in between them. One creates things and the other builds things, but I really think that design and development are two sides of the same coin. Everyone is developing. We're just doing it in two different languages. Design systems are a big part of this change in this trend and that we're trying really hard to use design systems as a way of bridging the gap between design and development so we can do cooler stuff faster. And we can start thinking about components and the ways that we deconstruct our notion of pages into reusable pieces instead of just posters that we try to make work on the web.

Chris Strahl:

So a little bit about this podcast. This is our first round, so please bear with us as we kind of get our footing here. This is a product of Basalt, a company I helped co-found but the focus isn't about the business side of things. It's about having some great conversations, usually over a beer or two with some interesting people that have points to make about design systems and how they use them. We want to hear about things like designing for equity, building into accessibility, automation, design ops, QA testing, and even some stuff about software architecture.

Today we're talking with Evan Lovely. Evan's the co-maintainer, the design system tool called Pattern Lab. He's going to be talking to us about the origins of design systems, what they are, why they matter, and what kind of tools enabled them. Evan, Hey man, welcome to the first pod. Tell our listeners a little about yourself.

Evan Lovely:

Thanks for having me on. Just besides kind of living, sleeping, breathing and dreaming about design systems, try to be able to hike as much as I can, hang out with my son and wife and kind of just enjoy the great Pacific Northwest.

Chris Strahl:

With that man, let me dive right in. Let's talk about what a design system is. How do we view them? What's your take on them? Tell me a little bit about what this is all means.

Evan Lovely:

Wow. That's a big concept there. So design systems are really, it's kind of an umbrella term that has a lot of concepts together underneath it. And it really boils down to repeatable solutions for commonly reoccurring problems. Everything from, hey, what are some common colors and typography's, to what's our voice and tone, to what are some reusable components for a common UI components that we come across in the web as we designed for it.

Chris Strahl:

So what form does this take? Is it code, is it design files, is it a whole product? What does this look like?

Evan Lovely:

Like I said, there's the a collection of a lot of different kind of tools and decisions. And so I would say that most of the time it's going to be code. We are talking about websites and apps and these are created with code. So this is the medium that it's destined for.

Chris Strahl:

So talk to me a little bit more about what you mean by the medium it's destined for. Are you talking about what users actually consume? Are you talking about what designers build? What does that actually mean?

Evan Lovely:

Well, when I talk about the medium, it's destined for, when we talk about film, it's video. When we talk about things like podcast, it's audio. And when we talk about the web, we have a medium that is resizable. It has animation, you can interact with it. And when you think about posters, you don't have some of those pieces. And there's advantages and disadvantages to each medium. You're not able to click on a part of a poster to see some more details, but you can't resize it and change it around. And so it's kind of about embracing that medium because it is a fluid medium. It changes size, the content can vary. And like I mentioned, it is interactive.

Chris Strahl:

So you and I have had tons of conversations about why we think this is the future of the way we build websites. Can you talk to me a little bit about your point of view on why design systems are so important to the way that we build the web?

Evan Lovely:

Yeah. Well when you are creating for the web, what you're doing is making a lot of these different design decisions and they are applied in a lot of different places. And good design inherently has consistency as a hallmark there. And a lot of time it's kind of just something that is done, inferred, under the hood kind of behind the scenes subconsciously. And with design systems it's about kind of formalizing that and making sure that it is a known decision that you want to be able to do and scale across all of your different innovations and design.

Chris Strahl:

So when we talk about websites and digital development be that native apps or whatever with new customers, you often time equate this to building a house. And so you think about the foundations of it, you think about the framing and the structure, you think of the blueprints, all these other sorts of things. And so a lot of this does come from this historical precedent of the idea of, of architecture. And, is that what's really the Genesis of this concept of design systems? Talk a little bit about the history.

Evan Lovely:

So there was a book written in the early 1900s about, ya know, designing towns and houses long before the internet ever came around. I believe it was called A Pattern Language. And what a pattern is, is it is a solution for a commonly reoccurring problem. So for example, when we talk about houses, there is this common problem about how humans get from one floor to another, which sounds kind of silly, but hear me out.

And the common solution is stairs and there are a couple different kinds of stairs. And so one really common pattern for how stairs are put together is, you have a set of stairs that go up and then you do 180 degree turn and then you come back up an equal distance and then you're up on that second floor. And there are a lot of different styles of houses out there. But think about how many times you've seen that pattern. Another pattern of course is, the circular one that kind of keeps going up. But the point is is that these are common solutions to commonly reoccurring problems. And that's basically what a pattern is. And that is what these patterns are on the web as well, is that the people that come to these sites have a problem, they have a goal, and it helps to have a common repeatable solution for them.

Chris Strahl:

So you'd almost see a stairwell being analogous to something like , a menu item in a top level navigation, right? Where you look at that and you say like, "I want to go to a particular place now, here's the common design pattern that gets me there." And that commonality in design pattern is important because that means that people will have to learn less every time they interact with that design pattern. Do you feel like design systems are a way of perpetuating those common ideas and those common patterns in a way that makes it so that it's better for users and how is it better for those users?

Evan Lovely:

Yeah, absolutely. If you as a user are going from site A to site B to site C and you see this a main menu at the top of each of them and they all have a big bold word with a down arrow, you probably know to hover your mouse over to get to some more options there.

And so that really helps out because no one's going to read the instruction manual for how to use your site. And so it's really important to be able to have that intuitiveness as users go through. And it's not just about these common patterns in between all sites across the internet, but as you have these different patterns for your brand and how people should be interacting with your application, it really helps to be able to have some consistency. It helps users feel at home and they're more likely to use it because if people don't use it, they're going to hit the back button and head on out.

Chris Strahl:

As always, this podcast is brought to you by Basalt. A full service digital agency. Basalt is committed to building a better web and specializes in creating design systems. Learn more at Basalt.io.

So I want to pause for a second for our unofficial sponsors. Cheers Evan, great to be drinking a Migration Straight Out of Portland IPA for our first podcast. Got to say pretty darn good beer. If you guys have any beer recommendations for us for future pods, check the show notes. We always try to make sure we have a little bit of creative juice flowing in more than one way. All right, so switching gears for a second. Thinking about the use of design systems. So transitioning kind of from what they are to the practical application of these ideas. What is the benefit to having a design system for say any company that wants to go about transitioning from a page based model to a component based one?

Evan Lovely:

Well, what I kind of like to think about is this classic card pattern or card component. And we see these all the time. Usually you see they have a title and image, a body and like a little button call to action. If you think about the way that, what different kind of content can be in there. And a good way to have these components and these patterns is to have the content to be kind of separate from them. And so you have a card that can be used as a blog teaser or this card could be used as an event promo, or this card could be used as a staff member.

And so all of them have an image, whether that is the staff member's profile, picture, event promos, kind of venue pic or the blog teasers kind of featured image. And so having that layer abstraction so you can use the card for all three of them prevents repeat, reinventing the wheel, repeating yourself. And so that lets you have good consistency across your brand. Users intuitively know how content is teased and that they should look at it and then also developers can be able to save time making all of those and also fixing the little bugs they come across.

Chris Strahl:

Yeah, that's an interesting point because lots of people think about the way that they build sites is having a blog teaser independent from an article teaser independent from a staff bio. And what you're really talking about is how all these things are logically the same thing. We've just have traditionally thought about them differently.

Evan Lovely:

So you want to be able to have the logic separate and you have kind of the business logic of we want our most recent blog posts shown and then sorting on older and then the events are going to be kind of, their dates are going to be flipped around. And then the staff members would want to have, maybe alphabetical or by department. Whereas the presentational logic of if there is an image show it or if it's dark, make it a dark background or something like that. And my point is is that you want to separate out the presentation logic from the business logic and if you do that then all of these business logic pieces can share a single presentation logic.

Chris Strahl:

In this case, your teaser is completely ignorant of the content that's going into that teaser.

Evan Lovely:

Exactly.

Chris Strahl:

But it's also able to have some business logic happening somewhere else away from the design system that is saying, how do I order this? How do I display this differently in some interesting way.

Evan Lovely:

Yeah, absolutely. And you don't want to get those too mucked up because then it's just no good.

Chris Strahl:

So it sounds like there's a lot going on when you talk about this idea of all these different groups all trying to decide how they interact with the design system. Talk to me a little bit, how you manage that.

Evan Lovely:

Yeah, absolutely. It can be a little confusing when you're thinking about it in the traditional, let me take a look at these different pages in my CMS or my app. And really what you need is to be able to have a common place that's separate from these websites and these CMSs where you can be able to take a look at them. And the big things that you need would be, documentation and specifically self updating documentation. It's very important. But also a pattern library. And so what we mean by a pattern library is where can I look at this card by itself separate from it being a blog teaser or snap promo or an event promo.

And then also, how can I look at it in all of its different variations, both with short titles, very, very long titles. Sometimes- there's no image...

Chris Strahl:

German titles.

Evan Lovely:

Yeah, exactly. Being able to take a look at all these scenarios that will end up kind of, breaking and making sure that you can account for them. And so what we're talking about is basically just a place that's in the medium it's destined for, web, and then also just excels at dummy data. Let's just go ahead and get some silly images and some like long Lorem Ipsum text in there as titles.

Chris Strahl:

So how do you, even as a design and development interaction, how do you even know you guys are talking about when you're talking about what a card or a teaser or a button or a call to action. And by the way, before you answer this question, I want to do it definitively button or call to action?

Evan Lovely:

Okay. So well it's, the answer is both. And really it's about what you as a team all agrees upon because that's the most important.

Chris Strahl:

It's about sharing and understanding of that concept.

Evan Lovely:

Absolutely. Absolutely. And I mean, you could call it a fizz buzz if you want to, but as long as everybody's consistent, then you're good to go. And so I wouldn't recommend that. I think that button makes a lot of sense to a lot of people. So, but it is about basically making sure that the designers aren't referring to it as a media block and the developers are referring to it as a card. You're basically making sure that you're using a shared language, because at the end of the day, what we're talking about is something that is subjective that is in people's heads. And so they don't really have a place that they can point at it that's outside of their heads and say, "Hey, that is what I'm talking about when I say media block or card."

And so we have this subjective subject that needs to become objective and having a single spot where you can be able to take a look at it and having it out all outlined being like, all right, you can go here to see these different components and these are different names and you can see them really, really helps the communication.

Chris Strahl:

So I have this shared place for code, for design, for documentation. What else is it good for? Is there anything that I could do, we've talked you and I about things like adding analytics to this or adding another set of higher order ideas about how you go about using this to do really interesting things. Can you talk a little bit about what those are?

Evan Lovely:

Yeah, absolutely. If you have a single place that you have your card and it is getting pulled in as the event promo and the blog teaser and the staff member on this one site and it's on lots of different pages and then you also have multiple other sites that all pull in that same thing because you're some enterprise customer that is using this across a lot of brands and then you need to be accessibility compliant because it's, either the law or it's just a good thing to be able to do because people who have colorblindness or they aren't able to use a mouse, are not able to get to your stuff.

You're going to get tens of thousands of errors across every single blog teaser, every single event promo. But instead, if you can go to a place where just your card is at and find out that you're not able to use a keyboard to navigate through your card or that there's some color contrast issues, you can fix it at the core of where it's at and then have that fixed propagate to all of those things. You're going to be able to benefit a lot of different people and a lot of different users with a little bit of time.

Chris Strahl:

So the Domino's Pizza problem, if you will. And if you're not aware, Domino's just had a major legal hurdle with their accessibility compliance for their pizza ordering system. And so they've been ruled that they have to be ADA compliant for these sorts of things. So, it's interesting to see how these things are seeing to come to the forefront of the way that we think about the web and how design systems enable way more than just your consistency of your brand.

Evan Lovely:

Absolutely. It's, I mean, access to that information is a right. That should be equal for all. Instead of only people who have the right faculties or the right equipment or the right access or should be able to get access to. It's for everybody.

Chris Strahl:

So who are design systems good for, then in terms of this, right? We've talked about folks like Domino's and other large enterprises. I mean there's obviously use case for them and I want to hear about some really good examples there, but where do you really feel like these things shine and show up right now?

Evan Lovely:

Yeah, I mean that's scale usually. And I think that the concepts are fit for all because whether a designer and developer know it, I mean they're probably using some of this, it's just about how far they take it. So good design is consistency. And most designers know this and whether they know it or not, they have kind of some consistent rules. They just might not have formalized those rules yet. And then good developers also know to not repeat yourself and to have a single source of truth. And now how far they take it and how well they implement it is another question altogether. So if you, I think even on some small scale, they might not have a single site where they can go and look at all of this stuff. But being able to use those principles of like not repeating yourself, is going to go a long way. However, to get to your question, I think that once you start to have, I don't know, maybe like three-ish sites or more, that's probably, if I had to really put a number to it.

Chris Strahl:

That's your tipping point?

Evan Lovely:

Yeah, I think that's where it makes sense. It's insane to not do it after that point. That's when you're really going to be hitting a lot of the pain points of trying to like scale the old model of having your event promo and your blog teaser and your staff member all separate across not just one site but multiple sites.

Chris Strahl:

So do you think about this as a product then?

Evan Lovely:

Absolutely. It's a product that serves services. I mean it's got releases, it's something that is, it's the work is never done. And it is something that is another kind of utility that helps people with these individual missions of shipping sites.

Chris Strahl:

So I want to give some folks, some examples to look up to. Who do you look up to in this place? It's like these people did a really great job on this. Or I mean even stuff that you've built that you've been like, this was exactly right.

Evan Lovely:

I mean, Airbnb always does some mind blowing stuff. It's, I think that it's kind of beyond the realm of what most people couldn't find useful. But they do stuff where you draw on a whiteboard and then machine learning takes a look at a picture of it and then turns it into code by applying it to the design system, which is just mind boggling stuff. They also have these react components that can compile down to sketch apps, and now who knows how much of that is more like experimental versus what they are using.

I question if that stuff is on Airbnb.com but that's the stuff that like I'll hear about it. I'm just like "Wow, that's like 10 years in the future just called me and told me what was up."

Chris Strahl:

So it sounds like you have a ton of time spent working with big enterprises and clients around this kind of stuff. What's a moment you've been super proud of in this space?

Evan Lovely:

So one of my favorite moments usually comes a little later in the project. It's at the beginning, we're setting up a lot of foundation. We're kind of getting a lot of rigor going. Sometimes people are new to this and they're going, "Oh well like usually we start to see stuff quicker." And I always kind of think that the old way of doing things kind of starts fast and finishes slow where people just start getting like paint splashed against a wall.

But it always just kind of, the 11th hour is hard. And with this, it's the other way around where at the beginning it starts slow and ends fast. And so we spend a lot of time laying some foundation. And so at first people are like, "Okay, well when are we going to see the thing?" And so it takes a little while and then we ended up kind of getting pages together, getting sections together. And then my favorite moment comes when they say, "Okay, well we had this unexpected section come up, it's got to take you as long as it took that other section because they have this linear preconception and they don't realize that there's a lot that we can harvest from that. There's a lot of repeatable components there. We've already made the blog teaser in the event promo and they want a staff section.

Evan Lovely:

And so we're like, "Oh, we got you a staff section." And so then we basically use the things that we've already made to put together that 80% that's common. And then we can spend that last little bit of time, that 20% of effort that is needed, that makes that section unique and it comes together so much faster that their head spin. They're like, "Oh, how long has this section going to take? Two months?" And we're like, "I don't know, maybe like eight working days." And they're just like, "What do you mean?" And we're like, "Well we already built it in this section over there." And then that big smile where they're like, "Oh my gosh, we can be able to put this stuff out so much quicker."

It's great because really what the web is, is it's a medium for people getting their ideas and their goals out and being able to push that stuff out and to be able to empower people where they can get that out quicker. And then seeing the smile on their face is kind of why we're doing this. And that always just makes me so happy.

Chris Strahl:

The feel good moment of the pod right there. So I mean obviously that takes a lot of work. That takes a lot of pre planning. It takes a lot of foresight. What kind of tools do you use to make that happen? What are the things that enable this sort of stuff to happen?

Evan Lovely:

Yeah, like I was mentioning earlier, I think that the Pattern Library where you can be able to say, hey, where is this card outside of it's CMS or its app? Where can I look at this, not needing a database or an API for it's content. I just want to be able to look at it in its isolation and I want to be able to look at it through a couple of different variations really is transformative and it's super helpful.

Chris Strahl:

Awesome. Well, Hey Evan, thanks so much for being here today. Looking forward to having you back very soon. Excited that we were able to take a minute and chat. Thanks very much.

Evan Lovely:

Yeah, thanks for having me. Always love talking shop.

Chris Strahl:

That's all for today. We'd love to hear from you with questions, ideas for new episodes, beer recommendations or comments. You can find us on Twitter at @theDSpod. Cheers and thanks for listening to the Design Systems Podcast.