Marco Suarez is a Staff Product Designer at Etsy where he supports their products through design systems. Marco is also the owner of Methodical Coffee, a specialty coffee shop and roaster. He lives in the small but not too small city of Greenville, SC with his wife and two daughters.

Follow Marco on Twitter

Episode Transcript

J Cornelius: Hello everybody. I'm excited to have Marco Suarez from Etsy. He is a product designer there. So excited to have him on the show today. Hey, Marco, how're you doing?

Marco Suarez: Hey. I'm doing great.

J: I'm glad to have you. So, as a way of getting started, tell everybody your background and how you got to Etsy, and what you're working on that's exciting.

Marco: Yeah. I'm a staff product designer at Etsy with emphasis on design systems. I've been with Etsy for just over three years. And actually arrived at Etsy by sending an email to the, at the time, creative director, Brandy Hunt, years ago. I was working at a startup that was kind of an eCommerce similar, like market place kind of style site and I've been an Etsy seller, as well, since 2007 and always loved the product and the company. And so, I thought I'd just shot in the dark send an email to the creative director, ask them some questions. And from there we built up a relationship and several years later I got an email from another designer there that I was friends with about working there. And here I am.

J: Very nice. So, you're not just someone who's designing the product but you're actually a user of the product.

Marco: Yes. The Etsy mission is something that is very close to my personal mission in life. And also an artist and sold my artwork on Etsy. And I've been using it since almost it's inception. It was started in 2005 and I've been a seller and active member since 2007.

J: Yeah. So, you've got quite some time on the platform. By this time you would guess you know your way around and know what works and what doesn't work. And-

Marco: Yeah.

J: I guess that gives you kind of a unique insight into what it's like to be an artist on Etsy.

Marco: Yeah. I hope so. There's the whole ... It serves a wide audience. I can probably speak for a very small percentage of users but yeah. It definitely does help to be a user of your own product.

J: Yeah. Exactly. So, can you talk a little bit about how you approach designing new things or even updating old things at Etsy? What is the process around deciding what you're going to work on?

Marco Suarez: Well, as far as our roadmap, it's determined by our business goals. And Etsy's a place that designers and engineers and product managers all kind of have a say in what they would like to work on. And so, every team develops their own roadmap around whatever the team is working on. And a lot of times that involves maybe not a project where it's just taking a feature that is outdated and updating it, but it is like, "Well, we want to do this with this feature but in order to do that we need to give it a visual refresh and bring it in line with the rest of the Etsy experience." And that is like ... The consistency is definitely a part of what we want to create on Etsy, what we're working on, but it's usually folded in with some bigger initiatives.

J: Yeah, sure. And so I guess this is where the design systems piece comes in is creating consistency across all the different ways that you might use the site and all the different properties that you manage.

Marco: Yeah. That's right.

J: So, I heard a story recently about Etsy has traditionally been known as a platform for Indie artists. And then, as many people probably know, went public some time ago and so there's all the business goals that come into that. There's different set of pressures that happen when you're public as opposed to when you're in startup mode. And one of the things that happened as a result is that now, other corporations can put their products on Etsy. So, that's kind of shifted what Etsy is known for. How have you seen those goals change? And then, what are you doing to design kind of a new state of Etsy or a new chapter of Etsy for these new business goals?

Marco: Well, I don't know about the terms of service, I think you're referring to where there's certain requirements that you have to meet in order to be a seller on Etsy. And that has evolved over the years. But a lot of that has evolved because we don't want to punish people for growing. And if-

J: Right.

Marco: A seller is starting out as just a one person shop and eventually they grow so large that they're hiring employees and they're not necessarily the one making the thing anymore but they're the one designing it and running the business, we don't want to punish that person. And so, we want-

J: No, of course not. That's what you want.

Marco Suarez: Yeah. Exactly. And so, we want to grow along with them. And so, we ... I know we've structured things to match that and to meet people with wherever they are in their business. We have a wholesale part of our marketplace and a manufacturing one to connect sellers with ethical manufacturers and stuff.

