Stripe Head of Design Katie Dill Breaks Down Their New Website

Even the most successful websites eventually need a redesign. Take Stripe for example. After six years with the same homepage, they recently unveiled a brand new site that reflects how the fintech giant has evolved over the past few years. So when is the time right for a new landing page? And what should you prioritize in the redesign? In this episode of Design Review YC’s Aaron Epstein sat down Stripe’s Head of Design Katie Dill to pull the curtain back on their high profile redesign and to discuss how their team is evolving in a world dominated by new AI design tools.

• 0:00Speaker 00

  Today, I am thrilled to welcome Stripe's Head of Design Katie Dill back to the show. Katie and her team recently launched a brand-new Stripe homepage. She's going to take us behind the scenes of the new website and talk about how AI is changing her team's design process. Welcome to another episode of Design Review.

• 0:26Speaker 00

  Katie, thank you so much for joining us again.

• 0:28Speaker 01

  Well, thank you for having me. It's nice to be back.

• 0:30Speaker 00

  I saw, along with everybody else, when you launched the new Stripe homepage. And I thought it would be amazing to have you on and kind of take us through the old site and things that you wanted to change about it and update, because I know it's been a few years since you launched that one. And then take us through the new one and talk a little bit about the process that you used in order to get to where you guys landed with the new one.

• 0:51Speaker 01

  I do enjoy a good design crit with you, so let's do it.

• 0:54Speaker 00

  All right, let's jump into the original site. So how long ago did you launch this one?

• 0:58Speaker 01

  This one was from 2020.

• 1:00Speaker 00

  Okay, so we're talking six years ago at this point.

• 1:02Speaker 01

  Kudos to the team. I wasn't there at the time, but I do think that they built something that stood the test of time quite well. We weren't, you know, oh, my gosh, we have to change it. It's been too long. It's just, you know, it doesn't work anymore. It actually was standing up quite well. And when we endeavored to change it, it was because the business had just evolved beyond the point of what this story was being told on this site. And I'll explain that a little bit. Of course, we wanted to kind of freshen it up as a part of our brand that also had been evolving and becoming more sophisticated and reaching, you know, a broader set of users. But still, it was a good site. So I can point out a couple of things that we aimed to change.

• 1:42Speaker 00

  Yeah.

• 1:43Speaker 01

  So one, you know, this evolved over time. We certainly had changed the words on the site and exactly how it was portraying what we do. And then also some of the product shots that we were including. And then, of course, our users, as we continue to evolve and help more in different categories or larger enterprises or growing startups.

• 2:06Speaker 01

  But then, as you go down the page, we were articulating the number of things that we do. And this is actually one of the things that had evolved the most over the last couple of years, because our product suite was evolving. And so, for example, we started with payments being a main part of our business. But over time, payments is just one part of it. We now, today, serve multinational enterprises in many categories, including helping them with subscriptions, helping AI companies with usage-based billing, tax revenue recognition, platforms like Shopify, and helping them move money for the businesses on their platform. And so, these stories were coming through here,

• 2:50Speaker 01

  but you were kind of only getting a glimpse of the product offering that Stripe provided. And so, this was probably the biggest thing that we realized that we needed to change. So, we needed to adjust that. And the other piece is that, you know, the page grows quite long. There's a lot of trying to be told here. We were doing that thing that happens over time, where you kind of add on and add on, and we're kind of losing the narrative with the site. And so, we thought to think about ways that we could update that narrative. Now, of course, you could adjust what was here, but we realized that it was also time to refresh the visuals. I don't think that the visuals came out of fashion, but it also just didn't feel like it took

• 3:34Speaker 01

  the sophistication of how the business itself evolved. And we were seeing it, honestly, in the way that our teams were kind of rolling out this design language. There wasn't a lot of clarity on, how do we use this 12-degree bar? How do we use colors and overlays? How do we use our typography? The gradient wave that's at the top was certainly an element, but didn't really scale well. So, we had to create a new design vision for our language and then update the story.

• 4:03Speaker 00

  It's interesting, because you mentioned that visually, I look at this, and this looks like a site that could have been launched yesterday. And I think that's a testament to how Stripe has always been so far ahead of the game from a design perspective, that you could have a site that's six years old. And obviously, you made updates to it over the years. This wasn't literally the site that you launched six years ago.

• 4:22Speaker 01

  Right.

• 4:23Speaker 00

  But clearly, it has stood the test of time, which is really impressive. It makes sense that you've got all these different customers now. It seems like the approach that you took with the old one was just keep adding sections that would target different types of users and hopefully people would scroll until they hit the one that's right for them. And it sounds like maybe you've rethought that for the new site that you launched.

