How Stripe Built Their New Website
Stripe's Head of Design, Katie Dill, provides a behind-the-scenes look at their recent homepage redesign. She discusses the strategic shift from a product-list to a narrative-driven approach, the intricate design process behind key elements, and how AI is fundamentally changing their design workflow and empowering their team to fight the "gravitational pull to mediocrity".
The Catalyst for Redesign: Evolving Beyond Payments
After six years, Stripe’s homepage, while still visually sound, no longer accurately represented the company’s evolution. The business had expanded significantly beyond its initial focus on payments. The old site struggled to communicate the breadth of Stripe’s offerings, which now include complex solutions for multinational enterprises, usage-based billing for AI companies, subscription management, and financial infrastructure for platforms like Shopify.
Over time, the homepage had become a long, scrolling list of features, losing a cohesive narrative. The design language itself, including elements like the “12-degree bar” and the original gradient wave, lacked a clear, scalable system, leading to inconsistencies. The redesign was initiated not because the old site was broken, but because the story it told was outdated. A new design vision was needed to match the sophistication of the business and clearly articulate its expanded value proposition.
Crafting the New Narrative: A Website as a Manifesto
The redesign process began with a first-principles question: “What is the point of a website?” The conclusion was that a website serves as a company’s manifesto, implicitly and explicitly communicating who you are, what you do, and what you value. The new homepage needed to tell a clear story that resonated with everyone from a solo entrepreneur to a large enterprise, building trust and demonstrating Stripe’s capability to operate at any scale.
Key Design Elements and Decisions
Several key components were developed to bring this new narrative to life:
- The GDP Counter: To build trust and demonstrate scale, Stripe included a live counter showing the percentage of global GDP running through its platform. This is a unique proof point that only Stripe could feature, immediately signaling reliability and the capacity to handle immense transaction volumes.
- The “Bento Box” Grid: To solve the problem of showcasing a wide array of products without overwhelming users, the team implemented a “bento box” style grid. This visually presents different solution sets like Payments, Billing, and Issuing. Instead of linking to separate pages, clicking a tile opens a modal overlay. This “progressive disclosure” allows users to explore offerings without leaving the homepage, catering to a “lean back” browsing experience.
- Intentional Animation: The site uses subtle, lively animations to make the experience feel more alive and responsive. These are not decorative; they serve a purpose, such as providing feedback that an element is clickable or visually representing a metric’s intention (e.g., uptime). The team valued this craftsmanship so highly that they delayed the launch to perfect the smoothness and performance of these animations.
- AI-Generated Brand Imagery: To feature user logos, the team used AI to generate custom images that integrated the user’s brand with Stripe’s visual identity (the parallelogram). While AI accelerated the exploration of ideas, it did not replace craft. The process required significant human oversight and refinement to correct artifacts and ensure every pixel met Stripe’s quality bar.
The Design Process: Iteration and Tooling
The final polished design was the result of extensive exploration and iteration.
“Something that could feel great here on a board or in isolation, all of a sudden feels very different when you actually put it in place and you feel it.”
- The Perfect Wave: The iconic gradient wave at the top of the page was the subject of countless variations. To facilitate this, the team built a custom tool that allowed them to experiment with numerous parameters in real-time: blur, grain, color, rotation, texture, and movement. This enabled them to fine-tune the wave until it felt right within the context of the full page, a decision that involved close collaboration with Stripe’s CEO, Patrick Collison.
- Exploring Layouts: For the product section, the team explored many concepts, including long-scrolling sections and accordions. User research revealed that accordions were ineffective because they hid key information behind a click, creating friction. The visual, “show, don’t tell” approach of the bento grid proved most effective for users in a discovery mindset.
AI’s Evolving Role in Design
AI is becoming integral to Stripe’s design process, acting as an accelerant for creativity and execution rather than a replacement for designers.
- Accelerating Exploration and Prototyping: AI allows the team to generate and visualize dozens of ideas in the time it would have taken to create a few. It dramatically speeds up prototyping, enabling them to mock up complex interactions and test different copy variations with users quickly.
- Raising the Quality Floor: AI tools can quickly produce high-quality baseline components (a “7 out of 10”), handling the commodity work. This frees up designers to focus their time on pushing from “good” to “great”—innovating on new interaction paradigms and ensuring the final product is truly exceptional.
- Enhancing Design Systems: AI is poised to revolutionize design systems. A designer can provide a sketch, and an AI tool can assemble a rough version using existing components. It can also help identify when a new component is needed and assist in expanding the system, ensuring coherence at scale.
Stripe’s Design Philosophy: Fighting Mediocrity
The redesign reflects a deep-seated cultural philosophy at Stripe focused on intentionality and craftsmanship.
“The gravitational pull is to mediocrity. It is just so easy to accept good enough. And I think it really, really takes intentionality and you really have to think about what is the cost of accepting good enough.”
The team actively fights the tendency to ship something that is merely adequate, understanding that small compromises compound over time and erode the user experience. This commitment to quality is balanced with the need for progress over perfection, shipping a “minimum viable quality product” (MVQP) to learn from real-world usage.
A key cultural practice that supports this is “Walking the Store.” Every week, the entire company, including the founders, is encouraged to use Stripe’s products from the user’s perspective. This reveals how different parts of the product ecosystem interact and uncovers inconsistencies or “dead ends” that are invisible when working on features in isolation. It ensures the team never loses sight of the holistic user journey.