J Cornelius: Oh, very nice. So, it's more than just the eCommerce side that most consumers would see where they're shopping for artwork or jewelry or something. There's a lot more to the platform.

Marco Suarez: Yeah. I mean it's ... They call it the Etsy economy where there's a little piece of, there's like if a seller is making their own thing, where are their supplies coming from? We want to make sure that or we want to help them or educate them on how do you source materials.

And so, we have Etsy Studio, which is a marketplace for supplies. And then when they're working with manufacturers, we want sellers to consider things like labor practices and who's making this stuff and what are the conditions that they're being made in? And so, this manufacturing segment of our business is to help connect manufacturers to our conscious of those things with our sellers. And the wholesale is like as you grow you want to be able to offer your products to re-sellers. That's the wholesale market.

And then, even with pattern, which is allowing you to build your website, your personal website, through Etsy. And then we also have, this year we've rolled out a big update to all of our seller tools. So, trying to build Etsy into a powerful platform that remains useful to a seller no matter where they are in their journey.

J: Yeah. That's super interesting. That's a lot more than I thought Etsy did, really. I know I always viewed it as a marketplace for Indie sellers. But-

Marco: Yeah.

J: I guess having grown to the size that you are now, there's all of these other kind of user tasks and user journeys that are, that you need to service-

Marco: Yeah.

J: And you have to think about.

Marco: Yeah. That's exactly right.

J: So as you're thinking through all those different user types. I mean, you've got the individual kind of solo person maybe making bracelets out of their garage to a larger company that could be producing all kinds of things. How do you balance those different needs as you're thinking about what you're going to do to improve the platform?

Marco: That's a great question. One that we're ... we try to make our tools easy to use if you aren't very ... For instance, if you're wanting to advertise on Facebook or Google or something like that, we have tools that allow you to do that. But it can get really complicated really quick. And so, we want to make sure that the tools are useful to someone who just wants to turn it on and just let it go and be helpful and useful to them, but then also if they want to dive in deeper than they should be able to. So, it's a balancing act of making sure that we're taking care of power sellers, the people that want to really dig into every detail and people who are just kind of learning.

J: Right. Because it's-

Marco: And it's a difficult balancing act.

J: Yeah. It's kind of that concept of smart defaults, right?

Marco: Yeah.

J: You want something that works out of the box.

Marco: Exactly. Yeah.

J: So, are you doing active usability studies or are you, how do you test things with users? Is there a beta group or what's happening there?

Marco: It really depends but we do all those things. So, we have a whole research team and they're constantly doing research into global markets and I think every year we run, we do these white papers on our different parts, like holistically how does our site ... usability tests for the entire site. And then we do user testing whenever we're developing features or our projects. And that is, we bring in people.

We have weekly user testing where if you want to add your work to the user testing, then you can do that. We also have beta groups. Etsy has teams, this concept of teams. And it's mostly for sellers to get together and it's like every city has a team and stuff like that. And so, we also use that for rolling out beta features. So, we'll find sellers to join this beta group through our teams on Etsy and then use that as the sounding board for all of our work. And-

J: So, teams are groups of sellers on Etsy that might be organized around some geography? Or maybe, are there teams based on the types of products that they're selling or-

Marco: Yeah. It's-

J: Maybe the size of the organization.

Marco: Yeah, it's, you can make a team about anything. And, I mean, there's, I don't know how many teams there are, thousands I'm sure. And so, there's this kind of self organize. And they will be around geography or the kind of thing that they're creating. It's just a place for them to build community.

J: Oh, interesting. So, they're self organized?

Marco: Oh, yeah.

J: Huh.

Marco: The sellers on Etsy are absolutely incredible. It's a very vibrant community and a very loyal community, too. I mean, a lot of sellers have been selling on Etsy for a long time. And so, this is kind of where they find community and camaraderie with other Etsy sellers.

J: Okay. So, with these teams, when you and the other people on the design team are thinking about rolling something new out or updating exciting feature, how do you choose who to talk to about that?