• 4:42Speaker 01

  Yeah, I mean, a perfect example, AI is a very big part of our business. It's both like how we build, what we build and who we build for. Over 78% of the Forbes AI 50 use Stripe. And they are using our products to help them scale really fast and help them monetize in new ways, right? So, usage-based billing so that you can make the right moves for your inference's costs and how your users are actually using your product. And it's a tile on the website. So, the story was missing, like what we're actually building wasn't coming clear. And so, when we realized, okay, now it's time to update our site. I would say there's a couple of things on that front, which is, one, the first principles, what are we trying to do here? What is the point of a website anyways?

• 5:27Speaker 01

  And remember, being in a meeting where Patrick asks, like, well, what is the point of a website? I think one part of it is it's your manifesto, whether you explicitly call it that or not, because you're demonstrating who you are, what you are doing and why you do it. And in some indirect ways, right? It's just like the nature of the way that you build your site, how you present yourself, what colors you choose, what typography you choose, the details that you choose to care and the ones you don't. And then, of course, how you articulate what you're doing and what you offer. So, we set out to make sure that the story was extremely clear for who we're serving and how we're serving them and what we care about. And so, that's where, you know, honestly, painstaking hours over a year or more is what, you know, ended up going into this.

• 6:11Speaker 01

  Partly because in some ways, we weren't rushing to get something out. Like when we're building something for our users, it's like, okay, it needs to be out, like it needs to be out tomorrow because they're dependent on this. This was like, it was for ourselves in a lot of ways. And so, we certainly could take the time to sniff out the right design and, you know, get on that scent. And, you know, but there were many weeks and months of design exploration where we liked it, but we're like, no, that's not it. Yeah, we're not ready to, you know, wear that shirt for the next six years or whatever it might be.

• 6:42Speaker 00

  And so, it's financial infrastructure to grow your revenue is the first one, which is the exact same for a sentence. So, that has remained consistent. And it seems like what you wanted to add here was the extra things here. That would catch other people.

• 6:54Speaker 01

  Yeah.

• 6:55Speaker 00

  That where Stripe would actually be the right product for them too.

• 6:57Speaker 01

  Yeah.

• 6:58Speaker 00

  One of the things that's interesting is I like looking at sites and trying to figure out what is something that only this company could do that nobody else could do? And one of the things that stands out to me is the GDP counter that you have here. It's not many companies that could, um, that could have a live counter of the percentage of the global GDP, not even just US GDP that is running on Stripe. Talk about the decision to put that right up at the top as well.

• 7:24Speaker 01

  Well, I would imagine a lot of, you know, people watching and people building websites are thinking about, well, how can we demonstrate the, the impact that we're having? The, the reason why you should trust us, the social proof, you know, what users trust us before? Uh, these are important messages. They, they help the, you know, the, the potential customer understand like whether or not this is a brand that you could trust and okay, good to know that you've done it for others. As I expressed earlier, like we're, you know, trying to help everybody from a micro entrepreneur who's going to grow a startup to hopefully great success, as well as these large enterprises. It matters a lot to them whether or not that Stripe is dependable, reliable, trustworthy, and can operate at their scale.

• 8:03Speaker 00

  Yeah.

• 8:04Speaker 01

  So we ask ourselves, well, how do we express that? How do we help you see that we can? Of course, one of the ways is that we tell you about the users that use us. And you can see that scrolling across the bottom. But another way is like, you know, the actual enormous impact that we have had, the, the privilege and the responsibility of serving in, that can actually be quantified in the GDP.

• 8:22Speaker 00

  Yeah, I love that. And the other key word here too is billionth. You know, like that just signals if you do billions of transactions, Stripe is right for you.

• 8:30Speaker 01

  Yeah, YC companies.

• 8:32Speaker 00

  Yeah.

• 8:33Speaker 01

  You've got this.

• 8:34Speaker 00

  Yeah. Very cool. Okay, take us through the other sections that you, you put underneath that.

• 8:39Speaker 01

  Yeah, all right. So this next section is what we call our bento. And so this is probably the big area that's seeking to solve some of the problems I talked about earlier, about really expressing kind of like the scale of the product offering. And so before you saw like, okay, we do issuing, we do payments. Uh, but here we're trying to depict a little bit more of the solution set. And so, payments, yes, we do payments. We do online payments. We also do terminal. Billing is, you know, what we were talking about earlier, about usage-based billing, or, you know, could be fixed fee subscriptions. Any number of these types of things are a lot more adjustable and customizable to the businesses we're serving. We talked a little bit about

• 9:19Speaker 01

  the role that AI plays in the organizations, and so we wanted to make that clear. Our issuing product, stable coins, and then, of course, the way that we provide for platform businesses and marketplaces. And so, what we're trying to do here is not overwhelm you with too much going on. I mean, I know there is a lot on this page, but you can see that there's a very little text. We're just trying to get the point across to give you enough of a sense of like, okay, this may be for me. And then what we're really trying to do is show rather than tell. So hence the imagery. And then the quick way that you can gain more insight is we do this kind of overlay, this larger modal, so you don't actually have to go off

