Skip to content
Y CombinatorY Combinator

How Stripe Built 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. 00:00 - Intro 00:30 - The Old Site 01:30 - Why Stripe Redesigned a Site That Still Looked Good 03:00 - The Biggest Thing They Needed To Change 03:30 - Crafting A New Narrative For The New Site 05:00 - What Story Was Missing From The Old Site 05:30 - “What Is The Point Of A Website?” 06:00 - The New Site 06:44 - New Landing Page Breakdown 07:10 - The GDP Counter: A Homepage Element Only Stripe Could Pull Off 07:40 - Building Trust Through Design 08:45 - Inside Stripe’s “Bento Box” Approach to Product Storytelling 10:37 - Why Stripe Used Modals Instead of Sending People to New Pages 11:37 - Adding Lively Animations That Don’t Feel Distracting 13:50 - The Value Of Beauty In Web Design 14:30 - How To Be Intentional With New Design Elements 15:40 - The Balance Between Getting It Right and Endless Iteration 16:24 - AI-Generated Brand Imagery 17:30 - How A Website Is Like A Song 19:11 - Designing the Perfect Stripe Wave Background 24:48 - All the Homepage Concepts Stripe Tried Before Landing on the Final Design 27:10 - How AI Is Changing Stripe’s Design Process 35:00 - Fighting the “Gravitational Pull to Mediocrity” 40:00 - Walking the Store: Stripe’s Secret to Better Product Design Apply to Y Combinator: https://www.ycombinator.com/apply Work at a startup: https://www.ycombinator.com/jobs

Aaron EpsteinhostKatie Dillguest
Apr 22, 202643mWatch on YouTube ↗