Marco: So, the ... We work with our analysts and researchers to figure out what is the, who is this feature targeting and try to create the right sample. And then we'll invite those sellers to join our team for this beta project. And then there's a whole list of introduction of what the feature is, what we're trying to do, and then a way for them to provide feedback. And it's kind of the way we can communicate with them, as well.

So, we'll post a channel about like, "Hey. We're working on this. Love to get feedback on this specific thing." Or a way to gather insights as well, like, "What is your experience when you're trying to do X or Y?" It's just a really useful tool and it wasn't really created in this way. It's kind of like we internally co-opted this idea of teams in order to have a close tie with our community. But yeah, it's just a way to have a tight communication in a close setting with our sellers in a way that is easy for them to join and to get involved in the production of features and projects.

J: Yeah. So, it sounds like you've done a lot of work to eliminate that friction of getting feedback from users-

Marco: Yeah.

J: And being able to listen to them in kind of a friendly and intimate setting.

Marco: Yeah. Yeah. It's extremely helpful. Yeah, it is huge.

J: So, can you talk a little bit about the kind of things that you hear from users and how that influences your decisions on what or how to build things?

Marco: Yeah. So, I think workflow is, especially for, so for sellers, workflow is a really big thing. A lot of times, designers will pay visits to sellers and check out their workspaces, hear about their process. The big thing is understanding where it's important for us to be involved in what they're doing and when it's important for us to get out of the way.

J: Right.

Marco: And a lot of times, that is, requires us just spending time with them in their space. For buyers, that is a bit different. This is where we do a lot of user testing and also looking at our mobile trends and desktop trends and where people are doing their shopping or purchasing. And the ... They're very different, the buyer side and the seller side. So, it typically requires using different tools in our toolbox to get the right kind of data.

J: Right. Do you mean different research tactics or ...

Marco: Right. So, doing user testing on particular devices and finding particular shoppers on Etsy to help us learn about something we're trying. Or with sellers, going to where they work and paying a visit with them. Or using A/B testing, like experimentation, to get also insights. The A/B testing is super helpful on the buyer side. We just want to make sure that we're using the right type of inputs to form our decisions. So, it's not just a matter of what is trending on eCommerce sites or what we just internally feel is the right thing to do, but using the inputs of our, the people who are going to be using this every day-

J: Right.

Marco: To determine what the best solutions are.

J: Right. So, one of the things I find interesting is that you go and visit the physical spaces where these people are making things and you're looking at more than just the experience on Etsy. You're looking at their total life cycle of when they make something all the way through to when they've delivered it to a customer to see where you can fit best.

Marco: Exactly. You know that sometimes sellers, they want certain points of interaction on their phone and that's really helpful to them. Other times, they want to be able to sit down at their computer to really focus and think about their task. So, when is it appropriate for something to be, have a desktop experience versus a mobile experience and where do we need parity and that kind of thing.

J: Yeah. I imagine that can lead to some super interesting insights into what features go into desktop versus which features go into mobile-

Marco: Exactly.

J: And then what level of fidelity do you build those things in different platforms.

Marco: Yep.

J: And so, you said that you are primarily on the design systems team. Can you talk a little bit about the design systems that you're using and how you've seen that impact your workflows or impact the quality of the product that you put out?

Marco: Yeah. So, our pattern library, our component library, was created a few years ago by a team on our seller services side of the company. And it was kind of a, just everyone kind of knew this would be an important thing to have but there really wasn't, it was hard to get buy-in for it as a project. And so, they baked it into, "Okay. We're redoing this part of the seller services tools. Let's, at the same time, create a component library."

So, they did that and it was very successful. And we turned it into a working group and kind of opened it up. And that's when I got involved. And for a period of about a year, we, as a group of volunteers, worked on our design systems. And it was kind of slow moving. Really good work but at the same time, because it was not anyone's primary focus it just took a long time to do anything.

J: Sure.

Marco: So then we decided to form a design systems team and I moved onto that team and built it into ... It started with me and grew into about a dozen people. And the reason why we got so much momentum was because we saw how much easier it was to build once we had this component library.

