How Stripe Built Their New Website

Key Concepts

• Bento Grid Design: A modular, card-based layout used to organize complex product offerings into a digestible, visual format.
• Progressive Disclosure: A design strategy that provides information in layers (e.g., using modals) to avoid overwhelming users while allowing them to drill down into details.
• MVQP (Minimum Viable Quality Product): A framework emphasizing that while speed is important, products must meet a high quality bar to maintain user trust.
• Walking the Store: A cultural practice at Stripe where employees (including leadership) regularly use their own products to identify friction points, inconsistencies, and "dead ends" from a user's perspective.
• Gravitational Pull to Mediocrity: The tendency for teams to settle for "good enough" rather than striving for excellence; a force that must be actively fought.

1. The Evolution of the Stripe Homepage

Katie Dill, Head of Design at Stripe, explains that the 2020 homepage served the company well for six years, but the business had outgrown its original narrative. The new site was designed to:

• Reflect Business Sophistication: Shift from a "payments-only" focus to a comprehensive financial infrastructure platform (including billing, tax, revenue recognition, and AI-driven usage-based billing).
• Clarify the Manifesto: The website acts as a company manifesto, demonstrating Stripe’s values through typography, color, and the level of care applied to details.
• Quantify Impact: The inclusion of a live Global GDP counter serves as social proof, signaling to large enterprises that Stripe is reliable and operates at a massive scale.

2. Design Methodology and Process

The team spent over a year iterating on the new site, prioritizing "showing over telling."

• The Bento Grid: This layout was chosen over traditional "scrolly-telling" or accordion menus because it allows users to browse in a "lean-back" mode without being forced to click away from the homepage.
• Intentional Motion: Animations are used to make the site feel "alive" and to provide feedback, but they are strictly fine-tuned to avoid being distracting.
• Prototyping vs. Presenting: The team prioritizes getting designs into a live, coded state as quickly as possible to judge them in the context of the actual user experience, rather than in static design frames.

3. The Role of AI in Design

Dill highlights that AI is a powerful tool for speed, but it does not replace human craft or taste.

• Prototyping and Experimentation: AI allows the team to generate 20 ideas in the time it previously took to generate two. It is particularly useful for rapid iteration on UI components and testing different copy variations.
• The "Quality Trap": Dill warns against the ease of AI-generated content. She notes that AI can easily produce "7 out of 10" quality work, but designers must use the time saved to push for "10 out of 10" excellence.
• Design Systems: AI is being integrated into design systems to help scale, allowing designers to sketch a concept and have the AI assemble it using existing, approved components.

4. Key Arguments and Philosophy

• Fighting Mediocrity: Dill argues that accepting "good enough" is a slippery slope. If a team consistently settles for mediocrity, the overall product quality erodes. She emphasizes that "the team won't be happy if the product is just 'meh'."
• The "Walking the Store" Culture: This practice is essential for maintaining cohesion. By having engineers, product leaders, and data scientists walk the store together, the team gains diverse perspectives on how different product areas (e.g., payments vs. tax) intersect.
• Progress vs. Perfection: While striving for excellence, Dill acknowledges that "progress is more important than perfection." A product only provides value once it is shipped and users can interact with it.

5. Notable Quotes

• "A beautiful world is definitely a better world. I want to live in that one." — Katie Dill, on the importance of design.
• "Don't be wooed by how easy that [AI generation] was to achieve, but instead ask yourself: Is this really great? Have I really hit the mark?"
• "The gravitational pull is to mediocrity. It is just so easy to accept good enough."

Synthesis

The redesign of the Stripe homepage was not merely a visual refresh but a strategic realignment of the company’s narrative. By utilizing a bento-grid layout, intentional motion, and a "show, don't tell" philosophy, the team successfully communicated the scale of their product suite. The core takeaway is that while AI and modern tools can accelerate the design process, they must be tempered by rigorous human oversight, a commitment to "MVQP" (Minimum Viable Quality Product), and a culture of "walking the store" to ensure that the final user experience remains cohesive, intentional, and exceptional.