Stripe Head of Design Katie Dill Breaks Down Their New Website

0:00Today, 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:25Katie, thank you so much for joining us again. Well, thank you for having me. It's nice to be back. 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. I do enjoy a good design crit with you. So let's do it. All right.

0:54Let's jump into the original site. So how long ago did you launch this one? This one was from 2020. Okay, so we're talking six years ago at this point. 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.

1:26Of 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 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. So one, 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. But then as you go down the page, we were articulating the number of things that we do.

2:10And 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 in 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, but you were kind of only getting a glimpse of the product offering that Stripe provided.

2:54And 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 that 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 the sophistication of how the business itself evolved.

3:38And 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 it didn't really scale well. So we had to create a new design vision for our language and then update the story. 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.

4:17And obviously you made updates to it over the years. This wasn't literally the site that you launched six years ago. Right. But clearly it has stood the test of time, which is really impressive. And 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. Yeah. I mean, perfect example. You know, AI is a very big part of our business.

4:47It'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. So usage-based billing so that you can make the right moves for your inferences costs and how your users are actually using your product. And it's a tile on the website. So the story was missing. 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, first principles, what are we trying to do here?

5:25Like, what is the point of a website anyways? I remember being in a meeting where Patrick asked, 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.

5:56So, 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, honestly, painstaking hours over a year or more is what ended up going into this. 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 and 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 get on that scent.

6:30And, you know, there were many weeks and months of design exploration where we liked it, but we're like, no, that's not it. We're not ready to wear that shirt for the next six years or whatever it might be. And so it's financial infrastructure to grow your revenue is the first one, which is the exact same percent. 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. Yeah. Where Stripe would actually be the right product for them, too. Yeah. 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.

7:05And one of the things that stands out to me is the GDP counter that you have here. It's not many companies that could have a live counter of the percentage of the global GDP, not even just U.S. GDP, that is running on Stripe. Talk about the decision to put that right up at the top as well. Well, I would imagine a lot of people watching and people building websites are thinking about, well, how can we demonstrate the impact that we're having, the reason why you should trust us, the social proof, what users trust us before? These are important messages. They help the potential customer understand whether or not this is a brand that you can trust and okay, good to know that you've done it for others.

7:47As I expressed earlier, we're trying to help everybody from a micro-entrepreneur who's going to grow a startup and 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. 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 up across the bottom. But another way is the actual enormous impact that we have had the privilege and the responsibility of serving that can actually be quantified in the GDP.

8:22Yeah, I love that. And the other keyword here, too, is billionth. That just signals if you do billions of transactions, Stripe is right for you. Yeah, YC companies. Yeah, right. You got this. Yeah, very cool. Okay, take us through the other sections that you put underneath that. 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. But here we're trying to depict a little bit more of the solution set.

9:00And so payments, yes, we do payments. We do online payments. We also do terminal. Billing is what we were talking about earlier about usage-based billing or 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 the role that AI plays in the organizations. 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.

9:38I mean, I know there is a lot on this page, but you can see that there's 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 your course. 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?

10:12On that Bento, it's one, two, three, four, five, six. But 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 it 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. 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.

10:48You 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. 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, 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. YC Startup School is back.

11:21We'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. 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 bit about that and how you can do it without making it too overwhelming or distracting for people. Yeah, it's a difficult balance to get. 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.

11:56So, you do have to really fine tune, bring it in. One of the things, as I pointed out earlier, when you're building a website like this, you are either both directly and indirectly expressing your company's manifesto. One of the things that we're 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, in the way that we protect a company's information. These are important details to express. It's also the idea of making the site feel a bit more alive, that there's a presence here is something that I think the motion does really well.

12:36You 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 bring certain things to life and make sure that you're responding. And this gives the feedback to also register like, OK, 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.

13:10And, you know, of course, there were versions 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:46It feels like we're entering an era now where websites can be fun again. Yeah. 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. Yeah, I mean, I'm an AI hopeful that the creation of these tools that can help us move so much faster and basically get to good almost 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. 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.

14:31There'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. Yeah. 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. Yeah. Well, what's also interesting is it's this section that the site didn't launch in December.

15:07So we ended up launching in January and we were at a stage with this where we had something good. Like we had all four animations, but they didn't move quite the way we thought would feel really smooth and really intentional. and the extra detail of how they transition from one to the next just like felt a little kludgy 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 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.

15:56But 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 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. Yeah, very cool. 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.

16:44You 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 day. Now, of course, the reality is building with AI is actually also something that requires the love and care and attention of the makers. 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.

17:16But when you're trying to get them to take a beat, almost like a song, it's like one of those key moments of punctuation. And where do we want folks to slow down and take a note? And also, when are we trying to express something, trying to communicate the type of brand that we work with, especially if you're not familiar with them. And now we've moved to a darker background. Is there something intentional behind that now? Well, this is an area that we're talking about our integrations in 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, so we wanted to carry that forward.

17:59This 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 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?

18:43So this was tricky to build it right. And so quite a bit of iteration on that. But the team found a clever way. 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. 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 wave that I have seen and been a part of.

19:22I 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 a 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 bit of joy when you visit but not overdo it? And what's super cool is that our wonderful Eng team created this tool where we can experiment and get the right wave. A perfect wave. Exactly. So you could just like tweak.

20:07Do 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? 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.

20:40And 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. And I know 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 tool? 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? And what are we talking about here? Like, well, how vibrant do we want to be?

21:08Or do we prefer it muted? Like some of these were really interesting, but is that the right feel for the page or not? 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. And, of course, you know, Patrick was heavily involved in the site as well, and so we had many discussions with him.

21:49It's like, does this wave feel right? Because when you're 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. 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 how do you decide, like, this is the one that we're going with and move on from this? Because you could probably spend forever debating waves, right? That's very, very true. Usually, well, for something like this, Patrick was definitely a part of the decision-making process.

22:25And so usually with the team, we will look at quite a large range. Then we will down select to 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 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 feels right for him. And luckily, 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:01But I'll also admit, I mean, this is one of the blessings and the curse of the design process, is that 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. Yeah.

23:30So 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? 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.

24:02Sometimes 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 these five versions or 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, over there. But that's where that tool comes in hand because this allows us to essentially, you know, get many versions at once. Right. And so we can play with them together. Yeah. And one of the other things that you might not get to experience just playing with it in frames is it comes behind the text there.