And there's this great example of one of our designers, Jess Harley, wanted, we were work, wanting to kind of give our buttons a facelift. And a button is the most basic component and you shouldn't be constantly redesigning your buttons. A button is a button. You should just design it and leave it. But the, because of the way our buttons were built, it was really hard to update them. And so, they sat for a long time and they really needed a visual, a facelift. And I can't remember how long it took her, but she, it was an insane amount of code that she had to touch in order to just give a visual facelift to our buttons. I mean, it was absolutely ridiculous.

And that was a great example of why it's important to use a design system like a component library, which, if we had that implemented across all of our entire site, it would be a five minute change.

J: Right.

Marco: It took I don't know how long, days if not weeks in order to change our buttons. So, as we've gotten things on our, we call it our web toolkit, our development has become a lot quicker, engineers and designers are able to move a lot faster, because it's, I mean, there's no discussion of what a button should look like because you just use the button component.

Then, also this past year we redid our UI color palette and our ... The primary thing was our buttons and text links color changes. And on the pages that were built in the toolkit, we were able to do that very quickly and easily. On the pages that weren't, it required months of work. And we also ran this as a, we wanted to measure the impact of this change. And so we ran it as a AB test. And in order just to do that, it took a long time to set up on the pages that weren't on our toolkit.

And so, the thing that was really convincing to me or the light bulb went off was when I started to observe and experience this pain of not using a pattern library or a component library or whatever you want to call it. The once you realize just by following convention you are able to move so much faster and your work is a lot more thorough and you're building a better product because things like accessibility are just automatically baked into the component library.

J: Mm-hmm.

Marco: So, you don't have to necessarily, I mean, you think about those things but you don't have to do the work over and over and over again. You do the work once and then you benefit from it forever. And as the website is, we're still converting the website over to this, and it's just becoming more consistent, it's becoming easier to work on, easier to update, performance is faster. It's just countless benefits and it's a lot of work to update pages but what you're setting yourself up for is a faster iteration in the future.

The big thing that I've learned is you have to show short-term gains along with the long-term gains. And a lot of people have a hard time buying into a design system because it seems like this is something you're going to sow for a very long time and reap at a much later date. But there are plenty of quick wins that you can gain from a design system. And that's the, one of the biggest learnings is there's value in both the short-term and the long-term. It doesn't always have to be a long-term value.

J: Sure. Like in your case, you were saying just start with buttons. Make buttons easier to update-

Marco: Exactly.

J: And then that has a far reaching implication for how fast you can move as you're updating other things.

Marco: Yep.

J: And that's pretty interesting that the pages that were already on your toolkit, you could update those in a matter of days or maybe weeks, whereas the old pages that didn't use that, it took a matter of months and that's probably a lot of person hours multiplied times a lot of work, and that's a significant efficiency difference.

Marco: Yeah. I mean, I would say that you could update things in a matter of minutes. I mean, you could create site wide changes-

J: Oh, that's even better.

Marco: In literally a matter of minutes.

J: Yeah. I mean, that's so much better than taking weeks and weeks to re-write code for a lot of different elements.

Marco: Yeah. And it allows designers to also focus on the user experience in a holistic way and not have to spend so much time on the UI.

J: Right.

Marco: And whether it's with content, flow, the user journey, more time for user testing, it just, it removes the repetitiveness of UI design.

J: Sure. And like you said a moment ago, also you get accessibility built in, right?

Marco: Yep. Exactly.

J: Which is that thing that is very, very easy to overlook, especially because it's not right in front of you. You see the color and you see the shape of a button or you see the size of text, but it's not immediately apparent that there's this whole other world that needs to be considered for people who don't see things the same way that you do.

Marco: Yeah. Exactly. It's a, you don't realize how much the population that would benefit. And that's something that is sometimes difficult to get designers ... Designers kind of pride themselves on being empathetic, but something like accessibility is constantly overlooked. And it's a huge portion of the population that would benefit from simple things like color contrast or type size or making sure that you're able to just tap through, in a very logical way, a page.

