How does Stripe's new homepage communicate its broad product offering?

The new homepage uses a 'bento box' layout, visually depicting various solution sets like payments, billing, issuing, and AI services. Each item offers a brief description and an expandable modal for more details, allowing users to explore without leaving the page, thereby avoiding overwhelming them.

What is the significance of the global GDP counter on the Stripe homepage?

The live counter showing the percentage of global GDP running on Stripe serves as a powerful social proof and a quantifiable measure of Stripe's enormous impact and reliability. It helps build trust by demonstrating the scale at which Stripe operates and its dependability for both startups and large enterprises.

How does Stripe use animation and interactive elements on its new website?

Stripe uses delicate and intentional animations and interactive elements, not just for aesthetics, but to express the care put into their work and to make the site feel more alive. These elements are carefully fine-tuned to add interest and provide subtle feedback to the user without being distracting.

How is AI being used in Stripe's design process for the new website?

AI is used to speed up the design process, particularly in generating realistic images and aiding in rapid prototyping and experimentation. While AI helps explore more ideas quickly, it doesn't replace the craft, taste, and attention to detail required from human designers.

What principles does Stripe instill in its design team?

Stripe emphasizes fighting the 'gravitational pull to mediocrity' and avoiding accepting 'good enough.' They focus on intentionality, creating user experiences that are joyful and powerful, and always considering the user's perspective, advocating for progress over perfection.

How does Stripe ensure quality and user experience with new features, especially with AI?

Stripe emphasizes rigorous QA and testing, including a company culture of 'walking the store' to experience products as users do. They aim for a 'minimum viable quality product' (MVQP), balancing progress with trust, and understanding that user interaction with new technologies like AI is best learned post-launch.

Key Moments

How Stripe Built Their New Website

Y Combinator

Science & Technology7 min read44 min video

Apr 22, 2026|4,453 views|217|18

YC Y Combinator

Save to Pod

Key Moments

TL;DR

Stripe's new website design took over a year and emphasizes progressive disclosure and AI-generated visuals, but ensuring the 'soul' of the brand requires meticulous attention to detail.

Key Insights

The previous Stripe homepage, launched in 2020, stood the test of time well but no longer reflected the company's evolved business offerings, which now extend beyond payments to include subscriptions, usage-based billing for AI companies, and tax solutions.

Stripe's new homepage features a prominent GDP counter, quantifying their impact on the global economy, aiming to demonstrate dependability, reliability, and trustworthiness at scale for both startups and large enterprises.

A key design innovation is the 'bento' section, which uses a visual grid with hover-over modals for progressive disclosure of Stripe's diverse product suite, avoiding overwhelming users or taking them off-page prematurely.

The design process involved extensive exploration using a custom tool to generate and refine gradient waves, allowing for precise adjustments to blur, grain, rotation, thickness, texture, and color to achieve the desired visual impact.

While AI significantly speeds up prototyping and experimentation, allowing designers to explore 20 ideas in the time previously spent on two, it does not replace the need for craft, taste, and attention to detail in ensuring realism and accuracy.

Stripe emphasizes 'walking the store,' a company-wide practice where all employees test products as if they were users, to ensure a cohesive user experience across different business areas and catch issues before they erode trust or become front-page news.

Evolving the digital narrative beyond six years

Stripe's previous homepage, launched in 2020, served them well for six years. However, the decision to redesign wasn't driven by obsolescence but by the fintech giant's significant evolution. The core message of financial infrastructure for revenue growth remained consistent, but the company's product suite had expanded dramatically beyond just payments. It now encompasses sophisticated offerings like subscription management, usage-based billing for AI companies, tax solutions, and facilitating money movement for platform businesses. The original site's articulation of these diverse services was becoming fragmented, leading to a loss of narrative clarity. Furthermore, the brand's visual language and sophistication had also matured, necessitating an update to better reflect Stripe's current identity and broader user base, from micro-entrepreneurs to large enterprises.

A bold statement of global impact: The GDP counter