• 10:03Speaker 01

  your course. You're not, we're not taking you away from the homepage yet, but we can give you a little bit more of a sense of what this is all about. There's many products layered into this, right? Like, you know, we, on that Bento, it's one, two, three, four, five, six. But that's, you know, I think we have many, many more dozen products on top of that, that we can't express all on one page. That would just be too much and would overwhelm you. So we want to give you essentially progressive disclosure as a way of getting towards the more details behind the products and more things that we offer.

• 10:33Speaker 00

  Yeah, that's very cool. I don't know that I've seen this specific design with the Bento box and the modals that you can pop up that give more information directly on the page. It's an interesting, smart choice, because rather than take people to a dedicated page, you keep them right here, show them what they want, you give buttons to jump to the next section, or you can keep scrolling down if this is not the right thing that you're looking for.

• 10:54Speaker 01

  Yeah, you want it to feel light. You want it to feel easy to kind of explore and engage. And you're taking them on a journey, for sure. You want to help them get to where they're going. But yeah, I think if we leapt people off the page, you know, it might be too early for them to have made their decision on what they're actually going after. So this is really just a bit more of a browse experience and it gives them a bit more of a chance to explore.

• 11:19Speaker 02

  YC Startup School is back. We're hand-selecting the most promising builders in the world and flying them out to San Francisco for July 25th and 26th to discuss the cutting edge of tech. Apply now for a spot. Okay, back to the video.

• 11:34Speaker 00

  Yeah, it's interesting. Another thing that stands out to me is how much animation you use in each of these cards. Talk a little about that and how you can do it without making it too overwhelming or distracting for people.

• 11:45Speaker 01

  Yeah, it's a difficult balance to get. I mean, this is where prototyping and experimentation, like I remember this one where it was like we had too many lines at first and then we had too few lines at first and the ball was moving too fast. So you do have to really fine tune, bring it in. You know, one of the things, as I kind of pointed out earlier, and when you're building a website like this, you are either, you know, both directly and indirectly expressing your company's manifesto. So one of the things that we are trying to express is the care that we put into the work that we do. Because if you see the care that goes here, then you're right to assume that we also put that care behind the scenes in the way that we move money and the way that we protect a company's information. These are important details to express.

• 12:27Speaker 01

  It's also, you know, the idea of making the site feel a bit more alive, you know, that there's a presence here is something that I think the motion does really well. You were right though, if you go too far with it, it becomes distracting, it becomes annoying. Nobody really wants to engage with that. And so it's just delicate movements and really just like trying to fine tune it. And also thinking about the role that when somebody engages with it, that's where, you know, you bring certain things to life and make sure that you're responding. And this gives the feedback to also register like, okay, I can click on this. You might not have known that otherwise. So we try to engage in that way. This is where we're basically, these are kind of like the big important metrics that can help you understand, again, the kind of the scale of what we build. And, you know, of course, there were versions

• 13:12Speaker 01

  where we could just put the numbers there. But what we intended to do with this is to just add a little bit of interest. It is loosely communicating the intention of these metrics. It's not really a data viz, of course, but it gives you a sense of like, okay, here we're talking about global scale. Here we're talking about uptime. And so you kind of get the sense of continuity here. But really, it's just fun. It's just beautiful. And then there's, you know, it changes depending on what time of day. But if you want to go ahead and see what it would be like at night, you can come in and check it out yourself.

• 13:46Speaker 00

  It feels like we're entering an era now where websites can be fun again.

• 13:50Speaker 01

  Yeah.

• 13:50Speaker 00

  They were fun early on. And then it got to a point where every SaaS website looked exactly the same. And it's really cool to see you focused on things that are just fun for the sake of being fun.

• 14:00Speaker 01

  Yeah, I mean, I'm I'm AI hopeful that the creation of these tools that can help us move so much faster and basically get to like, get to good almost like instantaneously and almost for free. And now, great, we can take that time to then push it that next level and to create something that is really interesting and playful and beautiful.

• 14:22Speaker 00

  Yeah, I think what's interesting here that's maybe worth for anybody watching to pay attention to is that these aren't animations for animation's sake or interactivity for interactivity's sake. There's there's an intention and a purpose behind everything that you're doing. And it's connecting to the specific message that you're trying to communicate with each of these numbers. And it's easy to look at it and go like, oh, yeah, it's just like a fun kind of thing. And it is that, but it's not random.

• 14:44Speaker 01

  Yeah.

• 14:44Speaker 00

  And a lot of thought goes into that, I'm sure. Like, talk about some of the different things that you explored or were people even against putting this in, thinking, well, what value does it have? And every inch of the screen has to have, you know, directly measurable value.

• 14:58Speaker 01

  Yeah, well, what's also interesting is it's this section that the site didn't launch in December. So we we ended up launching in January. And we were at a stage with this where like, we had something good. Like, we had, you know, all four. Animations, but they didn't move quite the way, you know, we thought would feel really smooth and really intentional. And the extra detail of how they transitioned from one to the next, just like felt a little klugey and wasn't quite as smooth as it could be. And it was a decision, you know, a group decision that we should wait and we should