J: Yeah. There's all kinds of things. It's kind of like the round versus the lever doorknob, right?

Marco: Yep.

J: The lever doorknob is obviously easier for people with arthritis or people who limited mobility, but it's also for a fully abled-body person who just might be carrying a bag of groceries.

Marco: That is absolutely right. It's a very, it benefits everyone. And it's not just a focus on a small group of the population but it's, you're right, it will benefit everyone.

J: Yeah. So, it sounds like through your implementation of the design systems and pattern libraries, you're not only getting efficiency gains in terms of how rapidly you can get changes out into the wild, but you're also kind of the order of magnitude on all of the accessibility enhancements that you can have just kind of by default.

Marco: Right. We have an accessibility team that we work with that writes our guidelines and helps us in the development of our components to really go through it and make sure that we're crossing every T and dotting every I. But yeah, that is the ... We want accessibility to be the work of everyone. But we have a team that specializes in it to help educate everybody and get them to think about that from the very beginning.

J: Yeah. Sure. So, as you've been rolling out the new pages and new components using this design system, you mentioned performance, you mentioned a number of other benefits. What have you heard from the sellers and the buyers on the site in terms of usability or how their just general experience of using the site has changed?

Marco: It's pretty nuanced. So, when we've ran the experiments for the color test, we were just looking for a neutral change, which is exactly what we got. A lot of times, these changes just get you neutral results. It's more of the ... It's not so much the toolkit that is what the beneficial part it, it's the what you can now do because you're using the toolkit. So, it allows us to make user experience improvements and user journey improvements in a very rapid pace.

So, as far as actually changing, switching things over to the toolkit, most of the time it's not noticed. It's noticed by designers who can tell like, "Oh, this drop down looks slightly different." But when it comes to improving the usability of a drop down, you can now do that at a site wide ability very quickly because of using the toolkit. So, it's a ... it's because of what you can do with it, not necessarily inherently improvement, which I'm sure there are improvements, I'm just not-

J: Well, I think that's-

Marco: Aware of them.

J: An interesting point, though, is that you can make these changes and you can implement something that is very driven by design standards and not disrupt the existing usage of the application. But then, over time, because you can now move faster and you can test more efficiently-

Marco: Yep.

J: It sounds like you're able to get more things into the wild, actually release more stuff that's helping to drive the business.

Marco: Right. So, I mean, my whole thing is it allows you to build better products faster.

J: Right.

Marco: You're able to build better products because you're starting at a really good baseline by using the toolkit, but then you're also able to iterate and improve it and improve the experience a lot, lot faster. We, when using old code, yeah, it would take days if not weeks to get something ready for an experiment. Whereas now with something in the toolkit, it's in a day. And you're also, your data's going to be a lot more, it's going to be a lot more true because you don't have all these weird factors that could mess with your data like conflicting CSS or conflicting, I don't know, Java Script or something like that.

J: Right. So you don't, you actually spend more time creating things and less time trying to figure out why it didn't work.

Marco: Yeah. Exactly.

J: Yeah. So, kind of wrapping up, what kind of gains have you seen in the efficiency of the design team itself and communication across to development or engineering or support? By standardizing a lot of these tools, how does that help you communicate within the team?

Marco: Yeah. It's actually ... So, this is the part that I've been the most interested in this year, which is kind of everything that leads up to the point of creating or the point of coding and see how design systems bleeds over into all of that. So, communication is a big thing that I've been interested in this year. And how we talk about design, how we critique each other's work, the language we use, what we value in design. And kind of realizing that every designer comes with their own perspective and their own values of design and their own preferences. And a lot of times we, I mean, most of the time if not all the time, we use those preferences in our, how we talk about design.

J: Mm-hmm.

Marco: And so, as a team, I think it's important to have those perspectives but also to have alignment and a shared understanding of what we, as a design team, value in design and how we talk about design, and what we're all trying to achieve. Because that, oftentimes, is subconscious or it's kind of under the carpet that we don't really talk about and without some prodding and some poking to figure like, "Oh. You're actually, you're valuing something very different than what I'm valuing."

