Pinata's Kendall Totten interviews Knapsack CEO Chris Strahl
Transcript
Chris Strahl:
Hi, and welcome to the Design Systems Podcast. This podcast is about the place where design and development overlap. We talk with experts to get their point of view about trends in design, code and how it relates to the world around us. As always, this podcast is brought to you by Knapsack. Check us out at Knapsack.cloud. If you want to get in touch with the show, ask some questions, or generally tell us what you think. Go ahead and tweet us at the DSPod, we'd love to hear from you. Hey everybody, this is Chris with the Design Systems Podcast, and today we're doing something a little bit different. Hey, Kendall, welcome to the show.
Kendall Totten:
Hey, glad to be here, Chris.
Chris Strahl:
So this is actually me turning over the host role to my friend Kendall, who I've known now for many years, and we've had opportunities to chat design systems about the web, etc. many, many times through various different career pathways. Kendall had this idea that maybe we should do a little role reversal. So here we are.
Kendall Totten:
Yeah, ready to turn the tables and ask you a few questions for a change. Right, Chris?
Chris Strahl:
Totally, totally. Well, thanks for doing this. I'm really, really stoked. Why don't you tell folks about yourself for a quick second?
Kendall Totten:
Sure. Yeah, I think we actually got connected in the Drupal community, probably DrupalCon event. My history is just that I started as a front end web developer and designer back in the day. Got connected to Drupal probably at least more than 10 years ago. So I've been in it for the long haul. And then through my career, I made my way into Red Hat, kind of moved into Enterprise Design Systems and got plugged into a lot of cool stuff that was happening there and ended up doing program management. And a big part of that was the design system at Red Hat. And now I'm an engineering manager at a startup. And so they're kind of just getting their sea legs with design systems. So I'm a little bit less involved than I once was, but still passionate about the topic.
Chris Strahl:
Nice. Well, thanks for doing this. I'm super stoked to dive in. So let's get started.
Kendall Totten:
Yeah. Awesome. Well, let's see here. I'm going to start out with a couple of questions, two questions, in one for you, but maybe the answer is the same for both. So the first question is, what did you want to be when you grew up? When you were a child? And then if you could do anything nine to five and money were no object, what would you do?
Chris Strahl:
Well, so the, it's actually kind of a funny answer to this. So every kid that grew up in the late eighties, I wanted to be a marine biologist because they were super cool and you got to work with dolphins, and whales, and sea otters and stuff like that. But I mean, honestly, for a long time it was river guiding. That was my passion. I loved being on the river. I loved being outdoors. I've been out in the Grand Canyon in a inflatable raft twice for 20 days. And so that ended up being something that I was really passionate about. And it's actually a big part of how Evan, my co-founder and I know each other, is through river guiding. I was a professional river guide for 10 years. He'd been down most of the rivers that I'd been down, and that was an early bonding conversation for us was around that.
But nowadays, it's a little harder to get out on the river with the kiddos, but if I could do anything nine to five, it'd probably be have a papaya plantation in Hawaii where I just dig in the dirt and live off the grid. I mean, I don't know. It's funny, right? I work on the internet every single day all day long, but I definitely have this Luddite part of me that just wants to not have a cell phone and not have a glowing rectangle that I look at every single day.
Kendall Totten:
I feel that.
Chris Strahl:
But I mean, what I do now is really fun. I really enjoy my job. I really enjoy being CEO. I really enjoy the creative process of a startup. I've always been in very hard creative situations where it's about making a website, or running a program, or trying to get humans aligned to go do things. This is kind of a different way to be creative where I get to build a company that is, if we're successful, we're going to change the way people think about digital products.
Kendall Totten:
Yeah, that's awesome. By the way, I feel like there's a Portlandia joke tucked in there somewhere as you're from Portland and they have this whole ayo river-
Chris Strahl:
Right, right.
Kendall Totten:
I hope you've shouted that at least once.
Chris Strahl:
Yeah, yeah. I mean, there's lots of times where you get a little, I don't know, loose, free, I'm not exactly sure what the word is, but you spend a little time on the river with some people and you get to know them in this pretty extreme circumstance. And oftentimes you break out in song on day 10.
Kendall Totten:
Absolutely. That happens, and I think we could apply the metaphor forward. So your role as a CEO is like you're helping your team navigate this river, this journey through life, and kind of adapt to the changes in the market and how companies are using design systems, especially how much they've changed over the last 10 years. It's been pretty dramatic.
Chris Strahl:
It's funny, I was actually remarking on this the other day where I'm having fewer and fewer conversations, almost none now, about what is a design system. Most of the time when I talk to folks three years ago, I would've had to explain what is a design system, or at least what our version of a design system was. Nowadays, everybody knows them, and it's starting to be more conversation about how important are these things instead of what are they?
Kendall Totten:
Do you think is one thing that everyone misunderstands about design systems current day?
Chris Strahl:
I mean, there is still a lot of that undercurrent of, this limits my choice. And I think that that is an interesting take, and it comes from this idea that somehow the constraints of a system are imperiling your ability to be creative. And I don't think that that's actually necessarily true at all. I think that we all work within constraints. There's constraints in our medium, there's constraints in Figma, there's constraints in the web, there's constraints kind of all over the place. And having a truly free form way of creating something, not only does it not exist, it's actually not really good if you think about it.
Kendall Totten:
Yeah. I agree.
Chris Strahl:
The idea that I can make anything regardless of my brand constraints, regardless of the tone and voice, or message I want to convey, that's just not the way it works. And so I still get a lot of skepticism about the role of design systems in putting guardrails on what people can create. And good design systems they feel natural to strike a hopeful tone. I do see that more and more every single day, people being like, "Oh, I can actually make better software with design systems because I'm not sitting there arguing about what my border radius is for this button. I'm actually working on some interesting new experience that I normally wouldn't have time for." And that attention and focus and the creation of that is really important
Kendall Totten:
For sure. And I think too, the aspects of creativity within a design system constraint, it depends on what your role is, right? Because if you are the person who is either coming up with the brand tokens or the look and feel of the brand and you're trying to turn that into a design guide, you might be responsible for figuring out what the border radius is and kind of defining the guidelines for everybody else. So there is a feeling a little bit of like, well, I'm disconnected from that if I'm further down the pipeline and I just have to take those tokens and work them into my day-to-day design. But I think the recurring theme is, it frees you up to make other creative decisions. So it is important to a degree, but you don't want to keep rehashing those smaller decisions every single day. You want those to be baked in for a period of time so that you can focus on the overall user experience.
Chris Strahl:
Definitely. I think there's this interesting sort of emergent philosophy in design systems that I'm really keen on right now. And that is that there is sort of this foundational part of a design system, almost like the core of it, which is very, very interconnected to brand. And that's something that is pretty immutable. Not that many people touch that part of it. Not that many people make major contributions to that part of it. It does change from time to time, but usually that's a big organizational strategic change. I'm redesigning my brand. And then there's the places where you actually implement the design system into your products. And in big enterprises, this ends up being a systems of systems model. In smaller enterprises, you oftentimes have this idea of some core components, and then extensions of those components that you're actually using in implementation. But there's this other interesting half that is the opposite of that core foundational thing, which is this idea of this highly creative space where you're taking those foundational components and you're changing them, or adding new variations, or extending them into what you actually need to get the job done at the product level.
And so design systems get to play in this really interesting space where you're like, you simultaneously have this very tightly controlled part of that ecosystem. And then this part that should be pretty free, and open, and allow people to play with it or change it in a way that makes it right for them. And that's like where the magic of contribution happens. And it's not totally unlike the open source community that you and I were both a part of this idea that, you know you had this core concept of what triple was, but then there was this entire modular framework for it for how you could extend it any which way you wanted. And I think design systems sort of function in that same kind of systems realm.
Kendall Totten:
Yeah, I agree with that. I guess I'm curious, I noticed as you were describing that, I was thinking, do you feel like design systems are inherently more useful, or valuable when you're designing products, as opposed to a handful of marketing websites? Or do you think they are just globally useful no matter what you're designing?
Chris Strahl:
I think they're useful in a similar way. I mean, look, the real power is if you're able to unify those things, if you have that common brand expression and that brand exists in your product, and exists in your marketing, and it exists in any digital space that you could imagine. And I mean, I think there's even opportunities for design systems in the world of physical collateral, but we're pretty far away from that right now. I think that the real value is if you're able to unify that foundation.
Now, when you extend that foundation, marketing typically has very different needs than product. You need to showcase pricing or display a product or get people to have some conversion goal that surrounds signups, or buy nows, or demos, or whatever. Whereas, in a product, your conversion goals are usually north star metrics. How often are people using this? How often are they logging in? What is the actions that they're taking inside of the product that actually lead to customer value?
And so the application of that core brand is very different in a product setting than it is in a marketing setting. But that's not necessarily two design systems. That's two extensions of the same design system for different use cases. And this could also work with House of Brands kind of ideas. The idea of I'm one company that has 50 or 100 brands or something like that, you know you can extend a core foundational brand or a core foundational set of UI elements into each of those brands as their own sort of subsystem. It's also, it's really interesting 'cause we have lots of customers and apps that have heaps of internal apps, like HR apps, or warehouse management apps, or kiosk apps in their offices in physical spaces. All of those also represent these interesting extensions of that core system. But I think the point there is it's all one system because very often you find these really unexpected and kind of interesting ways of sharing that value between marketing and product, between a warehouse app and a customer e-commerce experience, and the availability of that stuff in a single system and the ability to discover it becomes the focus.
Kendall Totten:
That's interesting. Yeah. I guess, do you feel like it's still just as important to convey branding within internal applications that only employees are using?
Chris Strahl:
I mean, I think so. The designer in me says so, right? The idea that if you're somebody that is working for, let's say your company and let's imagine a future where Pinata has 100,000 employees. And so in that case, if you have an HR app, that's a part of your brand, that core experience and that core expression of who you are, and it's not just about a logo and a color system, it's about the principles and the guiding idea of what the company embodies and what its mission is. And a really good brand takes all those things and really is thoughtful about that application across every customer, employee, partner experience that you could imagine. And so, yeah, I think it is important. It maybe is not as important as dollars in a shopping cart or some really clear ROI metric for the business growth, but at the same time, that reinforcement of that value system at every part matters.
Kendall Totten:
Yeah. Yeah, I mean, I guess I got to see this firsthand because I had the opportunity to be at Red Hat when we were going through Every Brand when we were doing the work of actually changing the logo and tweaking the brand colors. It's still red for obvious reasons, but kind of changing the palette and then trying to roll that out across marketing websites, internal applications, customer facing applications. There's just a huge amount of digital properties within Red Hat. And so I got to be a part of that, of kind of translating those brand guidelines into a design system. I'd say it was easy, I don't know if old school is the right word, but we just use CSS variables or custom CSS tokens to say, "Here's an easy list of just the basics, the brand colors themselves, primary, secondary, etc." We didn't get too far into the weeds with those kinds of tokens because we knew the applications were going to be so different across the organization.
So it's like we didn't get into the semantic weeds on it, but really having that available to teams to say, "Hey, you don't have to go through the work of cherry-picking things out of a design file. They're already in a consumable format." Was pretty cool. And I think it's like, yes, the internal applications might kind of be lower on the priority list as far as rolling this stuff out, but you never want to feel like you're within an organization and you're working in some dusty corner that no one cares about. And so if you're working on a stale application that doesn't look anything or feel anything like your company, that just shows, hey, why are we using this? Are people still paying attention to this? Do we need it?
Chris Strahl:
And honestly, I think it erodes trust inside organizations, right? Yeah. Yeah. It's when your slide deck template doesn't have the right logo in it. Knapsack, we just went through a redesign and it was funny the amount of decks that we changed the core color palette and applied a new template to and everything like that. I always kind of giggled because it honestly doesn't matter that much if our all hands deck has the exact right brand on it. But at the same time, it matters a ton because the entire company sees that every couple of weeks. And so to have that sense of trust or that sense of belief that the thing you're looking at is current and relevant, having to be a part of that brand ecosystem really does matter.
Kendall Totten:
Yeah. Now, okay, be honest. Do you guys like to rebrand more often than the average company because you have the dog food, your design system tool?
Chris Strahl:
Well, that was actually a big part of it is we finally reached what we consider truly using our design system to power the majority of things that are in Knapsack. We, like any small startup kind of started in this space where, yeah, we had a design system. It powered a few things, mostly around tokens, but now we actually have all our components in there. And it's really heady really quick because we're a design system platform that powers design systems for customers that also has a design system that powers the creation of the design system platform. And so the levels of meta get really brain breaking really quick.
Kendall Totten:
Turtles all the way down.
Chris Strahl:
Exactly. Components from top to bottom.
Kendall Totten:
Right. That's fun. I'm imagining there's definitely been a few meetings where people are confused. Which design system are we talking about? What's happening?
Chris Strahl:
Yeah. Well, it made naming all the more important for us. So for example, our internal design system's called Toby after Toby, Tobias Dantzig who created the Knapsack problem, which is an old mathematician problem from, I don't know, 80 years ago or something like that. And so we named it Toby for a couple of reasons. First of all, it's our namesake, the whole idea of given a finite amount of space and weight, what's the most effective, efficient thing or use of that space? And then secondly, he happened to live in Portland, which is where the company was founded.
Kendall Totten:
Awesome. Well, let's see here. I wanted to jump back to, I had one more just general design question for you. If you were to zoom out and look back at the last 10 years of design systems, in retrospect, what do you think has been the thing that has changed the most and what has surprised you?
Chris Strahl:
This is a really good question coming for you because I think that you were one of the first people that I ever met that actually said the word design system out loud in front of me.
Kendall Totten:
Really?
Chris Strahl:
Yeah. I mean, circa what, 2014, 2015, something like that.
Kendall Totten:
Wow. Well, I'll wear that as a badge of honor. Thank you.
Chris Strahl:
And trying to think about what's changed. I remember our first conversations about design systems where they were really engineering centric, thinking about the world in terms of components or in terms of basically chunks of UI that we could make modular. I'm not even sure that we were using React at the time. I think it was some implementation of Twig PHP or something like that.
Kendall Totten:
Oh yeah, definitely. Definitely Twig.
Chris Strahl:
Where it was this idea of how do you create some sort of modular reusable piece of a thing? We oftentimes talked about it in terms of engineering abstractions and how you would alter those abstractions based on particular use cases. And that was really narrow if you think back on that, because we were just thinking about what that developer experience looks like to construct a webpage inside of CMS platform. And now we think about design systems as this really encompassing thing that is about design, it's about engineering, it's about documentation, it's about shipping the tools you need to be effective with your design system. Most of our design systems have linter configurations in them and stuff like that. Or this is how you get it to set up and work with your CI, or this is how you integrate with Figma Token Studio. And it's any number of instruction sets, not just about what the design system does, but how to use it. And I think that at the time had we had that conversation about what they look like now, we would've both kind of laughed and said, "That's a lot."
Kendall Totten:
So it's really grown. Yeah.
Chris Strahl:
It's become so much more encompassing and so much more foundational. I think that it's only even been since I started Knapsack with Evan that I've really thought about design systems as these really foundational things to the future, the way we build product. And what I mean by that is, we're all moving towards a much more systems-based worldview because scale is hard and everybody is resource constrained, and everybody's roadmaps get bigger and more ambitious every single iteration. To meet this challenge at scale the big thing that we all are focused on is how do we derive continual recurring value out of the stuff we create?
And that has become this really core concept that is driving the creation of a lot more product a lot faster than it's ever existed before. And that's innately cross-discipline, and that's innately based in this idea of data is structured in these design systems in such a way that components that we've built, or patterns that we've built are reusable over, and over, and over again, across not just one product or one feature, but an entire ecosystem. And if you think about that, that really places design systems at the heart of the strategy for how your company creates product. And I had not initially thought of them that way, to be honest. I thought of them as ways of being another developer tool, and now it's to me something that represents a really strategic platform, almost like infrastructure for how we think about building product. Akin to something like Git, where Git controls how we manage and flow code around this is how we manage and flow our patterns around our ecosystem.
Kendall Totten:
I could definitely see that. Yeah. I mean, do you feel like if design systems is this big, lovely umbrella for a lot of things, do you think it's fair to say that even the process of how we do handoffs, and how we communicate with one another, and how we flow work through the pipeline of our organization, does that all fall under that design system umbrella?
Chris Strahl:
I think so. Look, if I were a designer coming out of school right now looking at the career landscape, I'm not sure that I would spend a bunch of time learning how to create a bunch of high fidelity things in today's design tools. Because think about the point of design tools, right? Yeah. Actually, let just ask you that question. What do you think the point of a design tool is?
Kendall Totten:
Ooh. Well, I guess it depends. It depends on what your original goal is because, okay, so you're a designer and you're being tasked with setting up the design system and kind of creating those brand guidelines, which we just did at Pinata. We just had a meeting about it the other day. It's lovely. We're kind of rolling it out and showing everybody, "Hey, here's our new look and feel." Right? You might be more invested in setting up all these different examples of visuals and conveying the feeling of a design. But if you're tasked with solving a design challenge, meaning how a user is going to gain information, how are they going to browse your website, find what they need, how are they going to go through the product and take care of the tasks that they need to take care of? You're kind of closer to the side of doing those iterative wire framing type tasks. And maybe the design system is great because instead of just a square on the page, you can actually drag something in that resembles an actual card component and it looks much more familiar to everybody, and they get it immediately what that thing is.
Chris Strahl:
And you don't have to do a handoff.
Kendall Totten:
Right.
Chris Strahl:
I think that the thing is, and yeah, you're right, there's lots of different reasons why we have design tools. What really kind of hit about that is design tools are about a way of being able to express intent. And when we think about that intent, it comes in lots of different forms. We have this idea, and this is deeply philosophical. I understand it's probably going to be a bunch of designers that disagree with me, but there's this idea that, okay, so we have to take something that doesn't exist and we have to give it form, but how often does that actually happen in a large enterprise? The vast majority of the time what UXD or production design is right now is it's like, let's take a bunch of things that are already built and let's tweak them. Whether that's templates that we find on the internet or UI kits that we find on the internet, or existing product, or any number of other things.
Design is a lot of, let me take something and let me modify it for a particular use case or a particular need. And we do that inside of tools that aren't the actual code because they're easier to work with. It creates this more rapid iteration or this more rapid way of experimenting and testing out ideas. But with the advent of AI and the advent of design systems where you have a bunch of abilities to take what you have now in code and very easy and very quickly manipulate it without having to know code yourself, I'm not sure that there's really a huge future there. If you're even Figma, which is wildly popular, if you're able to actually just create with code and you shortcut that entire handoff process and you're building with things that also include all of the design decisions you can make instead of just a subset that exists in the design tool, that's a much more powerful future.
And that's really interesting to me, the ability to say, "Let me as a professional designer be able to understand how state works in the app I'm actually designing it for the first time ever." Or how animation really works in HML instead of in some sort of not quite perfect animation emulation in a design tool. And so I don't know. Like I said, if I was just finishing school right now and looking at that, I would start to think about how can I use AI and code to more easily create experiences instead of trying to think about how do I move something visual around that relies still on approximation. I mean, being honest, what we're doing in Figma is still drawing boxes on a canvas. That's what we're doing. And those boxes are really important and they convey meaning, but if I'm able to make those same boxes using code in that same sort of way, why would I ever use a design tool?
Kendall Totten:
Yeah, yeah, exactly. Let's get into AI a little bit. I know you just touched on this last week with Taylor, but I think it's the talk of the town. So let's do it. I think the consensus so far right is AI hopefully, is going to free up humans to do the more interesting things. And I think Brad Frost touched on this and his blog post, but I kind of feel like there's still some, I'll say this word embracing, I love this word, but chores, there's chores tucked in there that fall to humans. So for example, if AI could act like a little design system factory, it writes the boiler plate code for components, you ask it to add handful of variants and properties, whatever, it's still going to be a human choice to choose between red 50, color primary, or alert warning. There's always different layers within the token system to say, "Why am I choosing this color?"
So that inherent question of why we're doing a thing, why we're making a design choice? Is now being pushed at the forefront because the AI is going to make a lot of the other stuff easier. And what's funny to me is this was always kind of a point of friction for both designers and developers because it feels like a chore to say, "Well, I don't know. I can see the color red on the page. I know it needs to be red. Just let me type in the hex value for it." And it's like, well, no, but you have to use the correct design token, the correct variable. You can't just throw it in there. And the reason for that is so that these systems can choose to evolve, and so you can convey the correct meaning to your user because are you choosing it because you want it to match brand, you want it to be the call to action on the page? Or you want to convey something is wrong, don't click that, warning? And so you have to pick the right choice. So we still need that critical thinking, that system's thinking.
Chris Strahl:
Yeah, no, that expression of intent, this gets back to the constraints conversation that we talked about a little bit earlier. The design system acts as those guardrails and that set of constraints that an AI can work within. And I think this is the really interesting place for AI. There's tons of whizbang shit out there on the internet that shows design co-pilots for Figma, and how do I create a webpage using plain language prompts and all that other stuff. But all of that has a gap right now where a major corporation, even one that's just getting started like Pinata, I doubt you'd put what those things we're able to create into production. And so-
Kendall Totten:
Probably not.
Chris Strahl:
... Right? And the reason why is because there's still a lot of expert craftsmanship that goes into that, right? What are the performance implications of this particular component that AI generated for me?
Or how does this function at scale with a thousand users instead of one user and a tech demo? Maybe that's even not ambitious enough. How does it function with a million users? All of those sorts of things are still aspects that humans really want to touch and humans are responsible for the system. I still think that the design system is largely defined by humans, and sure we can have an AI generate variance of a component for us and even generate some fairly boiler plate component code for something simple like a button. But the moment you get to a higher level of complexity, having humans involved in the choices that exist inside of my design system, that really matters. And then AI can do the assembly of those components in interesting and unique ways, or even maybe extend those components in interesting and unique ways to fit a particular use case.
I'm not entirely sure what the interface for this looks like yet, but it's some combination of visual design akin to what we do now in a Figma, or a Sketch, or something like that combined with prompting that is assembling those components. Maybe you're telling something like, "Hey Knapsack, let's start with a header and a footer, and give me some space in between those things and then let's add a hero." And then, "Okay, well that hero isn't exactly what I was looking for. Can we do a different variation of that hero?" And then, "Okay, can I add a layout to this? Okay, I've added a layout. I want that to be a three column layout. I want a card in each one of those columns. I want that second card to have a call to action and a highlight ribbon." And that would be kind of the idea of how you would construct an experience using components, because all of the things that I mentioned would be components in your design system that would have a lot of these choices pre-baked into them. And you're not going to get everything yet, but I think you're going to get really close to replicating that similar process that people go through in a tool like Figma directly in code without having to write a single line of code.
Kendall Totten:
I think too, touching on the craftsmanship aspect, maybe if the AI is creating kind of that low level stuff and spitting it out into a page, there's still something to be said first, taking the step back and looking at it and going, "Hang on, this combination of all of these things on the page doesn't quite add up the way I thought it would. The flow doesn't feel right. This is too distracting, and I really need the user to pay attention to this first, and kind of flow their way through the page." It was reminding me, I was thinking of when we had design system pages within Red Hat that would kind of just spit out a bunch of components on the page and you could play with them to see what they would do. And the pages were so ugly. Like, don't ever choose these settings. This is just a demo to show you all of what's possible. But you could create, forgive the language. We always say ugly babies. You could create some ugly babies with these things that were branded, that all of the variants were approved or whatever, but the combination of them was hideous. There's still that design eye that's necessary. And honestly too, just understanding the goals of the user and how they're supposed to interact with that digital experience and what are they trying to get out of it and what's going to be best for them?
Chris Strahl:
And isn't that the more interesting design work than just drawing boxes anyway?
Kendall Totten:
Hell yeah.
Chris Strahl:
It's interesting, right? Because designers have been separated from the medium that their work is destined for. I've oftentimes used this comparison where I say, "Designers are basically drawing pictures of these really beautiful cakes to display in a window and then having no say in how those cakes are actually made in a kitchen." And so it's up to engineers to look at that cake and be like, "Oh yeah, I'm going to make that with vanilla with some Funfetti, there's going to be some cream cheese in that frosting, and I'm going to put chocolate cherries on the top instead of the maraschinos that were in the picture." And so that's tough. And I think that the reason why that's tough is because in a picture of a cake, you can't describe the flavor, you can't describe the texture of it. You maybe can write that out, but you still don't really have a lot of influence in that.
And so in a similar way, designers can say, "We should have X transition animation." Or, "It should feel like a fluid experience when you unfurl something." Or something like that. But unless you can actually touch that experience in code, you're always dealing with a visual approximation of the thing a user will see. And so the design system gets us all in the kitchen together, designers and engineers, and even product people. And heck, I think content people also have a role in this too, where we can all get in the same medium and work together to make a better cake that we all kind of agree is the right cake to make. Let's all go work in the medium it's destined for, so that instead of saying, "Oh shit, that end product doesn't look like my Figma file." You never had a Figma file to begin with. You were all just working in the thing that was ultimately what a user was going to see.
Kendall Totten:
Yeah, I mean, I think that this kind of touches on the process question I was asking before. It's the design system includes those conversations around intent and around how the user is supposed to flow through the page. And I mean for Pinata, we're a small lean startup and we're trying to get a lot done very quickly with a few resources. And so it's like if I'm building a mock-up, do I have the time to build a mobile, and a tablet, and a desktop mock-up? Or can I just throw it onto a desktop mock-up and give a quick description about what it's supposed to do and allow the developers to infer, okay, this is what it should probably do on mobile? I think the key part of that is what is the content flow? And then this is going to get into a little bit of a topic that we both, we talked about before, we share similar views on outlines, starting with an outline format for your webpage. It's like what's most important? Put it at the top. How does this content match the other content on the page? Where are the relationships? And then where does it break into a new topic? And so on. So you really have to have that shared understanding of what are all these puzzle pieces doing on the page together and how do they relate to one another?
Chris Strahl:
Absolutely. And much like a cake is based in a recipe card, a bullet list of components with an order and a depth is a lot like the recipe for a website, and how that gets interpreted by a browser is what our ultimate destination looks like in that case, not necessarily baked cake. But I think that you're absolutely right in that you have a hierarchy to the things that exist inside of the web and components or patterns having an understanding of the order of those things and the related depth on a page, that's ultimately what we're feeding into web browsers. It's not visual data. It's not this is to the left of this, or this is above this. The browser interprets all that for us, and we're used to this idea still that I think comes from print media, where we had to have an analog in printed digital, and we kind of figured out that, okay, maybe websites are digital posters.
And then we said, "Well, eh, it's actually not really true." Yeah, there's different viewport sizes. We should make the posters reorganize themselves if the poster gets smaller. I'm like, "Oh, well, that's actually not really right either because there's all sorts of problems with that in terms of system technology or context. So let's make it so that these things have some sort of dynamic way of shifting their context." And now we're in this situation where the visual approximations don't really mean anything at all anymore, right? Because you could be using assistive technology and never actually look at the visual part of a webpage ever. And so representing a snapshot of a comp is really weird to me because it's like a brain in a jar for that exact view port at that exact setting, it might look like that, but there is very few situations where even half your users are going to have that exact same sort of settings in their destination medium to make it look that way.
Kendall Totten:
True. I mean, do you think that there's a future where we could hand AI that content outline, a nice pile of design tokens, maybe throw in some markdown, and then it'll kick out a website, like a correct website?
Chris Strahl:
Yeah, I think you could get really close. And honestly, I don't think we're all that far away from it. The idea of, okay, here's a design system full of components and design tokens. What's the user problem I'm trying to solve? I'm trying to solve a product detail page where people can add and remove items to a shopping cart, and it also has a ribbon of related content or related products. I bet you that AI could generate a pretty decent one of those. It may be a ugly baby, like you said, but it at least is a huge step forward and a starting point that now you're just doing the normal design thing where you're taking something that you had previously and you're modifying it to be exactly what you want.
Kendall Totten:
Well, I want to switch gears here and I want to talk a little bit more about Knapsack specifically. I wanted to hear from you tell us a story. Tell us about one of the early clients that helped provide crucial feedback and ultimately made Knapsack better?
Chris Strahl:
Yeah, I mean, there's so many folks to give a shout-out to in this because I think all of our customers, every single one that we get, we learn a lot from. I mean, we mostly deal with big enterprise organizations. I think that Vista, the folks that make VistaPrint, and 99Designs, and the whole Cimpress group and everything like that. They've been really interesting for us because they took a really early risk on Knapsack. I mean, they spent a relatively small dollar amount with us to run us as an experiment to start with, and now it's more than 10 times the size it was when it started. And it has gone from brand, to brand, to brand and part of the organization, to part of the organization and team, to team. And what's interesting is how we got there is it was somebody that we'd worked with at a previous organization that had moved there and kind of brought us into that organization is like, "Hey, what these folks are doing is really interesting. We should work with them."
And we found the first place where we had to support multiple coding languages in the same environment, across multiple brands, in a situation where that systems of systems concept applied to us for the first time. And there was a lot of interesting and unique challenges that we were able to solved together using Knapsack that has kind of let them have that systems viewpoint become not just a new experiment for them, but the way they do things. And there's a really interesting conversation with Mike Bowser there where he said, "The brilliance of all this is that anybody that interacts with our design system now has the opportunity to leave it better than they found it." And that idea of contribution and how that contribution flows through their work, that's really powerful and I'm super proud of conversations like that.
Kendall Totten:
Yeah, that's really beautiful. Feels like walking down the nature trail, pick up something, a piece of trash, you see it, leave it better than you found it.
Chris Strahl:
Totally, totally. To give it a sense of how early it was, I think that we had had a real product in market for a month or two at the time, and we had just figured out how to make it so that you had user accounts and-
Kendall Totten:
One user account.
Chris Strahl:
Right? Exactly. And I mean, we put them through all of our pricing experimentations and a bunch of other things that we had to figure out together to get them to be able to buy software from us, but they see the value in us, and they keep encouraging us and using more of our software.
Kendall Totten:
What a great symbiotic relationship.
Chris Strahl:
Yeah, it's been awesome. Yeah, it's one of the things I'm pretty proud at, at Knapsack is the vast majority of our customers, they buy some sort of small subset of the software, and then what they do is before we even reach one year, before we even reach renewal, they find the value in it. And most of the time customers are tripling their spend. And what they're doing is, it's not like we're just jacking up the price. It's that the number of users, quintuples, we have several different customers that have more than a 100 users, and a couple of customers have more than a 1,000 users that have grown dramatically in the adoption of Knapsack has been something that's become pretty fundamental to the way they build product. And that's really awesome to see, when you can have one very small, very contained part of an organization say, "Yes, we're going to try this." And then to realize the value of it and watch that spread wildfire inside of a company. That's really cool.
Kendall Totten:
Would you say that you've gone viral inside the company?
Chris Strahl:
Yeah. Within that one organization, right?
Kendall Totten:
Yeah.
Chris Strahl:
And it's kind of fun because you get to sit there and you get to point at metrics and say, "Here's like ROI and here's all the cool stuff that we're able to do." And you can kind of walk that around an organization and show other product owners the value of something like that. And they're like, "Yes, we're buying it."
Kendall Totten:
Yeah, that's amazing. Just a lot of just innate groundswell within organizations just as a testament to the power of Knapsack.
Chris Strahl:
And it's this fun sort of category creation work that we're doing, right? Because very few companies have bought design systems, SaaS software before. It's not a common line item that you see in a departmental or organization budget. And so most of the time we're new budget, people are creating budget for us, and usually that created budget is pretty small. I mean, you will know this working at a big enterprise company, if you wanted to use a new vendor that you'd never bought software like that before, you're probably not getting $1 million to do that with.
Kendall Totten:
Right?
Chris Strahl:
So what's cool is seeing customers see the value and then decide that not only do they just want to spend more, they want to watch this be a bigger part of how they think about the creation of product.
Kendall Totten:
Awesome. Okay. So I wanted to ask you kind of this angle. When you're building a tool like Knapsack, there's always a lot of decisions to be made around where to give users options, where to let them do their own thing? And then places where you might say, "Look, we've tried this all. We've been around the block with design systems. This is where we're going to draw the line in the sand of the best way to do a thing." Tell us about what is Knapsack opinionated about?
Chris Strahl:
So we're opinionated about two things, and we're only mostly opinionated about one of them. The first is that what we're mostly opinionated about is that everything should be based in structured data. And so we store the vast majority of design systems content in Git as markdown files, JSON, YAML configurations, etc. And any component code that exists inside of Knapsack also comes with a schema definition. And that schema definition is sort of the rules for how that component can be used.
Now, you don't need to specify that rule set and we'll still render that component for you so you can see it and touch it. But in that case, we're not doing anything all that different than say what Storybook is doing. For us, having that data schema that defines all of your different props and also uses a slot spec to understand how components relate to one another, that's the key, because that lets you assemble experiences and change the variation of those experiences into actual prototype pages. And that's where a lot of power gets unlocked, right? Because now instead of just saying, "I'm going to look at a card in isolation." It's like, "I'm going to look at a card, I'm going to look like a card with a button, I'm going to look at the card in the context of a page." And all those are examples that can be saved in your design system so that people can understand and empathize with what you're actually trying to build.
Kendall Totten:
Context is everything.
Chris Strahl:
Exactly. And so that ability to say, "All of it is based in structured data." There's another effect of that, which is that everything can be rendered as an API call. And so you can make an API call to Knapsack and have it returned to you like the data schema, the actual template language code that you're using, whether that's reactor view, or web components, or whatever. And then it can also return to you the sample data itself. And so you can get like HTML and CSS, you can get the base code, you can get the data schema, and you can get the sample content, all of the API call. And that's really powerful because that API call is also version control. So if you're in implementer and you're saying, "I need this part of my button spec for version one of my design system." And you're in another product and you need it for version 1.1, you can make that callback and get exactly the same result.
And so it creates a lot of trust in the system. And the second thing, is another part about trust. We have a pretty specific idea of workflow where we want people to think about workflow the same way that engineers think about it in Git. But we don't want to have them download Git and understand what all the different Git commands actually mean in our UI, we basically have the idea to create a branch in Git. And then a branch is a place that is essentially a workspace that is all your own, you can also share with other people, and you can all collaborate at the same branch at the same time. And then it controls how the design system changes when you ultimately want that branch to go back into the main design system and become that next thing. And so you can request reviews, you can commit that branch, and you can even publish a new version of your design system all from our UI. And the intent is design systems are really powerful, but to quote Uncle Ben, "With great power comes great responsibility" and if anybody can just change your primary color in your design system, that's a little scary because that has a lot of effects in product. And so using that abstraction of Git, you can basically control how things are changed and then how those changes get published downstream into your products.
Kendall Totten:
Makes a lot of sense. I think you're right. It's having a source of truth feels stable, feels like you have a sense of certainty about things. It doesn't feel like chaos because those of us who started in the olden days of creating mock-ups in Photoshop or even in XD, it's like if you have a design file, you're like "Final, final, final, okay this time for real final." You have all these iterations of design files. And so it's nice to know what version is this literally, is this the most recent version?
Chris Strahl:
Totally. And you have one that is in Dropbox and another that is going around an email, right?
Kendall Totten:
Yes.
Chris Strahl:
That's a huge problem that a lot of this tries to solve. And that actually gets me to the un-opinionated thing. We're un-opinionated about what content you put in your design system. You can put your grocery list in there, you could upload a bunch of pictures of your dog. The idea of the content itself, we're pretty un-opinionated about how that content gets constructed, because everybody's design system content is different, and oftentimes it uses different coding languages and multiple different coding languages. And so we also have very limited opinions on what coding language you should use. Yeah, I mean, Reacts really popular, but five years from now, is it going to be something that replaces React? What happens after, especially the speed at which JavaScript frameworks are advancing?
You know, can put Tailwind in our system, you can put material in our system, you can have your own custom set of components. We don't really have a strong take on the right way to construct a design system from a content perspective. And that also makes us really flexible. So if you're an enterprise that already has a bunch of components created, it's pretty easy to just put those in Knapsack. If you're a small company that wants to grab something off the shelf, and start with that, it's pretty easy to get that into Knapsack. And the intent is, as long as you're using structured data and you're using get backs, controlled way of working, most of the rest of it's pretty open-ended.
Kendall Totten:
I mean, that actually kind of dovetails into my next question. Maybe you've already answered it in a sense, but I was wondering, does Knapsack have any plans to sell sort of a turnkey design system? Where it's like if I'm really small and I don't have a whole team of people that have opinions about how would a set-up the design system, could I get a ready-made kit with all of the basics and maybe a handful of themes to choose from, or I just go in and kind of play with colors and fonts and really just be off to the races? Is that something in the future that you guys are entertaining?
Chris Strahl:
So we have a starter kit already that basically has a bunch of examples in our system. The hardest part about any of those starter kits is you can either have something that the intent is to build from it, in which case the baseline thing is marginally useful until you build the stuff on top of it that makes it yours. Or you can provide something that's really useful, but probably not specific enough to you, to be something like production worthy. And this is the problem with anything that exists in this landscape right now. There's lots of companies that use material, they spend a lot of time ripping stuff out of material in order to continue to use material.
There's stuff that's getting better, like what Chakra's doing, what the open UI project is doing, where there's these very, very sort of generic unbranded components that exist out there, but all of them, you're either choosing between this idea of I have to build on top of this, or I have to rip a bunch of things out of it. And what we basically decided with our starter kit is we were going to give people a lot of illustrations about how to work, not necessarily solve the component library for them. Because if you want to use Ant Design, like it's trivial to get that into Knapsack. If you want to use Tailwind, that's trivial too. So pick the starter kit that's out there that you like, that's probably going to be better than the ones that we could create anyway, and then use our examples as ways of working.
Kendall Totten:
So that might be a great option for very small companies that are just trying to get off the ground and get... Something is better than nothing kind of a mantra and put a little of their own spin on it, but really just go quickly.
Chris Strahl:
And most of our customers are pretty big enterprises, and so very often there's at least one, if not a dozen design systems that already exist at some state inside of their organization. And it's more about adopting those and figuring out how to find all the duplicate stuff, and reduce it down into variations of a common set of patterns. That ends up being the place that we spend a lot of time with our customers is in that process a little less in where do I start from?
Kendall Totten:
So if you had a magic wand and you could add any feature, no matter how complex or whatever to Knapsack right now, what would it be and why?
Chris Strahl:
Well, it's the feature we're working on actually. And so right now, AI is our big focus, and the things that we're doing with AI first, are, we doing a bunch of cool stuff around discovery of documentation and components of the system. So a spotlight style prompt that allows you to say, "Hey, I'm trying to figure out how to correctly use a call to action." And then have it to be able to return to you the right documentation URL, and give you a summary of that documentation directly in a prompt. And so that's going to really help with component use and component discovery. And then there's a bunch of quality of life things. "Hey, make a dark mode for me, and don't just have that be inverted in my core palette." Or, "Give me a type scale based on the type scale that I've defined over here." Or, "Give me a color step scale red 50 through 500." So all those little quality of life things. But the real interesting stuff is taking what we can already do with the assembly and collection of components into prototype experiences and AI augmenting that. And again, we don't totally know what the user interface for this is yet, but if I could wave a magic wand, I would have a new UX experience that allowed you to basically construct pages and prototype experiences based on components using language prompts.
Kendall Totten:
Wow. Well, that's really exciting. Buried the lead here with, we talked about AI already, and you're like, "By the way." Hopefully that was [inaudible 00:49:37].
Chris Strahl:
By the way. Yeah, this is happening. It's one of those things that we're just now starting to talk about because we've been talking about machine learning and AI in our app for two and a half years, but we've always had a problem with technology maturity. And just last fall, it was funny, I had just given a presentation at a Google event about the future of generative AI and how it's not just for exhaust manifolds on motorcycles anymore, and how digital generative AI was this thing that was coming and then November happened and holy shit, all of a sudden it's here. And so this idea of how we use LLMs to augment the creative process inside of design systems, it's suddenly possible. And not only is it possible, it's really important I think, to the future of this entire ecosystem. So yeah, I mean, we're working really hard on that right now.
Kendall Totten:
That's awesome. Does that make it harder to create roadmaps? If you're working with AI right now and it's changing so rapidly, is it hard to project where you and your company are going to be in three years or five years?
Chris Strahl:
Yeah. A startup that says they actually know where they're going to be in five years, it's probably not being honest.
Kendall Totten:
We can all dream.
Chris Strahl:
Yeah. I mean, well, you can have a vision, right?
Kendall Totten:
Yeah.
Chris Strahl:
I think that the vision for me is that people take the creative process of building products and they use Knapsack to do it. That's to me, what I see us doing is it's like there's not going to be like, here's a bunch of code tools, here's a bunch of design tools. It's going to be like, there's one platform where you build your products inside of it, and you do a combination of things with code, a combination of things with visual design, and all of it is augmented with AI to allow us to build better products faster. And that's what I want. That's the thing I want to build. And I think that there's a lot of cool momentum in our direction for that. And so keeping that in mind as that's the thing we're building, we're pretty good at seeing the next six months.
Getting much further along than that is a little bit hard. For example, one of the things we also really want to do is we also really want to build in a system that understands what contributions and what units of work need to exist inside of the design system. So what do I do to improve this? What do I do to contribute to it? And so almost issue queue management, but probably not as heavy as a Jira or a GitHub issues type thing, that allows you to integrate with those platforms to understand what you need to improve the design system. So we really want to build that too. And I think the challenge of any startup company at our stage is there's what the customers are telling you, there's what the market's telling you, there's what you have in your head is a vision, and it's about kind of piecing together what's the most important thing that you can work on given all of those different pressures and factors? Because everybody has one way, everybody has constrained amounts of resources, and it's about trying to figure out what's the most important?
Kendall Totten:
Yeah. Yeah. Tough decisions to be made. Well, okay, so I kind of want to end here with a couple of little grab bag questions because we're coming off the rails of AI in the future, and this is going to be amazing. I want to rewind and say, "Let's go back to core HTML. Why is DatePicker not a component yet? Why is it not an HTML tag? Why is card not an HTML tag?"
Chris Strahl:
Yeah. W3C if you're listening to this, honestly, I hope that HTML sticks it is, right? I think that the ability to have a bunch of solved problems in UI exists as a part of a spec would do so much for us. This makes me crazy because the whole trend is still native apps and oh fucking native apps. There's so much-
Kendall Totten:
Tell us how you really feel?
Chris Strahl:
Right? There's so much that is a native app experience that is just an encapsulated web experience that drives me crazy. There is definitely a time and a place for native apps where you're taking something you couldn't do on the web, and you're putting that on a device centric thing. But so many people create native apps just simply because the patterns are better defined there, or you have access to things that you can't access in the web. And I think that the web kind of missed the boat on some of this stuff. Where had our spec, had our idea of what the web could be, could have evolved faster. The web is a much better platform than having a freaking app for everything.
Kendall Totten:
Well, and I mean, web components are the bridge. Anybody's listening, I'm sure a few of my coworkers and past coworkers are saying, "What do you mean? We worked on a web component library." Yes and, it's supposed to be a bridge that helps you to build and teach the browser, hey, this is a basic tag you should already know how to do, but a certain point, it really should make its way into the spec. Let's not keep reinventing the wheel over really basic stuff.
Chris Strahl:
Yeah. I got pretty down and nerdy with Brad Frost about this a couple of weeks ago where we were basically talking about the idea of, okay, so if we're able to put... DatePicker is his favorite component, if we're able to put date picker into the HTML spec, what are the things that exist in the pre-spec state? And we kind of were like, "Yeah, web components." There's a web component for long enough and enough people are using that. Why wouldn't we incorporate that into how we think about HTML? And make that something that the browser just knows?
Kendall Totten:
I mean, this is just an extension of the design system process, right? Of teams creating new components, and as soon as a handful of people are using it, great, it's time for it to go into the system, make it official.
Chris Strahl:
Yep. Totally. There's a lot there. That's also really interesting about personalization in the web. You know you get the idea that everybody, especially in the age of AI, carries around some sort of personalization token about how they like their experience to be rendered. And if you have the ability to say, "Look, me as Chris, I densely packed information, I like few animations or visual distractions. I like a high contrast color scheme, and because I'm getting old, the font size needs to be 25% larger than average." The ability to carry that around and have a UI not completely change itself, but remix it a little bit based on your own personal flavor, that does a ton for assistive technology, that does a ton for accessibility, that does a ton for just generally how we experience the web as individuals.
Kendall Totten:
Yeah, absolutely. And that's one of the main reasons why I'd love to see it move into the spec, which I realize is a lot of work. So it's easier for me to just say, but you know you don't have a bunch of variations out there that are not accessible or difficult for people to use. Where my favorite is when you're clicking the button to toggle to the next month, next month, and it jumps and the button moves around based on the length of the name of the month. I'm like, come on, this is-
Chris Strahl:
All the same place. Right?
Kendall Totten:
Okay. Last question for you. Outside of design systems, outside of Knapsack, what are you learning about right now? What are you excited about?
Chris Strahl:
I've actually been spending a bunch of time in the greater systems space talking about these ideas of systems thinking inside of organizations, and design systems, yes is a part of that. It's a very hard systems concept inside of something that has been kicking around. And the idea of systems thinking as an encapsulation of design thinking inside of broader parts of the organization. So if you're in a design ops organization, like design thinking is a part of your day-to-day life, but how is systems thinking changing the way that the enterprise functions around you? So I'm spending a bunch of time there, and then of course, figuring out how to be in balance between two adorable little boys, and a startup, and all the other interests that I have. And so I spent a lot of time kind of just trying to figure out what being a parent looks like, and that's wild, right? There's still moments of mind-blowingness there that is super crazy.
Kendall Totten:
The final frontier.
Chris Strahl:
Exactly. Hey, Kendall, this has been so much fun. I can't believe it's been an hour already, so I really appreciate you doing this and honestly for coming up with the idea. This has been super cool.
Kendall Totten:
Yeah, my pleasure. Take care.
Chris Strahl:
That's all for today. This has been another episode of the Design Systems podcast. Thanks for listening. If you have any questions or a topic you'd like to know more about, find us on Twitter at the DSPod. We'd love to hear from you with show ideas, recommendations, questions, or comments. As always, this pod is brought to you by Knapsack. You can check us out at knapsack.cloud. Have a great day.