EVERY SPOKEN WORD

  1. 0:00 – 0:30

    Intro

    1. AE

      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 gonna 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. [upbeat music] Katie, thank you so much for joining us again.

    2. KD

      Well, thank you for having me.

    3. AE

      Yeah.

    4. KD

      It's nice to be back.

  2. 0:30 – 1:30

    The Old Site

    1. AE

      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 kinda take us through the old site and, uh, things that you wanted to change about it, and update, 'cause 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, uh, where you guys landed with the new one.

    2. KD

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

    3. AE

      All right. Let's jump into, uh-

    4. KD

      Okay

    5. AE

      ... the original site. So how long ago did you launch this one?

    6. KD

      This one was from 2020.

    7. AE

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

    8. KD

      Yeah. 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.

    9. AE

      Mm-hmm.

    10. KD

      Uh, 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 b- 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

  3. 1:30 – 3:00

    Why Stripe Redesigned a Site That Still Looked Good

    1. KD

      our brand that also had been evolving and becoming, you know, more sophisticated and reaching, you know, a broader set of users. Uh, but still, it was, it was a good site. So I can point out a couple of things that we, uh, aimed to change.

    2. AE

      Yeah.

    3. KD

      Uh, 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, um, and then also some of the, the product shots that we were including. Um, and then of course our users as we, you know, continued to evolve and, um, help more in different categories or larger enterprises or, uh, growing startups. 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.

    4. AE

      Mm-hmm.

    5. KD

      And so for example, we started with payments being a main part of our business. But over time, uh, payments is just one part of it. We, uh, now today serve in multi-, uh, national 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 in their, um, on their platform. And so these stories were coming through here, but you were kinda only getting a glimpse of the product offering that Stripe provided.

    6. AE

      Mm-hmm.

    7. KD

      And so this was probably the biggest thing that we realized that we needed to change. So we needed

  4. 3:00 – 3:30

    The Biggest Thing They Needed To Change

    1. KD

      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.

    2. AE

      Right.

    3. KD

      Uh, we were doing that thing that happens over time where you kinda add on-

    4. AE

      Mm-hmm

    5. KD

      ... and add on, and we're kinda losing the, the narrative, uh, with the site. And so we thought to think about ways that we could, uh, 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. Uh, and I don't think that

  5. 3:30 – 5:00

    Crafting A New Narrative For The New Site

    1. KD

      the, you know, the visuals came out of fashion-

    2. AE

      Mm-hmm

    3. KD

      ... but it also just didn't feel like it took the sophistication of how the business itself evolved. Uh, 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? Um, how do we use our typography? Um, 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, our language and then update the story.

    4. AE

      It's interesting because you mentioned that visually I look at this, and this looks like a site that could've been launched yesterday. Um, and I think that's a testament to how Stripe has always been so far ahead of the game-

    5. KD

      Mm-hmm

    6. AE

      ... from a design perspective, that you could have a site that's six years old and obviously you, you made updates to it, uh, o- over the years. This wasn't literally the site that you launched six years ago.

    7. KD

      Right.

    8. AE

      But, um, 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.

    9. KD

      Yeah, I mean, like, perfect example, you know, AI is v- very big part of our business. It's both, like, how we build, what we build, and who we build for.

    10. AE

      Mm-hmm.

    11. KD

      Like, s- over 78% of the Forbes AI 50 use Stripe, and they are using our products to help them scale

  6. 5:00 – 5:30

    What Story Was Missing From The Old Site

    1. KD

      really fast and help them monetize in new ways, right? So usage-based billing so that you can, uh, make the right moves for your inferences costs and how your users are actually using your product, and it's a tile-

    2. AE

      Right

    3. KD

      ... on the website. [laughs]

    4. AE

      [laughs]

    5. KD

      So the story was missing. Like, what we're-

    6. AE

      Right

    7. KD

      ... 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, like, first principles. What are we trying to do here? Like, what is the point of a website anyways? I remember being in a meeting where Patrick asked, like, "Well, what is the web- the

  7. 5:30 – 6:00

    “What Is The Point Of A Website?”

    1. KD

      point of a website?"

    2. AE

      Mm-hmm.

    3. KD

      I think one part of it is it's, it's your manifesto whether you explicitly call it that or not.

    4. AE

      Mm-hmm.

    5. KD

      Because you're demonstrating who you are, what you are doing, and why you do it.

    6. AE

      Mm-hmm.

    7. KD

      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 w- how you articulate what you're doing and what you offer. So we set out to make sure that the story was extremely clear

  8. 6:00 – 6:44

    The New Site

    1. KD

      for who we're serving and how we're serving them and what we care about.

    2. AE

      Mm-hmm.

    3. KD

      And so that's where, you know, honestly, [laughs] painstaking hours over a year or more-

    4. AE

      Mm-hmm

    5. KD

      ... is what, you know, ended up going into this. Partly because in some ways we weren't rushing to get something out. Like, when we're ser- when we're building something for our users, it's like, okay, it needs to be out, like, and it needs to be out tomorrow-

    6. AE

      Right

    7. KD

      ... because they're dependent on this. This was, like, it was for ourselves-

    8. AE

      Mm-hmm

    9. KD

      ... in a lot of ways. And so we certainly could take the time to sniff out the right design and, you know-

    10. AE

      Yep

    11. KD

      ... get on that scent. Um, and you know what? There were m- many weeks and months of design exploration where we liked it, but we're like, "No, that's not it yet."

    12. AE

      Yeah.

    13. KD

      We're not ready to, you know, wear that shirt for the next six years- [laughs]

    14. AE

      Yeah

    15. KD

      ... or whatever it might be.

    16. AE

      And so it's financial infrastructure

  9. 6:44 – 7:10

    New Landing Page Breakdown

    1. AE

      to grow your revenue is the first one. Which is the exact same-

    2. KD

      Mm

    3. AE

      ... first sentence. So that has remained consistent.

    4. KD

      Mm-hmm.

    5. AE

      And it seems like what you wanted to add here was the extra things here that would catch other people-

    6. KD

      Yeah

    7. AE

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

    8. KD

      Yeah.

    9. AE

      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-

    10. KD

      Mm

    11. AE

      ... that nobody else could do. And one of the things that stands out to me is the GDP counter-

    12. KD

      Yeah

    13. AE

      ... that you have here.

  10. 7:10 – 7:40

    The GDP Counter: A Homepage Element Only Stripe Could Pull Off

    1. AE

      There'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 [laughs] that is running on Stripe. Talk about the decision to put that right up at the top as well.

    2. KD

      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-

    3. AE

      Mm-hmm

    4. KD

      ... the social proof-

    5. AE

      Yep

    6. KD

      ... uh, you know, what users trust us before. Uh, these are important messages. They, they

  11. 7:40 – 8:45

    Building Trust Through Design

    1. KD

      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 w- we're, you know, trying to help everybody from a micro entrepreneur who's gonna grow a startup into hopefully great success, as well as these large enterprises. It matters a lot to them whether or not that Stripe is dependable, reliable-

    2. AE

      Mm-hmm

    3. KD

      ... trustworthy, and can operate at their scale.

    4. AE

      Yep.

    5. KD

      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.

    6. AE

      Mm-hmm.

    7. KD

      But another way is like, you know, the actual enormous impact that we have had the, the privilege and the responsibility of serving, and that can actually be quantified in the, the GDP.

    8. AE

      Yeah. I love that. And, uh, 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.

    9. KD

      Yeah. YC companies.

    10. AE

      Yeah. Right. [laughs]

    11. KD

      [laughs] You got this.

    12. AE

      Yeah.

    13. KD

      [laughs]

    14. AE

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

    15. KD

      Yeah. All right. So this next section is, uh, what we call our bento. And so this is probably the big

  12. 8:45 – 10:37

    Inside Stripe’s “Bento Box” Approach to Product Storytelling

    1. KD

      area that's seeking to solve some of the problems I talked about earlier-

    2. AE

      Mm-hmm

    3. KD

      ... 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. Uh, billing is, you know, what we were talking about earlier about usage-based billing or, um, you know, could be fixed fees, subscriptions, any number of these types of things are a lot more adjustable and, um, customizable to the businesses we're serving. Uh, we talked a little bit about the, the role that AI plays in, uh, organizations, and so we wanted to make that clear. Our issuing product, stable coins, and then of course the way that we, uh, provide for platform businesses and marketplaces.

    4. AE

      Mm-hmm.

    5. KD

      And so what we're trying to do here is not overwhelm you with too much going on. I mean, that... I know there is a lot on this page, but we, you can see that there's a very little text. We're just trying-

    6. AE

      Mm-hmm

    7. KD

      ... 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. 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?

    8. AE

      Mm-hmm.

    9. KD

      Like, you know, we, on that bento, it's one, two, three, four, five, six. But that's, you know, I'm thinking we have many, many m- more dozen products on top of that-

    10. AE

      Mm-hmm

    11. KD

      ... that, uh, we can't express all on one page. That would just be too much and it would overwhelm you. So we wanna give you essentially progressive disclosure as a way of, of getting towards the more details behind the products and more things that we offer.

    12. AE

      Yeah. That's very cool. I don't know that I've seen this specific design

  13. 10:37 – 11:37

    Why Stripe Used Modals Instead of Sending People to New Pages

    1. AE

      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, to jump to the next section, or you can keep scrolling down if this is not the right thing that you're looking for.

    2. KD

      Yeah. The, the... You, you want it to feel light. You want it-

    3. AE

      Mm-hmm

    4. KD

      ... to feel easy to kind of explore and engage, and you're taking them on a journey for sure. You wanna help them get to where they're going. Um, but yeah, I think if we leapt people off the page, you know, w- when it might be too early for them to have made their decision on what, what they're actually going after.

    5. AE

      Mm-hmm.

    6. KD

      Uh, so this is really just a bit more of a browse experience, and it's a, gives them a, a bit more of a, a chance to explore.

    7. SP

      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.

    8. AE

      Yeah. It's interesting. Another thing that stands out to me is how much animation

  14. 11:37 – 13:50

    Adding Lively Animations That Don’t Feel Distracting

    1. AE

      you use, um, in each of these cards. Talk a little about, about that and, and how you can do it without making it too overwhelming or distracting-

    2. KD

      Yeah

    3. AE

      ... for people.

    4. KD

      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-

    5. AE

      [laughs]

    6. KD

      ... and the, the ball was moving too fast. Uh, so you do have to really f- 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 o- one of the things that we're trying to express is the care that we put into-

    7. AE

      Mm-hmm

    8. KD

      ... the work that we do-

    9. AE

      Mm-hmm

    10. KD

      ... because if you see the care that goes here, then you, 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-

    11. AE

      Yeah

    12. KD

      ... uh, a company's information. These are important details to express. It's also, you know, the idea of making the site feel a bit more alive.

    13. AE

      Mm-hmm.

    14. KD

      You know, that there's a presence here is something that I think the motion does really well. You are right, though, if you go too far with it, it becomes distracting.

    15. AE

      Mm-hmm.

    16. KD

      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. Um, and also thinking about the role that when somebody engages with it-

    17. AE

      Mm-hmm

    18. KD

      ... that's where, you know, you bring certain things to life and make sure that you're like responding, and this gives the feedback to also register, like, okay, I can click on this. You might not have known that otherwise. So-

    19. AE

      Mm-hmm

    20. KD

      ... we try to engage it that way. This is where we're, we're basically, these are kind of like the, the big, important metrics that can help you understand again, the kind of the scale of, of what we build. Um, and you know, of course, there were versions where we could just put the numbers there.

    21. AE

      Mm-hmm.

    22. KD

      Uh, 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, uh, metrics. It's not really a data vis, of course.

    23. AE

      Mm-hmm.

    24. KD

      Uh, but it gives you a sense of, like, okay, here we're refer- talking about global scale.

    25. AE

      Mm-hmm.

    26. KD

      Here we're talking about, um, uptime.

    27. AE

      Mm-hmm.

    28. KD

      And so you kind of get the sense of continuity here.

    29. AE

      Mm-hmm.

    30. KD

      Um, but really, it's just fun.

  15. 13:50 – 14:30

    The Value Of Beauty In Web Design

    1. KD

      Yeah, yeah.

    2. AE

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

    3. KD

      Yeah. I mean, I'm a, I'm a, a 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-

    4. AE

      Mm-hmm

    5. KD

      ... and almost for free. And now, great, we can take that time to then push it that next level-

    6. AE

      Yeah

    7. KD

      ... and to create something that is really interesting and playful and-

    8. AE

      Yeah

    9. KD

      ... and beautiful.

    10. AE

      Yeah. I think what's interesting here that's, that's maybe worth for anybody watching to pay attention to is that these aren't animations for animation's sake

  16. 14:30 – 15:40

    How To Be Intentional With New Design Elements

    1. AE

      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.

    2. KD

      [laughs]

    3. AE

      But it's not random.

    4. KD

      Yeah.

    5. AE

      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, um, you know, directly measurable value.

    6. KD

      Yeah. Well, what's also interesting is it's this section that the site didn't launch in December.

    7. AE

      Mm.

    8. KD

      So we, we ended up launching in January, and, uh, we were at a stage with this where, like, we had something good.

    9. AE

      Mm-hmm.

    10. KD

      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 transition from one to the next just, like, felt a little kludgy and w- wasn't quite as smooth as it could be.

    11. AE

      Mm-hmm.

    12. KD

      And it was a decision, you know, a

  17. 15:40 – 16:24

    The Balance Between Getting It Right and Endless Iteration

    1. KD

      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 them move. Um, and you know, for sure, what we don't wanna get in the habit of is just, like, pushing timelines out to the end of time.

    2. AE

      Yeah.

    3. KD

      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-

    4. AE

      Mm-hmm

    5. KD

      ... and the technical ability. And you know, it was over the holidays, and so pushing it [laughs] another week was, was not gonna be-

    6. AE

      Mm-hmm

    7. KD

      ... 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.

    8. AE

      Yeah, very cool.

    9. KD

      So this area is, um, a place where

  18. 16:24 – 17:30

    AI-Generated Brand Imagery

    1. KD

      we're, we're talking about our users. But we created these images, so it brings together Stripe the brand and the, the companies that we serve.

    2. AE

      Mm-hmm.

    3. KD

      So each one of these is custom-made, uh, and it's, you know, 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 gonna use AI, and it's gonna be awesome, and we're gonna get these done in a, you know, a day."

    4. AE

      [laughs]

    5. KD

      Now, of course, like, the reality is, you know, w- building with AI is actually also, you know, something that is, um, it requires the love and care and attention of the makers. And so there was definitely a, 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?

    6. AE

      Mm-hmm.

    7. KD

      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, what are those, like, key moments of-

    8. AE

      Mm-hmm

    9. KD

      ... 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,

  19. 17:30 – 19:11

    How A Website Is Like A Song

    1. KD

      you know, trying to communicate, uh, the type of brand that we work with, especially if you're, you know, not familiar with them.

    2. AE

      Mm-hmm. And now we've moved to a darker background.

    3. KD

      Mm.

    4. AE

      Is there something intentional behind that now?

    5. KD

      Well, this is an area that we're talking about our, um, integrations and the way that our APIs work. Uh, and certainly there's, you know, a developer language. Uh, not everything has to be in dark mode, but, um, it is actually something we have done on the previous site as well-

    6. AE

      Mm-hmm

    7. KD

      ... and so we wanted to carry that forward.

    8. AE

      Hmm.

    9. KD

      This is, uh, the area that we call Squeezy Boy. [laughs]

    10. AE

      [laughs]

    11. KD

      Uh, design is definitely more fun when you can give everything a fun name. Uh, but it is, uh, an area where we're, we're kind of just showing some of the things that are comings and goings. And, uh, so this is our Black Friday, Cyber Monday, uh, city that we had built.

    12. AE

      Mm-hmm.

    13. KD

      Um, our webs- our, uh, podcast, Cheeky Pint.

    14. AE

      Mm-hmm.

    15. KD

      Uh, so this will always be changing with different things-

    16. AE

      Mm-hmm

    17. KD

      ... that come through. Uh, but we wanted to, once again, you know, have a little fun with how we portray these things, make it easier and, um, also inviting to engage with. Um, certainly added more challenge to it. Like, 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. AE

      Right.

    19. KD

      Uh, so this was tricky to, to build it right. And so, you know, quite a bit of iteration on that.

    20. AE

      Yeah.

    21. KD

      But I think the team found a clever way.

    22. AE

      It's amazing seeing the finished product here, and everything is so polished and, 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.

    23. KD

      Well, okay, we're starting here on the top, where we have this wave.

  20. 19:11 – 24:48

    Designing the Perfect Stripe Wave Background

    1. KD

      Uh, I've worked at Stripe now for five years, and I cannot even tell you how many different variants of a wave or gradient or gradient wave that I have seen and been a part of.

    2. AE

      [laughs]

    3. KD

      Um, I think we are trying to find every possible solution. On this project, you know, we knew we wanted to- Bring a lot of kind of color and joy to the experience. And we knew that a, a wave or a gradient wave, like we had before, is a, a key way to do that. And we enjoy that part of the brand. But it... Which wave? How to do it. What's gonna stand the test of time? What could be on there for six years potentially, um, and, you know, give you a, you know, a bit of joy when you visit, but not overdo it. And what's super cool is, and our wonderful eng team created this tool where we can experiment and get the right wave.

    4. AE

      The perfect wave.

    5. KD

      Exactly.

    6. AE

      This is so cool.

    7. KD

      So you could just, like, tweak. Do I want that much blur? No, not that much. Do I want, uh, more grain? No, not that much. Let's see. We wanna also switch it on the scale. Do- 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 the what we ended up with.

    8. AE

      Mm-hmm.

    9. KD

      Like, we wanna find just the right color mix, just the right texture, just the right amount of 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-

    10. AE

      Mm-hmm

    11. KD

      ... and is gonna, you know, operate really smoothly on anybody's computer.

    12. AE

      Mm-hmm. And, and I notice some buttons here. It looks like you can save the state.

    13. KD

      Mm.

    14. AE

      So do you create different variations of these and then kinda test them against each...

    15. KD

      Yeah.

    16. AE

      What was the process even of using this tool?

    17. KD

      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?

    18. AE

      Yeah.

    19. KD

      Like, well, how vibrant do we wanna be or do we want, like, prefer it muted? Like, some of these were really interesting.

    20. AE

      Mm-hmm.

    21. KD

      But is that the right feel for the page or not?

    22. AE

      Mm-hmm.

    23. KD

      Um, you know, there... This is one of our previous waves from one of our event sites, uh, which was monochromatic but also really bold. Or do we wanna be a little bit more, uh, 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?

    24. AE

      [laughs]

    25. KD

      Um, and these great discussions help us tease out, uh, what we're, we're actually trying to do. And of course, you know, Patrick is, was heavily involved in the site as well-

    26. AE

      Mm-hmm

    27. KD

      ... and so we had many discussions with him. It's like, "Does this wave feel right?"

    28. AE

      Mm-hmm.

    29. KD

      Because when you're, you know, creating a new homepage, it's almost like, yeah, you're deciding what y- what clothes you're gonna wear for-

    30. AE

      Right

  21. 24:48 – 27:10

    All the Homepage Concepts Stripe Tried Before Landing on the Final Design

    1. AE

      variations.

    2. KD

      Oh, yeah.

    3. AE

      I'm curious to see some more of those.

    4. KD

      Yeah. So this is the bento where we're trying to communicate a lot of different things that we do.

    5. AE

      Mm-hmm.

    6. KD

      Uh, and what, what's the right way to, 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, 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... Like, do we wanna 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?

    7. AE

      Mm-hmm.

    8. KD

      Uh, 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.

    9. AE

      Mm-hmm. Yep.

    10. KD

      Uh, we looked at, uh, these kinds of sections. And this is a little bit more similar to our original site that I showed you-

    11. AE

      Yeah

    12. KD

      ... where you just kind of, like, pass through section by section. This felt, like, a little too scrolly telling, right? And you're just, like, kind of you wanna get to it, and you wanna get to it faster, and you wanna be able to get a, a quicker sense of what we offer. Uh, then we have here a essentially be- An accordion. So, you could press these things to then open them up and see what we have. Uh, 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? But e- even if it's not a lot of effort, right? But you, um, you want the, somebody to tap on it or you want them to scroll over it.

    13. AE

      Yeah.

    14. KD

      Uh, and, you know, otherwise you're, you're in trying to introduce something to them like, "Manage a marketplace end to end." Like, you might know what that means.

    15. AE

      Right.

    16. KD

      But you might not.

    17. AE

      But would you, would you be interested enough to click through?

    18. KD

      Yeah.

    19. AE

      And most people just don't click tabs.

    20. KD

      Yeah, exactly. So that's why, uh, you know, again, this didn't feel right and a more visual one, um, was definitely a, a better choice. Uh, 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 ... Y- 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 gonna put your most important messages a click away is gonna 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.

    21. AE

      Mm-hmm.

    22. KD

      Um, and I would say kinder to the users because it meant that they could be in that lean back position.

  22. 27:10 – 35:00

    How AI Is Changing Stripe’s Design Process

    1. AE

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

    2. KD

      Well, so yeah. Let's start with the images and then there's other parts of the process there. But these were certainly a, a type of thing that lend themselves to AI.

    3. AE

      Mm-hmm.

    4. KD

      I think AI is really good at these pictures that seem, you know, super real.

    5. AE

      Mm-hmm.

    6. KD

      Uh, and so this is ex- 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, Freepik or whatever of like, you know, "Give me a parallelogram inside this thing." But the reality is, you know, n- the nuance and the details really mattered to us.

    7. AE

      Mm-hmm.

    8. KD

      Like, you couldn't just put, uh, something that sort of got there. Uh, 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, uh, because, you know, one wouldn't have thought that bubbles would've taken so much of our attention-

    9. AE

      [laughs]

    10. KD

      ... but they sure did. Uh, so here was a version that we had for a different user that is, uh, not depicted on the site just right now. Um, and you can kind of see like, okay yeah, it's an ice cube and the bubbles and, you know, generally what do you think? Looks, looks okay?

    11. AE

      Yeah, yeah.

    12. KD

      It looks real?

    13. AE

      Yeah. Ship it.

    14. KD

      Well [laughs]

    15. AE

      [laughs]

    16. KD

      This is the team's, uh, thoughts on the matter. [laughs]

    17. AE

      [laughs]

    18. KD

      And so each one of these things is actually a critique of, you know, where it just doesn't feel quite real.

    19. AE

      Right.

    20. KD

      The, the example, um, from, uh, Urban, um, or U-R-B-N is the, um, you know, how well does this all feel like the right urban, uh, layout.

    21. AE

      Mm-hmm.

    22. KD

      Now, gets a lot of it right, but when you take a double look, um, her arm isn't quite right.

    23. AE

      Yeah. [laughs]

    24. KD

      He doesn't quite have a hand. Um, you know, that shadow isn't exactly how it would be. Uh, and so the, the detail in each of these little nuances, like each pixel basically needs the same, uh, 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, s- 20 ideas in the time it normally would've taken to look at two. However, the ... You know, 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. Um, we're really excited about how it's sped up prototyping and sped up, you know, experimentation. So it's like, you know, how should these accordions move? Should it replace this? Or should it push that? Uh, we can mock that up really fast. And then saves engineers countless ti- you know, hours and, and designers as well as they're exploring different varieties. It's also really great for user testing. Um, if we wanna be able to change all the words in here, uh, so that it feels one way for one user that we're talking to or versus another, we can do that really easily with AI prototyping. I would say even during that pr- time period, you know, what we were, you know, exploring is, you know, feels old-fashioned a year ago-

    25. AE

      Mm-hmm

    26. KD

      ... versus, uh, how we explore today.

    27. AE

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

    28. KD

      Yeah.

    29. AE

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

    30. KD

      What designers at Stripe endeavor to do are to create things that feel like they push the status quo forward.

  23. 35:00 – 40:00

    Fighting the “Gravitational Pull to Mediocrity”

    1. KD

      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 nope, tweak this little bit and tweak that little bit. Uh, and essentially the merging of design and eng tools in one allows you a lot more ability to kind of customize that. So you don't need to accept slop.

    2. AE

      Mm-hmm.

    3. KD

      And you shouldn't accept slop. You should, you know, f- hunt for, fight for the right solution.

    4. AE

      Mm-hmm. What are some more principles like that that you try to instill in your team?

    5. KD

      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.

    6. AE

      Mm-hmm.

    7. KD

      Like, it is just so easy to accept good enough.

    8. AE

      Mm-hmm.

    9. KD

      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, let's just, like, ship it. Like, it, it... 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.

    10. AE

      Mm-hmm.

    11. KD

      Like, it's, it's pretty good.

    12. AE

      Mm-hmm.

    13. KD

      You know, we could... 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 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, like, exquisite and-

    14. AE

      Mm-hmm

    15. KD

      ... exceptional and that, like, really hold that bar up? That it reminds you of just, like, how hard it is to fight that fight of like, well, I c- if I let this slide, you know, what else am I gonna let slide, and what is that, like, composite gonna 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.

    16. AE

      Mm-hmm.

    17. KD

      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 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, is the right one?

    18. AE

      Mm-hmm.

    19. KD

      Um, that makes a big, big difference. Um, I would also say when we're exploring different products and, like, what are, you know, what is actually ship worthy or not, and 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? [laughs] Like-

    20. AE

      [laughs]

    21. KD

      ... what, 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. 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 are, you're, you're serving. And 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 know, you, 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, you know, the essential pieces to a successful product. I wouldn't call it an MVP. It's probably like an MVQP, like a [laughs] minimum viable quality product.

    22. AE

      Mm-hmm.

    23. KD

      Uh, because again, you don't wanna lose trust by experimenting with something out in the world.

    24. AE

      Mm-hmm.

    25. KD

      Uh, but you certainly wanna learn from their experiences.

    26. AE

      It feels like something that's becoming even more important these days, um, with all the advancements in AI, is QA.

    27. KD

      Yeah.

    28. AE

      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. Um, and part of what you do at Stripe, which you told us about last time, is, uh, walking the store.

    29. KD

      Oh, yeah.

    30. AE

      And, um, 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.

  24. 40:00 – 43:35

    Walking the Store: Stripe’s Secret to Better Product Design

    1. AE

      within Stripe or certainly with all the changes with AI that have been happening?

    2. KD

      Walking the store is such an important part of building products and experiences because again, it, 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, you know, that next feature that you launch, and it's really easy to lose sight of what's actually out there. It's, uh, kind of funny, like, how you can create something. You're like, "Oh, when we 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, you know, two, six months later, and it's evolved.

    3. AE

      Mm-hmm.

    4. KD

      It's changed. And the reason why is because probably somebody else shipped something, and somebody else shipped something, and now it's like, you know, it's in your home when you've updated the l- dining room but none of the other rooms, and all of a sudden the light switches don't match, and the colors are off.

    5. AE

      [laughs]

    6. KD

      And every other room now looks bad.

    7. AE

      Yeah.

    8. KD

      You have to think about how that composite works together. And, you know, for Stripe, for example, we have a number of different business areas, right? 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 others' and how a user might go from, "Well, I use subscriptions, and I use payments, and I use tax. How are these things all gonna work together?" Then they're really missing the user experience.

    9. AE

      Mm-hmm.

    10. KD

      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. Uh, we do have a program that we talked about last time, Central Journeys, where we have a, a subset of these journeys, um, kind of like on a scoreboard and like, are they, you know, ye- 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, the dead ends. We also do this every Friday, where the founders do it in front of the whole company.

    11. AE

      [laughs]

    12. KD

      Where they're walking the store, 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, you know, the, 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.

    13. AE

      Mm-hmm.

    14. KD

      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 scientist in the room because we're all looking at it very differently. And we're all gonna point out different things. And that is what, like, gets us closer to really actually understanding what a user might feel.

    15. AE

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

    16. KD

      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 it myself.

    17. AE

      Yeah.

    18. KD

      Thanks for having me on.

    19. AE

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

Episode duration: 43:36

Install uListen for AI-powered chat & search across the full episode — Get Full Transcript

Transcript of episode ypzNhwpmOD4

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

iOSAndroidClaudeChrome