J: Mm-hmm.

Marco: And so, a good part of this year we worked on our design principles in order to give us a way to measure our work. It's given us a yardstick that we can hold against our work and say, "Okay, how good is this?" In a very, as objective as possible, how is this performing? Or, how is this looking outside of user testing and A/B testing and that kind of stuff? Like, how are we grading our work? And then, having developed a process and a visual language.

And the visual language has been really, really interesting, which I'm in the middle of working on right now, and that is the ... I kind of compare it to a spoken language where it has a vocabulary, which is the actual components themselves. There's the syntax, which is the rule around how you use those, your vocabulary. And then, there's the semantics, which is what you mean. And the semantics part is, most design systems have the vocabulary or the components. And a lot of times, a design systems is in there.

And we, at the end of last year, started developing these guidelines around things like topography and iconography and color. And then, now we're getting into the semantics part, which is the aesthetics part. When do we use shadows and why do we use animations? What are we doing with that, that is more than just an arbitrary design decision?

J: Right.

Marco: So, for me, I'm caring less and less about the aesthetic of design and more about what is the intention, or what are you trying to do or communicate, or what is the logic behind the way this looks and behaves? And that is what's going to create a lot of consistency across the design team. If the design team understands how to design and how to design for this brand or for this product, then your conversations are going to be a lot faster, your critiques are going to be a lot faster. There's not going to be this circular design debate that goes on between designers because you'll know. Which color is our primary color? When is it appropriate to use animation? How should that animation look and behave?

J: Right. Because all those rules have already been defined.

Marco:  Exactly. And then, it can be critiqued and refined and iterated on and bettered outside of our minds. A lot of those design decisions are made in our minds and we understand it, it makes sense to us. But then, when you try to pull that out and communicate it to other designers, you get all jumbled up. So, being able to document that and get it out and you're no longer critiquing a designers abilities or their tastes, but you're critiquing the visual language for this brand and product.

J: Right. So, that kind of gives you a framework to have that discussion where you are not looking at what that individual contributed, but you're looking at what that individual's contribution meant to the overall outcome for the person who's using the product.

Marco: Yeah. Totally.

J: Yeah. And that's a huge, huge change in the way a lot of people think about design. Because a lot of people, I think, are still focused on it being very visual when you ... We talk to clients all the time and they say stuff like, "Well, I don't really like the design of that." And what they're trying to say is, "I think the blue is too dark," or, "I think there's not enough white space," or, "I can't read the font," or something along those lines.

Marco: Yep.

J: It's still very visual but not very outcome based, right?

Marco: Yeah. And you got to have a reason behind why you chose that point size and have like, "This is our type scale. It's a ... Our baseline is 14 point and this is our H1 and H2 and H3," which it's shocking how rarely those things are defined still. Web designers or product designers are creating these really beautiful layouts but then when you start digging you realize like, "Oh, this isn't going to work across an entire product."

J: Right. Or things like the spacing around elements-

Marco: Yeah.

J: Or between elements.

Marco: Oh, yeah.

J: And all that stuff really matters. And consistency in that stuff really matters and that's what gives you that kind of imperceptible feeling of quality.

Marco: Yep.

J: Is that little bit of visual consistency.

Marco: Yep. That's right.

J: Yeah. Cool. Well, hey, we've really enjoyed having you on the show today. If somebody wants to reach out and chat with you a bit more about stuff or just kind of get in contact, what's the best way to do that?

Marco: Yeah. You can find me on Twitter. My handle is @marcosuarez. Also, anything that I've been learning, I've been posting to Medium. Try to create discussion and just share the stuff I've learned. But yeah, that's about the quickest and easiest way to contact me.

J: Cool. Well, we'll link that stuff up on the show notes and look forward to having you back on the show at some point, maybe in a future season and hear more about what you're working on.

Marco: That sounds great. Thanks so much.