• 15:43Speaker 01

  do it right. We could have, well, let's just only do three, or let's just only do one, or maybe you don't make the move. And, you know, for sure, what we don't want to get in the habit of is just like pushing timelines out to the end of time. But this was a decision that it was worth it to get it done well and make it actually a kind of joyful experience that demonstrates, you know, that love and care and the technical ability. And, you know, it was over the holidays and so pushing it another week was, was not going to be, you know, the end of the world, but also a really good thing in the long run about how it feels within the overall composition.

• 16:20Speaker 00

  Yeah, very cool.

• 16:21Speaker 01

  So this area is a place where we're talking about our users, but we created these images. So it brings together Stripe, the brand, and the companies that we serve. So each one of these is custom made and it's intended to express a bit of the brand that we're highlighting as well as the Stripe brand with the parallelogram. You could look at this and you could be like, oh yeah, great opportunity to use AI, as did we. We're like, great, we're going to use AI and it's going to be awesome and we're going to get these done in a, you know, a day. Now, of course, like the reality is, you know, building with AI is actually also, you know, something that is, it requires the love and care and attention of the makers.

• 17:03Speaker 01

  And so there was definitely a process behind it, but these are really just meant to bring some interest and kind of, again, as you're trying to express through visuals, a lot of people scroll really fast through the website, right? At least I do, I don't know about you. But when you're, you're trying to get them to like take a beat, almost like a song, you know, it's like one of those like key moments of punctuation and where do we want, you know, folks to slow down and take a note? And also, when are we trying to express something, like, you know, trying to communicate the type of brand that we work with, especially if you're, you know, not familiar with them.

• 17:35Speaker 00

  And now we've moved to a darker background. Is there something intentional behind that now?

• 17:41Speaker 01

  Well, this is an area that we're talking about our integrations and the way that our APIs work. And certainly, there's a developer language. Not everything has to be in dark mode, but it is actually something we have done on the previous site as well. And so we wanted to carry that forward. This is the area that we call Squeezy Boy. Design is definitely more fun when you can give everything a fun name. But it is an area where we're kind of just showing some of the things that are comings and goings. And so this is our Black Friday, Cyber Monday city that we had built, our podcast Cheeky Pint. So this will always be changing with different things that come through. But we

• 18:25Speaker 01

  wanted to, once again, have a little fun with how we portray these things, make it easier, and also inviting to engage with. Certainly added more challenge to it. So for example, how do you get an image that when it's this size is going to make sense as much as it's going to make sense when it's this size? So this was tricky to build it right. And so quite a bit of iteration on that. But the team found a clever way.

• 18:50Speaker 00

  It's amazing seeing the finished product here. And everything is so polished and put together. But I think it's really easy to miss all the work and the iteration and the process that goes on behind the scenes there. I would love for you to take us through, show your work on all these different sections and all the iterations that you went through to ultimately end up at this point.

• 19:07Speaker 01

  Well, okay, we're starting here on the top where we have this wave. I've worked at Stripe now for five years, and I cannot even tell you how many different variants of a wave or gradient, a gradient wave that I have seen and been a part of. I think we are trying to find every possible solution. On this project, we knew we wanted to bring a lot of color and joy to the experience. And we knew that a wave or gradient wave like we had before is a key way to do that. And we enjoy that part of the brand. But which wave? How to do it? What's going to stand the test of time? What could be on there for six years potentially and give you a

• 19:51Speaker 01

  Bit of joy when you visit, but not overdo it. And what's super cool is that our wonderful Edge team created this tool where we can experiment and get the right wave.

• 20:03Speaker 00

  Perfect wave.

• 20:04Speaker 01

  Exactly. So you could just tweak, do I want that much blur? No, not that much. Do I want more grain? No, not that much. Let's see. We want to also switch it on the scale. How do we want it rotated? How thick do we want? How much texture do we want? You know, the reality is, is all of those factors matter so much. Like, what exactly is the color? Like, that's a little like, that yellow isn't right, right? That's not what we ended up with. Like, we want to find just the right color mix, just the right texture, just the right movement. And having a tool like this was essential to make that happen. And then, you know, we first get it right and like, okay, we see how it is here. And then becomes the building process. Like, how do we actually build it so it's also performant? And is going to, you know, operate really smoothly on anybody's computer.

• 20:50Speaker 00

  And I noticed some buttons here. It looks like you can save the state. So do you create different variations of these and then kind of test them against each? What was the process even of using this?

• 20:58Speaker 01

  Yeah, before we even got in that tool, we were even just trying to get centered on, well, what is it that we're actually trying to achieve with the wave? What are we talking about here? Like, well, how vibrant do we want to be? Or do we want, like, prefer it muted? Like, some of these were really interesting. But is that the right feel for the page or not? You know, there, this is one of our previous waves from one of our event sites, which was monochromatic, but also really bold. Or do we want to be a little bit more diverse and more rainbow-like? And so we looked at each of these kinds of ways of thinking about it. And then, you know, essentially had discussions about like, well, is it flat? Or is it an object with a form? And these great discussions help us tease out what we're actually trying to do.

