How Stripe Built Their New Website

Stripe's previous website, launched in 2020, had aged gracefully but no longer accurately represented the company's expanded product suite. What started primarily with payments had evolved to serve multi-national enterprises with solutions for subscriptions, AI usage-based billing, tax, and platform businesses like Shopify. The old site's narrative struggled to convey this breadth, leading to a fragmented user experience.

The business had just evolved beyond the point of what this story was being told on this site. We now today serve you in multi-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 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.

Stripe views its website as more than just an information portal; it's a manifesto that demonstrates who the company is, what it does, and why it does it. This perspective influences every design decision, from color and typography to the level of detail and care invested, indirectly communicating the company's values and commitment to quality.

What is the point of a website anyways? 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.

To address the challenge of showcasing a vast product suite without overwhelming users, Stripe implemented a 'bento box' layout. This design uses a grid of visual tiles, each representing a solution area (e.g., Payments, Billing, AI), with minimal text. Clicking a tile triggers a modal overlay that provides more information, allowing users to explore details without leaving the homepage, fostering a 'browse' experience.

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

The new website incorporates subtle animations and interactive elements, such as dynamic data visualizations and responsive cards. These are not for aesthetic appeal alone but are carefully tuned to express the care Stripe puts into its work, making the site feel 'alive' and trustworthy. The team meticulously prototyped and refined these animations to avoid distraction, ensuring they enhance the user experience and communicate underlying messages like global scale or uptime.

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

Stripe leveraged AI tools to speed up the design process, particularly for generating image variations and prototyping interactions. AI allowed the team to explore 20 ideas in the time it would traditionally take for two. However, Dill emphasizes that AI does not replace human craft, taste, or attention to detail. Designers must still meticulously refine AI-generated outputs to ensure they meet high-quality standards and align with the brand's specific nuances, like perfectly rendered bubbles or shadows in an image.

We're like great, we're gonna use AI and it's going to be awesome and we're gonna 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 u it requires the love and care and attention of the makers... I think what AI is helping us do is it's helping us speed up our process and certainly helping us explore more... 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.