Subscribe
Share
Share
Embed
The Question is a collaborative learning podcast about Design Systems. Smart people like you sign up, answer a few niche questions about design systems for each episode, and then we all get together to unpack the data we've gathered. Each week, I'll invite a new co-host to help facilitate the conversation. After the deep dive, the co-host and I record a recap of what we learned. That means, for each episode, you can listen to the recap and the full deep dive!
If you're a design system practitioner, subscribe today (https://bencallahan.com/the-question) to receive an invitation to each episode. This only works if the community joins in!
Stay in learning mode ❤️
Ben Callahan (00:00)
Hi everybody, it's Ben Callahan here with The Question and I am so excited to welcome my friend, Yesenia Perez-Cruz as my co-host this week. Yesenia thank you so much for being here.
Yesenia Perez-Cruz (00:09)
Absolutely. Thanks so much for having me.
Ben Callahan (00:11)
My pleasure. ⁓ So we're recapping episode 67. We just finished the deep dive with a bunch of folks on our Zoom call and in our FigJam, reviewing all the raw data that our participants submitted this week. It's a really fun conversation on design systems that differentiate. And Yesenia your book from a few years back on expressive design systems and your more recent article.
have been kind of inspirational for a lot of folks in the space. So I really appreciate you being here, sharing some of your experiences with us today. I ⁓ wanted to just quickly kind of read the questions that we asked folks. So we asked three questions this week. The first was.
Where do you most notice sameness emerging in your consuming products as a result of your design system? And we gave folks a series of answers. The first was overall layout and page structure. The second was visual hierarchy and emphasis, interaction patterns and behaviors, brand expression, personality, or I don't notice meaningful sameness. And then of course we gave folks an other and asked them to explain their answer.
The second question was which of the following best describes the primary goal of your design system today? And we made folks choose one of these. ⁓ The three options we gave were operational efficiency, brand cohesion, or product differentiation. And then we gave them space to say other if those, you know, if their primary goal didn't really fit into that categorization. And then the last question was more of an open-ended one. And we asked folks if you had to identify one specific part of your system's architecture,
that currently acts as a bottleneck to product expression, what would it be and why? We sent this out to 1027 design system practitioners. We got 55 answers. And as always, wherever to or watching this, you can get a link to the raw data and do your own analysis on that.
The answers were pretty split just sending out on that first question. I think that's, you I don't know. You never kind of know what you're going to get with these things. But did you have any expectations going into this or?
Yesenia Perez-Cruz (02:08)
Mm-hmm.
No, I mean, I think I because I mainly have dealt with the layout and page structure sameness, I was maybe expecting to see more that weighted more heavily. But I thought it was interesting that it was pretty even what people are seeing.
Ben Callahan (02:27)
Yeah,
basically they're seeing it. And was about, it was between like maybe like 30 and 50 % for all of these, know, ⁓ and so, or 40 and 50%, somewhere around there for all four of those It was an interesting question. think ⁓ we had right out of the gate, we had some folks saying, wait a second, don't we want sameness?
Yesenia Perez-Cruz (02:48)
Yeah.
Ben Callahan (02:48)
And it
kind of got me thinking, and I actually thought this would be really helpful for us to do. So that idea of sameness versus the concept of differentiation versus the title of your book, expressive, like, can you give us like, can you just like set the context for us? Like, what do we mean by these words?
Yesenia Perez-Cruz (03:03)
Yeah.
Yeah, yeah, absolutely. the way that I think about it is the interface that a user is interacting with look like the thing that they are doing on the device that they're doing it on? So if you are a set of shipping profiles, does the visual display of it look like
It's a set of ⁓ shipping profiles where you have visual cues that shipping profiles are connected to rates for specific regions. Or does it just look like a plain unstyled list? Or if you're looking at a list of orders, does it have the signifiers that represent, all right, I see an order number, I see fulfillment badges, I see images, I see prices. So that when I when I talk about distinct expression,
That is what I'm talking about where what you see is the content. The content hasn't been overridden by the shape of the component. so sameness is the shape of the component has overridden the content. And so I see a lot of interfaces where I'm looking at it. see a header. I see a list item one, a list item two. I see a footer and I don't actually see the content emerging.
like, this is actually a recommendation of an action that I can take, or this is a list of my drafts. Those can all have different distinct shapes and visualizations that that help users make decisions about what to do with that information.
Ben Callahan (04:42)
This is such a good clarifying way to think about that distinction. ⁓ My goodness, like I see sameness everywhere when you describe it like that, you know? And I'm wondering, do you think that, who this could, we didn't talk about this in the deep dive, but I'm going to put you on the spot here. ⁓ Do you think that the popularity of design systems has created so much sameness in the world or in of design or was that happening before?
Yesenia Perez-Cruz (05:12)
So, man, there is this article
Magic Ink by Brett Victor. This came out in 2005. And he was writing about this problem. And he was writing about how product designers, software designers have aligned themselves more with industrial designers than they have with graphic designers. And so they create interfaces that feel mechanical.
Ben Callahan (05:17)
Okay.
Hmm.
Yesenia Perez-Cruz (05:37)
that feel like you're operating a tool, the computer as a tool, instead of shaping information in a way that helps users make decisions. And so he had a bunch of reasons for why that was happening. But what I thought was really interesting is he listed basically the ancestors of design systems as a reason why that was happening. And he had said something like, ⁓ when it's trivially easy to place
UI components onto a screen, then do the important work of shaping information in a unique way. I don't think design systems are the only cause, but I do think that ⁓ it is the cost of economies of efficiency.
Ben Callahan (06:13)
Wow.
Yeah. Yeah, it's interesting. mean, what I hear you describe when you talk about expressiveness in an interface to me is just like good design, right? Like, isn't that really what we're talking about? Yeah. Yeah. Yeah. And it's funny that it's easy to let that slip, you know, in service of get to market faster or, you know,
Yesenia Perez-Cruz (06:40)
Visual communication.
Ben Callahan (06:50)
Okay. So that was expression. Talk to us about that. So towards the end of our deep dive, this other, these other words kind of kept emerging and somebody asked, I think it was Brandon maybe, can you clarify the difference between drift and differentiation? So could you do that for us here?
Yesenia Perez-Cruz (06:57)
Mm-hmm.
Yeah. Yeah. So it's I could see like, wait, but isn't the point of design systems to reduce that variation and to get the cohesion? ⁓ So drift, in my opinion, is things that are the same look different. So if somebody is deleting a row of content, you want the icon the way that that
that action happens to be similar across any anytime somebody is taking that action because you don't want people to have to relearn. ⁓ wait, what is this X do versus this trash can icon? So drift is when things that are the same look different. ⁓ Sameness is the opposite. Sameness is when things that are different look the same. And so when I talk about differentiation,
Ben Callahan (08:00)
Yeah.
Yesenia Perez-Cruz (08:03)
It's how do you get things that are different to look like what they are instead of the same thing?
Ben Callahan (08:10)
Yeah, they should look appropriately different. Yeah, yeah. It's interesting. think, I, my mind sort of was flipping back and forth on the definition of that word between that meaning that you just gave us, which is like things in the interface need to look appropriately different based on what they are and their, and their, and their meaning, you know, and another meaning, which is I think used in more of the brand space, which is like, how do I, how does my system
enable my products to differentiate in the market. And do you see there's a correlation between those two or?
Yesenia Perez-Cruz (08:44)
Yeah, yeah, absolutely. And some of the most interesting examples ⁓ that I've seen is when a product will style a really primitive component in a way that is really aligned with their brand. So, you know, everybody knows the most common shape of a drop zone, right? You can probably picture a drop zone, the dashed lines and gray and the arrow.
Ben Callahan (09:01)
Yeah.
Yesenia Perez-Cruz (09:12)
icon and some text that says drag it here to upload. ⁓ There's this cool tool called MyMind, ⁓ which is this, it's a bookmarking, like second mind tool, inspirational tool. And their branding is very atmospheric. It's very relaxing. It's meant to be soothing. They have a lot of circular shapes. Their logo is a circle. have a lot of, ⁓ yeah, circular shapes throughout their entire product.
And so their drop zone and their color picker have completely different visualizations. Like it's there, they use the circles and they have the, like the soothing animation. And sometimes I hover over the drop zone just to, because the animation is so relaxing. And so, yeah, I do think that one thing that I see is
Ben Callahan (09:52)
Whoa.
Yeah, that's so cool.
Yesenia Perez-Cruz (10:07)
When people are starting a design system, they reference other design systems. And so they look or they'll go to a gallery and they'll say, all right, what? We've got to make a drop zone. What does a drop zone look like? And sometimes that's appropriate ⁓ if it's a less important component or if it just needs to be functional for your product. But if it's a core part of your experience, then yeah, you could really create a drop zone that feels very distinct to your product.
Ben Callahan (10:37)
Yeah, it's like we're sort of like teetering on the edge of usability too, right? Like familiarity in sort of like interfaces also kind of breeds that usability that we want, right? Like if I see the drop zone and it looks like all the other drop zones as a user that I have seen, I know what to do with it instinctually. Whereas you're saying there are moments where in product we need to sort of allow for that. ⁓
Yesenia Perez-Cruz (10:50)
Mm-hmm.
Ben Callahan (11:05)
little bit of cognitive dissonance maybe in what a user would expect in order to sort of, you know, grab them with the brand. Is that fair or?
Yesenia Perez-Cruz (11:12)
Yeah.
So what's interesting is the... What is it called? Jacob's Law? The usability, the ⁓ familiarity across UX patterns. I think I looked up that article, which was again, pretty old when I was writing my sameness article ⁓ because I was trying to kind of...
Ben Callahan (11:24)
Maybe,
Yesenia Perez-Cruz (11:40)
devil's advocate myself with that same argument. What I found was interesting was that it mentions, there's a lot of space for differentiation in things that are specific to your domain. So in the case of my mind, a drop zone isn't just a functional, hey, somebody needs to perform this action component. It's a domain specific component for them. And so
when things are really specific to your domain, I think that that's where you can introduce new patterns and people will be more willing to learn something different.
Ben Callahan (12:22)
Yeah, it's interesting. mean, we're kind of deep in like product design world, right? In this conversation and I,
I think it's really relevant though to the folks listening who are systems folks, because our job is to be able to sort of like identify the line between these, know, like where do we standardize? Where do we push for innovation? Where do we push for brand expression? You know, and those are hard lines to define and it's not the same for every org. So there is no single answer, you know? ⁓ My question to you about that is like, if you came into an organization brand new,
Yesenia Perez-Cruz (12:39)
Mm-hmm.
Yeah.
Ben Callahan (12:59)
and you needed to sort of help give them guidance. The designers, the engineers give them guidance on where should they standardize, where should they innovate? How would you go about figuring that out for them?
Yesenia Perez-Cruz (13:09)
So one, I would first try to understand what is the role that the system is playing in their organization. So if they are just trying to get to that efficiency mode, I'm not going to be recommending, okay, start pushing people to do things that are different. And even within the same company, sometimes that has ebbed and flowed.
And sometimes we want to encourage people to try to branch out. And sometimes we want them to actually adopt things. So first, I would understand that. think also ⁓ because this was the case with Polaris, it's used to accelerate third party developers that want the decisions made for them to get them started. And then it also needs to be used by designers that are
creating new products. So I would also try to understand if you are trying to create more expression, where does that need to happen and who are the people that are leading that, that need to do that.
Ben Callahan (14:23)
Yeah.
Yeah, that's interesting. Like the role of like who makes that choice, you know. ⁓ Okay. It's super helpful. Thank you for kind know I feel like we're a little bit off script, but that's okay. Like I'm just, I'm just curious. So this is great. Okay. Where do we, where do you want to go from here? Like what else in this conversation stood out to you that you think folks who are tuning in for the recap should know about?
Yesenia Perez-Cruz (14:35)
Yeah.
Well, we talked a lot about, I think, an enablement, right? Like in different ways to, like different postures that a design system team can take
Ben Callahan (14:52)
Yeah.
right. We talked about safety a lot actually at the beginning, especially we were kind of like, I'm trying to remember how that came about. It was like this idea that if you are
Yesenia Perez-Cruz (15:02)
Mm-hmm.
Ben Callahan (15:09)
just telling people no all the time. They're not going to feel safe to experiment. They're not going to feel safe to explore, you know, and you gave a couple different ⁓ examples, I think of maybe some conversations that you've had with consuming teams in the past around like, hey, here's a way that you can think that sort of will help you move outside of the constraints of a standardized UI kit. Do you want to tell us a little bit about those or?
Yesenia Perez-Cruz (15:35)
Yeah, yeah.
And I think it was interesting, there were a lot of comments in the sidebar of people describing their individual culture, like teams cultures and people's relationship with the design system. And so I that's probably one of the most fascinating things about design systems to me is how it shapes the culture of how designers are working. ⁓ So in in my case,
Ben Callahan (15:59)
Mm-hmm.
Yesenia Perez-Cruz (16:03)
the example here, I was in a culture where people did.
trusted the system too much. If that could be a problem, which is like a funny problem to have, because so many times people are trying to really drive adoption up. ⁓ And so we were actually encouraging, trust your instinct. Here's explore freely, don't start with the system and try to get people to focus on new habits and.
Ben Callahan (16:13)
Hmm.
Mm-hmm.
Yesenia Perez-Cruz (16:41)
open up possibilities that they weren't considering before.
Ben Callahan (16:44)
Yeah, that whole idea, like it's so, it's so contrarian to how I normally think about things, like to encourage your consuming designers to start with a blank canvas, right? think that's just not, it's just not something I had really thought about And in a sense, what I think I hear you saying,
aligns with some conversations that we've had on the question in the past around like, how do you get started with a system? Because you can't standardize things that don't exist, right? And I see a lot of teams trying to just like jump in and define color palettes and define typography. And it's like, well, what's the product? So like we get ahead of ourselves, I think, as systems thinkers sometimes. And you're almost encouraging that sort of.
Yesenia Perez-Cruz (17:21)
Mm-hmm.
Ben Callahan (17:27)
creative exploration throughout the adoption process even, which I think is really fascinating.
Yesenia Perez-Cruz (17:35)
Yeah, and I do think that ⁓ there's a risk in standardizing too much too early. that had been one of the, reason why I was at this point in time where I was encouraging people to go with the blank canvas was there had been, the system was created quickly and adopted quickly. And so there wasn't enough range for
Ben Callahan (17:42)
Mm-hmm.
Yesenia Perez-Cruz (18:03)
the new needs that were showing up in the product. Like it worked really well for if you want to build the exact same thing, if you want to build the product exactly as it existed in 2016, then this is great. But if you're now in 2020 and you're trying to do something different, then it's not there. So we actually were trying to encourage feedback loops of new patterns into the system. And so that requires people to start from
Ben Callahan (18:15)
Yeah.
Yeah.
Yesenia Perez-Cruz (18:33)
from a blank canvas and all right, what is the best way to present this information so that we can then evolve the system from actually do the opposite. Now we're encouraging more divergence so that we can then converge on new patterns.
Ben Callahan (18:50)
Yeah, I heard you mentioned something like this earlier. And I think I've felt this too, that like organizations tend to go through these seasons of differentiation or innovation and seasons of standardization, right? It's never just like both are running full steam. it's a pendulum that's moving and things.
Yesenia Perez-Cruz (19:04)
Mm-hmm.
Ben Callahan (19:10)
in the outside world impact the needs of the business, which impact the way we approach design, which impacts what we standardize, you know, and then vice versa kind of happens the other way. And so that's cool. And it reminds me of part of the conversation from the deep dive around sort of how, you know, like as systems mature, as products mature, the need for us to sort of like ebb and flow between these things definitely changes. And that's, that's tricky. You know, it means
It just adds another layer of complication, I think, to the work of like really knowing what's happening in the organization, you know, so that you can shape the system, the approach of the system in this moment to the needs of the org in this moment.
Yesenia Perez-Cruz (19:42)
Yeah.
Absolutely. But I'm also thinking a couple years ahead, can be tough. Basically, ⁓ we were at this point in time where we knew that our token layer wasn't where it needed to be. However, we weren't going to be able to create the best forward-facing token architecture if we didn't have more input. So if we didn't encourage people to try different things, because
Ben Callahan (19:53)
Yeah.
Yesenia Perez-Cruz (20:17)
if we encourage divergence, that would then teach us about the new thing that we needed to standardize. So we went through that phase, created the new token architecture and said, okay, now we're consolidating again, because we're gonna ship a relaunch. And so, but that was thinking almost like three years in advance of where we wanted to go.
Ben Callahan (20:23)
Yeah.
Yeah.
My goodness, okay. Gosh, this is like, we did some conversations in our last episode around the skills needed to be a system practitioner. And I don't think we really hit on this idea of like, you have to know the future, you have to predict the future too. So I need to add that into our matrix. This is so good. ⁓ Is there anything else, Yesenia you wanna hit on? Like, I feel like we talked about so much, we hit on this idea of a differentiation budget, we talked about permission frameworks, like creating that safety that we were talking about earlier.
Yesenia Perez-Cruz (20:54)
Yeah, exactly.
Mm-hmm.
Ben Callahan (21:11)
⁓ anything else standing out to you? ⁓ there were so much.
to say at one point guy came on and said, I have a completely different perspective. Like, I don't want to tell designers what they do. I expect them to do whatever. I trust that they know their craft, you know? ⁓ and I, mean, I think we all sort of agree with that, you know, and we, and we were, ⁓ just trying to sort of like weave that perspective into the bigger picture of like, what does that mean for, you know, design debt or tech debt or whatever, if, if teams are sort of maybe trusted.
beyond their skills or if the culture isn't sort of properly constraining decisions, you know, ⁓ so just that was just another angle that we kind of got into.
Yesenia Perez-Cruz (21:54)
Yeah, and also it can be very tough for somebody that is a design system practitioner on a team to try to block something that a product designer on a team is doing. And so there is also this degree of these people have managers that are also responsible for the quality of the work. And so the line of, all right, what
what should the design system be pushing back on and where is it the responsibility of that team and in the leadership of that team to hold the line. I think a couple people had mentioned really like that design language and the token layer.
Ben Callahan (22:41)
Mm-hmm.
Yesenia Perez-Cruz (22:42)
is where the design system can be the most opinionated, ⁓ but giving a lot of space with composition to the consuming teams, which I agree with.
Ben Callahan (22:46)
Mm-hmm.
Yeah, that's right. And that kind of took us into a little bit of your article too on sameness, right? Where you had identified accelerators and differentiators and diluters and sort of give you kind of gave us a little walkthrough of that concept. know, could you do that for us again? Just briefly here. Yeah.
Yesenia Perez-Cruz (23:00)
Mm-hmm.
Yeah,
so this is a framework that I created to basically assess where your design system is at this point in time. So if you're noticing a lot of sameness in your product, could that be because you have a lot of components that are diluters? And so a diluter ⁓ I had listed as a component that is trying to do too many jobs at once, that has too many
built in layout assumptions without enough domain specific context, ⁓ high prop count. So it's just gotten bloated and it's trying to do too much work. And so I had given an example of a table, like a mega table with all its parts. And ⁓ this is a real example because we had this ⁓ index table component that was so specific to just the orders index. And so,
if there was a team that was creating a reports table or a set of reporting tables that needed something different, so then they ended up forking it. But then now suddenly we have drift with the way that bulk actions happen within our tables. So you want to find the right balance of across tables, bulk actions should have a similar UX. However, we want
Ben Callahan (24:24)
Yeah.
Yesenia Perez-Cruz (24:36)
orders an orders table to look like an orders table and reports table to look like a reports table. And so the idea of accelerators is instead of having a big monolithic table with a bunch of props and things that you toggle on and off, you break that down into the composable pieces. So it's a header, a cell, a row, the table, the basic table. And then consumers can then create their differentiators. So an inventory table.
Ben Callahan (24:38)
Yeah.
Yesenia Perez-Cruz (25:05)
products table and reports table on top of it.
Ben Callahan (25:07)
Yeah.
I love that. Such a cool framework. am definitely going to be putting this ⁓ into practice with my customers because I think there's a lot that you can learn from this. So that covers most of what we hit on. It was a really engaging conversation. As always, the time flew by, you know, we got to the end of it and I was like, wait a second, we're just scratching the surface. So ⁓ more to think about.
Yesenia Perez-Cruz (25:27)
I
We basically
got to the hour mark and had just defined the difference between drift and differentiation.
Ben Callahan (25:36)
I I love
it. This is what I love about this process of the question and the structure of it is that we can take pick something super narrow in the space and just go really deep, you know, and I, that, that I think is so, it's so helpful for me and for so many folks in the community. So just sending it, thank you so much for doing this. I appreciate you and ⁓ you being willing to share your expertise, your experience, your wisdom with us, ⁓ means a lot. Thank you.
Yesenia Perez-Cruz (25:48)
Mm-hmm.
Thank you so much for having me.