• 21:43Speaker 01

  And of course, you know, Patrick is, was heavily involved in the site as well. And so we had many discussions with him. It's like this, this wave feel right? Because when you're, you know, creating a new homepage, it's almost like, yeah, you're deciding what clothes you're going to wear for the next many years. So it's a big decision.

• 21:58Speaker 00

  It's amazing seeing the literally infinite variations that you could come up with here. I imagine that makes it harder to just make a final call. What is that process? Who decides and? And you know, how do you decide like this is the one that we're going with? And and move on from this because you could probably spend forever.

• 22:17Speaker 01

  Yeah, it's very, very true. Usually, well, for something like this, Patrick was definitely a part of the decision making process. And so usually, you know, with the team, we will look at quite a large range. Then we will down select to, you know, a subset of those and say like, okay, these are the ones that we're comfortable with. We don't want to put in front of Patrick ones that we're like definitely not comfortable with or wouldn't recommend, although it's always helpful to show kind of like the process and what we did explore. But then we look at the ones that are likely a very good fit. And then we'll have a conversation about what, you know, feels right for him. And luckily, you know, he's also exceptionally decisive and has very good taste. And so we usually can use that as a conversation of like, okay, this one feels right.

• 23:01Speaker 01

  But I'll also admit, I mean, this is one of the blessings and the curse of the design process. If that's something that can feel great here or on a board or in isolation, all of a sudden feels very different when you actually put it in place and you feel it. You feel it with the rest of the typography and the logos on there and the various other things. And also just like sit with it for some time. So we definitely evolved it over time. Something that may have felt right at one point starts to feel, you know, just like it isn't going to stand the test of time. And then we'll want to change it.

• 23:30Speaker 00

  Yeah. So at what point in the process do you go from looking at a bunch of different variations on this like flat to an object with a form or quiet to turbulent? And then actually get it coded up and working live in the page so that you can get a sense of what it actually feels like live?

• 23:45Speaker 01

  I mean, I would say the goal is as quickly as possible to get it into a state that would be like the way a user would experience it. Because it is really hard to judge anything in isolation in a way that isn't like the user would be. That's what you're trying to do is just like put yourself in their shoes and then see what that would feel like. Sometimes we're just, we're not there yet. Like it could take some time to code it up. And so we want to start to down select just so we know like should we code, you know, these five versions or you know, these five versions. And so we would start perhaps with something that's more of just like a static visual and just get a sense. Okay, we want to go over here or over there. But that's where that tool comes in hand because this allows us to essentially, you know, get many versions at once.

• 24:29Speaker 00

  Right.

• 24:29Speaker 01

  And so we can play with them together.

• 24:30Speaker 00

  Yeah, and one of the other things that you might not get to experience just playing with it in frames is it, it comes behind the text there. And so you have to change the text color and make sure that the text is readable and not distracting. And it interacts with all these other elements on the page that are really important, too.

• 24:45Speaker 01

  Right.

• 24:45Speaker 00

  You talked about a few different Bento variations.

• 24:48Speaker 01

  Oh, yeah.

• 24:49Speaker 00

  I'm curious to see some more of those.

• 24:50Speaker 01

  Yeah, so this is the Bento where we're trying to communicate a lot of different things that we do. And what's the right way to communicate this? We looked at a ton of different things. And so what we're trying to figure out is, you know, if you're, what kind of user are you? Are you a micro entrepreneur with a small business? Or are you a large enterprise? Are you interested in billing? Or are you interested in connect these things? Do we want to show you them all in one screen? This might be an approach so we can get there faster. Because of course, on any website, the more you scroll down, the less users get there, right? So what if we just squished it all in? Well, that's a lot. It's pretty type heavy. We're not doing a whole lot of showing versus telling.

• 25:34Speaker 01

  We looked at these kinds of sections. This is a little bit more similar to our original site that I showed you, where you just kind of like pass through section and by section. This felt like a little too scroll-y telling, right? And it's just like, kind of, you want to get to it and you want to get to it faster. And you want to be able to get a quicker sense of what we offer. Then we have here a essentially an accordion. So you could press these things to then open them up and see what we have. This one, we actually did take to user research. And unsurprisingly, it was not a quick way for people to really digest a lot at once, because it requires effort, you know, even if it's not a lot of effort, right?

• 26:16Speaker 01

  But you you want somebody to tap on it, or you want them to scroll over it. And, you know, otherwise, you're trying to introduce something to them like manage a marketplace end to end. Like, you might know what that means, but you might not.

• 26:28Speaker 00

  Right. Would you be interested enough to click through?

• 26:30Speaker 01

  Yeah.