A striking new element on Stripe's homepage is the live counter displaying the percentage of global GDP running on their platform. This feature serves as a powerful trust signal and a tangible demonstration of Stripe's scale and influence. For potential customers, especially large enterprises, understanding the platform's dependability, reliability, and capacity to operate at their level is crucial. The GDP counter quantifies this impact, providing social proof that goes beyond simply listing well-known clients. It aims to reassure users that Stripe is a robust and trustworthy partner capable of handling significant global financial operations. This also subtly signals that if Stripe can manage such a vast scale, it is well-suited for businesses processing billions of transactions, including emerging companies from Y Combinator.

The 'bento' approach: Visualizing a complex product ecosystem

To address the challenge of showcasing Stripe's expansive product offering without overwhelming visitors, the new homepage employs a 'bento' grid layout. This design proactively solves issues with the previous site's approach of adding sections, which could lead to excessive scrolling and diluted narrative. The bento visually depicts key solution sets, including payments (online and terminal), billing (subscriptions, usage-based), AI services, issuing, stablecoins, and solutions for platform businesses and marketplaces. Each tile offers concise visuals and minimal text, aiming to pique interest. Crucially, hovering over a tile reveals a larger modal with more details, allowing for progressive disclosure. This keeps users engaged on the homepage, facilitating exploration without the commitment of navigating to separate pages, thus creating a lighter, more exploratory browsing experience.

Precision in motion: Animation as a brand manifesto

The new Stripe website incorporates subtle yet deliberate animations within its cards. These are not merely decorative; they serve as a direct manifestation of the company's brand manifesto. The care invested in these delicate movements—fine-tuned through extensive prototyping and experimentation—reflects the meticulous attention Stripe applies to its financial infrastructure, moving money, and protecting user information. The animations are designed to make the site feel more alive and responsive, subtly guiding user interaction. For instance, a movement might indicate a clickable element. The goal is to convey a sense of craftsmanship and technical prowess, assuring users that the same level of detail and intentionality is present in Stripe's core services. Overdoing animations, conversely, would be distracting and detract from this message, highlighting the delicate balance achieved.

Crafting the perfect gradient wave: Iteration and AI-assisted design

The design of the homepage's signature gradient wave involved extensive iteration over five years. The team explored countless variants, aiming for a visual element that was both joyful and enduring, potentially lasting another six years. A custom tool was developed to allow precise experimentation with blur, grain, rotation, scale, thickness, texture, and color mixes. This tool enabled the team, including Patrick, to collaboratively refine the wave's visual properties and ensure it felt 'right'—not too vibrant or muted, but with the perfect balance. The process moved from flat visualizations to object-with-form considerations, and eventually to live coding to assess readability with text overlays. This meticulous approach underscores Stripe's commitment to design excellence, even for elements like a homepage hero, ensuring they align with the brand's sophisticated identity and technical capabilities.

AI as a co-pilot, not a replacement for craft

While AI tools significantly accelerated the design process, particularly for generating realistic imagery and rapid prototyping, they did not replace human craftsmanship. For instance, AI-generated images required meticulous scrutiny to ensure anatomical accuracy, correct lighting, and precise alignment with brand elements like the parallelogram. The team noted that AI is excellent at achieving a 'good enough' baseline quickly, allowing designers to explore more options—potentially 20 ideas in the time previously spent on two. However, the critical work lies in refining these outputs with taste, judgment, and attention to detail to achieve true excellence. AI helps speed up prototyping for interactions like accordion movements or user testing with varied text, saving considerable time for both designers and engineers. The ultimate goal is to leverage AI to elevate the baseline, freeing up human talent to focus on novel interaction paradigms and innovative user experiences.

From 'good enough' to exceptional: Fighting the pull toward mediocrity

Stripe instills a core principle: fighting the 'gravitational pull toward mediocrity.' It's easy to accept 'good enough,' especially with the speed AI enables. However, consistently settling for 'good enough' can lead to a product that is merely 'meh.' Designers are encouraged to question whether a solution truly hits the mark, achieves the goal, and feels well-crafted with intentionality. This involves pushing beyond initial AI outputs, even if fast and seemingly adequate. The focus is on what the user will experience. Instead of presenting stakeholders with justifications for trade-offs, designers should present the solution and ask how it will feel for the end-user. This user-centric approach, combined with a commitment to quality (an 'MVQP'—minimum viable quality product rather than just MVP), helps avoid eroding trust and aims for progress over perfection, understanding that learning from real-world usage is key, especially with new technologies like AI.