• 26:31Speaker 00

  And most people just don't click tabs.

• 26:32Speaker 01

  Yeah, exactly. So that's why, you know, again, this didn't feel right, and a more visual one was definitely a better choice. But there's a lot of different variants here in the way that we explored how to communicate this. And then, again, you know, it just, we have to remember that when people are coming to this site, they're in a more of a lean back mode, they're in more of a browse mode. So the idea that you're going to put your most important messages a click away is going to be tough. And so that's where the Bento kind of won at the end of the day, because it was just so much more visual and I would say kinder to the users, because it meant that they could be in that lean back position.

• 27:10Speaker 00

  Talk a little bit about the process and maybe how you used AI in building this.

• 27:15Speaker 01

  Well, so, yeah, we'll start with the images, and then there's other parts of the process there. But these were certainly a type of thing that lent themselves to AI. I think AI is really good at these pictures that seem, you know, super real. And so this is kind of what we're going for. Now, it seems like it would be pretty simple to ask a, you know, an AI, like, you know, free pick or whatever of like, you know, give me a parallelogram inside this thing. But the reality is, you know, the nuance and the details really mattered to us. Like, you couldn't just put something that sort of got there. It had to feel like it was, you know, at the same level of love and care as these other things. What was really kind of funny was the process here, because, you know, one wouldn't have

• 28:00Speaker 01

  thought that Bubbles would have taken so much of our attention, but they sure did. So here was a version that we had for a different user that is not depicted on the site just right now. And you can kind of see like, okay, yeah, it's an ice cube in the bubbles and generally, what do you think? Looks okay?

• 28:17Speaker 02

  Yeah.

• 28:17Speaker 01

  Looks real?

• 28:18Speaker 02

  Yeah, ship it.

• 28:19Speaker 01

  Well, this is the team's thoughts on the matter. And so each one of these things is actually a critique of, you know, where it just doesn't feel quite real.

• 28:29Speaker 02

  Right.

• 28:30Speaker 01

  The example from Urban or URBN is the, you know, how well does this all feel like the right Urban layout? Now, gets a lot of it right, but when you take a double look, her arm isn't quite right, he doesn't quite have a hand, you know, that shadow isn't exactly how it would be. And so the detail in each of these little nuances, like each pixel, basically needs the same amount of attention. So I think what AI is helping us do is it's helping us speed up our process and certainly helping us explore more. We can look at, you know, 20 ideas in the time it normally would have taken to look at two.

• 29:12Speaker 01

  However, the, it doesn't replace craft, it doesn't replace taste, it doesn't replace, you know, the attention to detail to ensure that you're getting each of those things right. We're really excited about how it's sped up prototyping and sped up experimentation. So it's like, you know, how should these accordions move? Should it replace this? Should push that? We can mock that up really fast. And then saves engineers countless hours and designers as well as they're exploring different varieties. It's also really great for user testing. If we want to be able to change all the words in here so that it feels one way for one user that we're talking to versus another, we can do that really easily with AI prototyping.

• 29:54Speaker 01

  I would say even during that time period, you know, what we were exploring was, you know, feels old fashioned a year ago versus how we explore today.

• 30:02Speaker 00

  How about like the role of designers? You know, it's, it seems like it's not just pushing pixels in frames in Figma.

• 30:10Speaker 01

  Yeah.

• 30:10Speaker 00

  Talk about what the designers on your team are doing and the role that they played in. And actually building this.

• 30:16Speaker 01

  What designers at Stripe endeavor to do are to create things that feel like they push the status quo forward. And that kind of all harks back, right, to the idea of like, what is the global progress that we can provide? And we want to do that via design as well. We want to create things that are exceedingly easy to use, that are also really, really powerful, and that can help people solve problems, or to help them build their business, or help them accomplish what they're trying to do, but do so in a way that actually just brings a little joy to the day, too. You know, because frankly, that's part of progress as well, is that like, a beautiful world is definitely a better world. I want to live in that one. And so designers are trying to create things that are going to be really intentional for

• 30:56Speaker 01

  our users, but also do so that's, you know, in a creative and thoughtful and differentiated way. And I would say the tools that we're using are allowing for that now, hopefully better and faster, you know, as we talked about earlier, is that, you know, I think AI can, you know, give us opportunity to keep the base, like, to raise the floor essentially, to create baseline products, maybe the like, the seven out of 10, really quickly, really easily. But then, what do you do with that extra found time? Do you just like, ship that and just like, you know, ship more sevens out of tens? Like, boy, I hope not. What instead we want to do is, you know, get the things that are just like, okay, that's a very typical modal to, you know, accept somebody's email address to sign them up.

• 31:40Speaker 01

  Like, maybe you don't need to reinvent the wheel there. Like, as long as that is like, a really good version of that, then we're good. But now, can we spend the time to think about new paradigms of interaction? Like, for example, people are using agents to build their businesses now. They're using agents to basically do everything under the sun. So what is your agent experience? How good is that? What is the the user's experience going to be, like, when they are traversing, you know, the internet or their tools in that way? And so that's where I would say designers are putting more time now, is thinking about those new paradigms of interaction, and trying to think about, like, what is great experience, or user experience, or agent experience look like for tomorrow?

• 32:19Speaker 00

  We have incredible new tools that are available for everybody. And one of the trends, obviously, that we've been seeing a lot of is everybody within a company now having the ability to ship code and improve products and update the website and you know, the core product that customers are using, which I think is really powerful. And one of the questions that I think that that comes out of that, especially from a design perspective, is how do you keep it so there's this cohesive design language and it stays to the bar that you is so important to you and the rest of the team without being directly in the flow of how new code gets written and shipped and going live on the site?

• 32:59Speaker 01

  Yeah, I'm really interested to see and be a part of the evolution of design systems in this way because design systems have always been a way to help a team scale. So as an organization grows and you can no longer just know what the right thing is because you know, there's 10 of you seated around the table and you're all just talking about every single thing you do. When you scale, like it helps the organization make decisions together and ensure that there's coherency in the user's experience. With AI tools, I think that we're going to see a whole new wave where these systems are, you know, kind of managed by the AI tools and that can help us scale things a lot more quickly.

• 33:42Speaker 01

  And so, for example, as I mentioned, I, you know, drew a sketch of what I wanted to see built and then I put it out in the AI tool and then it uses the components from our design system to piece that together for me and get a like the rough version. Then I want to, you know, push it here and there and actually, you know what, that component isn't really fit to purpose for what I'm trying to do here. So this is where we're going to need to push from that. And so then can the AI tool help me actually expand the design system and actually help to grow it for the use cases that we need? And so I think there's a lot that is going to be facilitated in terms of bringing more high-quality things at that like baseline. But honestly, I mean, this is what people have to choose to do because sometimes it's

• 34:27Speaker 01

  so easy when you put it in the, you know, the AI tool and it spits back a thing and you're like, oh, that that was fast and that was easy and that's pretty good. And you will like, you can feel it in yourself just being like, yeah, I guess that's enough. But like, the reality is like, don't be wooed by, you know, just how easy that was to achieve. But instead, ask yourself like, but is this really, is this really great? Is this like, have I really hit the mark? Is this really going to achieve the goal? Is this really going to feel like it's well crafted and put, you know, intentionality behind it? And then, you know, sometimes that takes, you know, another rev and another turn and, you know, the, the way that, you know, our tools today can allow you to kind of go back and like, no, tweak this little bit and tweak that little bit.

• 35:09Speaker 01

  And essentially, the merging of design and edge tools and one allows you a lot more ability to kind of customize that. So you don't need to accept slop and you shouldn't accept slop. You should, you know, hunt for, fight for the right solution.

• 35:23Speaker 00

  What are some more principles like that that you try to instill in your team?

• 35:27Speaker 01

  I mean, I think, I think a part of it is, you know, the reality is, and I think we may have even talked about this last time we talked, like, the gravitational pull is to mediocrity. Like, it is just so easy to accept good enough. And I think it really, really takes intentionality and you really have to think about like, what is the cost of accepting good enough? And I think in that one decision, you're just like, well, it's just fine. Like, it's just like ship it, like, you know, it achieves it, like, you know, I really, you know, we, we've got too much to do. And, you know, is it like that data viz thing we were talking about before, like, it's, it's pretty good. You know, we get like, wouldn't it be great to like, get the team on something else and you, you know, weigh all these other costs and you think about it and you end up making

• 36:11Speaker 01

  a decision to go for good enough? But think about if you made that good enough decision. Every day, all day, every day. And then think about how many companies do that, right? Like, how many companies really stand out to us as exquisite and exceptional? And that like really hold that bar up? That reminds you of just like how hard it is to fight that fight of like, well, if I let this slide, you know, what else am I going to let slide? And what is that like composite going to be? And then I think a lot of people make decisions based on, well, you know, the team put so much effort in, like, I'm gonna, you know, upset the team if I don't go forward. It's like, well, how happy is the team gonna be if the product is just meh? Fight the gravitational pull to mediocrity and do not leave well enough alone.

• 36:56Speaker 01

  And really look for the thing that's gonna make a difference. I think the other thing that we talk a lot about internally, and I think is really important for folks to consider when they're building products and experiences, is what is the user going to experience at the end of the day? You know, we get a little too caught up in our own world. We're too comfortable with it. And so what I would always say is just like, realize it the way a user would. Prototyping, not presenting. Don't try to communicate to, you know, the stakeholder of like, well, this is why we did this. And this is, you know, the trade off that we fought against and this and that. It's just like, if you're there to talk about whether or not this is the right solution or not, then you should be asking of like, well, how is this gonna feel at the end of the day