Walking the store: Ensuring cohesive user experience through empathy

A fundamental practice at Stripe is 'walking the store,' where all employees regularly use the company's products as end-users. This initiative is crucial for understanding the holistic user journey and ensuring cohesion across different business areas like money movement, revenue, and payments. It helps teams see the 'forest through the trees,' recognizing how a user might transition between services (e.g., subscriptions to payments to tax). This practice, embedded in the company culture and including 'essential journeys' on a scoreboard, helps identify dead ends and areas where product evolution has led to inconsistencies, such as mismatched aesthetics or broken workflows. By experiencing the product from various user perspectives and cross-disciplinary viewpoints (engineers, product leaders, data scientists), Stripe aims to foster a deeper, shared understanding of user needs and ensure that every part of the product experience is intentional, trustworthy, and high-quality.

Mentioned in This Episode

●Software & Apps

●Companies

●People Referenced

Stripe Website Redesign Design Principles

Practical takeaways from this episode

Do This

Express your company's manifesto through design.

Showcase the care and attention to detail in your work.

Make the site feel alive and responsive to user interaction.

Use visuals and imagery to tell the story (show, don't just tell).

Employ progressive disclosure to provide details without overwhelming users.

Fine-tune animations and interactions for a delicate, intentional feel.

Focus on creating a joyful, beautiful, and playful user experience.

Ensure text is readable and interacts well with background elements.

Explore and iterate on design elements like waves and gradients.

Get designs coded and live as quickly as possible to experience them as a user would.

Consider the user's journey and browser mode (lean-back, browse mode).

Incorporate AI to speed up prototyping and exploration.

Design with intentionality, purpose, and a connection to the message.

Push the status quo forward with design.

Create user experiences that are exceedingly easy to use, powerful, and bring joy.

Consider new paradigms of interaction, like agent experiences, for the future.

Leverage design systems, potentially managed by AI, for scaling and coherency.

Fight the gravitational pull to mediocrity and do not accept 'good enough'.

Focus on how the user will experience the product at the end of the day.

Prototype rather than just present; focus on user feel, not just stakeholder explanations.

Assess trade-offs: will it negatively impact a day, erode trust, or make the news?

Aim for progress over perfection, especially with new technologies like AI.

Develop a 'minimum viable quality product' (MVQP) rubric.

Incorporate QA and testing rigorously.

Incorporate the user's perspective and 'walk the store' to test products.

Consider how different product areas intersect and affect the overall user experience.

Seek diverse perspectives (engineering, product, data science) when testing.

Avoid This

Don't let the website story become lost due to excessive additions.

Avoid visuals that feel outdated or don't match the business's sophistication.

Don't overwhelm users with too much information at once.

Avoid animations that are distracting or annoying.

Don't create animations or interactions solely for their own sake.

Don't launch a design if the animations aren't smooth and intentional.

Don't assume AI image generation requires no human craft, taste, or attention to detail.

Don't just ship 'sevens out of ten' base products; use extra time to create something great.

Don't reinvent the wheel for typical modals if a good version already exists.

Don't be wooed by the ease of AI generation; question if it's truly great and hits the mark.

Don't accept 'slop' in your design or development process.

Don't let yourself be comfortable with 'good enough' for too long.

Don't solely base decisions on team effort if the product will only be 'meh'.

Don't try to communicate solely through stakeholder presentations; focus on user experience.

Don't pursue perfection at the expense of progress and shipping.

Don't lose sight of the user experience by being too immersed in the internal product world.

Don't assume a product is effective until it's tested in the market.

Common Questions

The primary reasons for redesigning the Stripe homepage were that the business had evolved significantly, and the old site, despite holding up well, no longer fully represented the expanded product suite and the story of how Stripe serves diverse users. Additionally, the existing design language needed refreshing to match Stripe's growing sophistication.