• 37:40Speaker 01

  for the person that's going to be experiencing this? And, you know, does that feel good? Without all of that knowledge, do I think that part is the right one? That makes a big, big difference. I would also say when we're exploring different products and like what are, you know, what is actually shipworthy or not? You think about like what the trade offs are. It's like, is this going to negatively impact somebody's day? Is this going to be something that erodes trust? If you don't get this right, is this gonna make it to the front page of the news? So like, what are the trade offs when you're making a decision? And I guess like a lot of the things that I'm talking about here are the things that sound like I'm looking for perfection.

• 38:24Speaker 01

  And I think that's also a dangerous pursuit. Because of course, like, your product is only as good as what's actually out there. What's shipped? It's not what we've been thinking about. It's not what we were talking about. It's not our intention and what we're pursuing. It's what's actually available to the people that you're serving.

• 38:42Speaker 01

  I think progress is probably more important than perfection in that case. And a lot of times, it's not out there until you actually can learn and understand whether or not it's effective, especially with AI tools and the way that you really don't know how people are going to use it and how it's going to respond and how they're going to evolve with it until you can bring it actually to market. And so I think you have to have a kind of a rubric in place about what are the essential pieces to a successful product. I wouldn't call it an MVP. It's probably like an MVQP, like a Minimum Viable Quality Product. Because again, you don't want to lose trust by experimenting with something out in the world. But you certainly want to learn from their experiences.

• 39:27Speaker 00

  It feels like something is becoming even more important these days with all the advancements in AI is QA.

• 39:32Speaker 01

  Yeah.

• 39:33Speaker 00

  And testing. And you know, you talk about having the voice of the user and the perspective of the user in your head as you're designing. And part of what you do at Stripe, which you told us about last time, is walking the store.

• 39:44Speaker 01

  Oh, yeah.

• 39:45Speaker 00

  And you actually go in and you test all of the products yourselves and you do that as part of a company culture and a requirement that everybody does. Everyone is expected to do that, which I think is really important. How has that changed more recently, either within Stripe or certainly with all the changes with AI that have been happening?

• 40:03Speaker 01

  Walking the store is such an important part of building products and experiences because again, like at the end of the day, you're trying to understand what the user's going through. And when you're building something, it's so easy to be like, oh yeah, we're in our product, we're in it all day. I'm thinking about my product all day. But what you're thinking about is that next feature that you launch. And it's really easy to lose sight of what's actually out there. It's kind of funny like how you can create something. You're like, oh, when I shipped it, we did all these bug bashes and it was great. But then you use it and maybe you use it a month later, maybe you use it six months later and it's evolved. It's changed. And the reason why is because probably somebody else shipped something and somebody else shipped something.

• 40:46Speaker 01

  And now it's like, you know, it's in your home when you've updated the dining room, but none of the other rooms. And all of a sudden, the light switches don't match and the colors are off and every other room now looks bad. You have to think about how that composite works together. And for Stripe, for example, we have a number of different business areas. We have our money movement business, we have our revenue business, we have our payments business. And these organizations need to focus and they need to stay true to their mission and what they're trying to get done. But if they don't think about how their product intersects with each other's and how a user might go from, well, I use subscriptions and I use payments and I use tax. How are these things all going to work together?

• 41:30Speaker 01

  Then they're really missing the user experience. And so walking the store helps people see kind of the forest through the trees and see how all these things connect. And yes, we do, basically, it's like a part of the culture that everybody does this. We do have a program that we talked about last time, Essential Journeys, where we have a subset of these journeys, kind of like on a scoreboard and like, are they, you know, red, yellow, green, how good are they? But everybody should be exploring the store, different parts, imagining themselves as different types of users, experiencing different sides of it and trying to find the dead ends. We also do this every Friday where the founders do it in front of the whole company, where they're walking the store.

• 42:15Speaker 01

  One, to just instill how important this is and kind of raise awareness. And also to help people think about, how do you see? Not everybody has the same attention to different types of details. And so I might see something that you might not because of my discipline or my disposition or the user that I talked to earlier that week and so the thing that I'm interested in. And so when we do these things together, we see the value that different points of view bring. So I really love to walk the store with like an engineer in the room and a product leader in a room and a data science in the room because we're all looking at it very differently. And we're all going to point out different things. And that is what like gets us closer to really actually understanding what a user might feel.

• 42:55Speaker 00

  Well, Katie, this has been incredible. Thank you so much for coming. And I feel like it's so rare to get an honest peek behind the scenes and showing the process and all the steps that you had along the way. So I really appreciate you sharing that with us.

• 43:07Speaker 01

  It was a lot of fun. I'm always happy to talk about behind the scenes. I think the blood, sweat, and tears and the effort that goes into it is something that's a part of the work but is often not talked about. I love hearing it from other designers and I'm always happy to talk about myself. Thanks for having me on.

• 43:21Speaker 00

  Awesome. That does it for another Design Review. Thank you for joining us and we'll see you on the next episode.