Discover how Stripe redesigned their homepage with AI integration. Learn the design principles, process, and strategies behind their new website that increas...
How Stripe Built Their New Website: Design Process & AI Impact
Core Insights
- Strategic redesign motivation: Stripe's 2020 homepage had aged well but no longer reflected the company's evolved business offerings and broader customer base
- Clarity through consolidation: The new "bento" design reduces scrolling friction while comprehensively communicating diverse product offerings through visual storytelling
- AI as accelerator, not replacement: AI tools dramatically speed up prototyping and iteration, but human craft, taste, and attention to detail remain essential for exceptional results
- User-centric validation: "Walking the store" methodology ensures teams understand real user journeys across interconnected products
- Design excellence as differentiator: Every decision—from animation timing to gradient precision—communicates company values and builds user trust
The Evolution: Why Stripe Needed a New Homepage
Stripe's original homepage, launched in 2020, was remarkably durable. Six years later, it still maintained visual relevance and conveyed the company's core message: "Financial infrastructure to grow your revenue." However, durability doesn't equal relevance. The business had evolved dramatically—what once centered on payments now encompassed subscriptions, usage-based billing, tax solutions, revenue recognition, stablecoins, platform services, and AI-powered tools.
The old site attempted to address this expansion through continuous addition. Teams kept appending new sections to showcase different use cases—startups, enterprises, AI companies, marketplace platforms. Users had to scroll extensively to find information relevant to their specific needs. This approach created cognitive overload and diluted the core narrative. Katie Dill, Stripe's Head of Design, recognized that incremental updates wouldn't solve a fundamental structural problem.
Beyond content, the visual language had lost clarity. The signature gradient wave, while distinctive, didn't scale effectively across different contexts. Design implementation lacked consistency—teams weren't entirely sure how to apply the 12-degree angles, color overlays, and typography that supposedly defined Stripe's visual system. What Stripe needed wasn't minor refinement; it needed a comprehensive reimagining that would serve the company for another six years.
The business case was compelling: 78% of Forbes AI 50 companies use Stripe, yet this crucial market segment barely registered on the homepage. Enterprise customers needed reassurance about reliability and scale. Micro-entrepreneurs needed to understand accessibility. Everyone needed to quickly identify whether Stripe solved their specific problem. The new design had to accomplish all this without the exhausting scroll-to-find-your-section experience.
Designing for Clarity: From Content Strategy to Visual Hierarchy
Stripe's design philosophy began with first principles. What is a website's actual purpose? Beyond functional transactions, it serves as a company manifesto—a statement of who you are, what you do, and why it matters. This manifesto expresses itself through countless micro-decisions: color choices, typography, detail-level, animation philosophy. Every element either reinforces or undermines your intended message.
This clarity of purpose drove the redesign. The team spent over a year exploring possibilities, rejecting iterations that felt "good enough" but lacked intentionality. They experimented with different narrative structures: Should everything fit on a single screen? Should users scroll through sections? Should interactive accordions let users click to reveal information?
User research revealed critical insights. Accordion designs failed because users won't click tabs; they're in "lean-back" browsing mode, passively consuming rather than actively hunting information. Single-screen approaches felt text-heavy and overwhelming. Excessive scrolling caused engagement drop-off. The solution emerged: the "bento" layout.
The bento approach displays multiple service areas in a visual grid, each represented through compelling imagery and minimal text. Instead of telling users "we offer subscriptions and usage-based billing," the design shows these solutions in action through carefully crafted visuals. This "show, don't tell" methodology respects user behavior: people want quick insight into whether your solution fits their needs without excessive reading or clicking.
Critically, the bento design includes interactive modal expansions. Users can click cards for deeper information without leaving the homepage, maintaining engagement and narrative flow. This hybrid approach—visual browsing combined with optional depth—proved superior to rigid alternatives. Users could explore comprehensive product offerings while maintaining the light, easy feeling Stripe wanted to convey.
The Craft Behind Every Pixel: Animation, Imagery, and Intentionality
Stripe's commitment to excellence manifests in details most visitors never consciously notice. The homepage features thoughtful animations on each card—movements that provide visual feedback and communicate liveliness without distraction. These weren't random flourishes; they represented countless prototyping iterations adjusting movement speed, line quantity, and flow until the balance felt right.
This obsessive attention extended to launch decisions. One particularly important animation section wasn't ready for December's planned launch. The team collectively decided to delay release until January to ensure execution met their standards. This decision reflects a deeper philosophy: it's better to ship later with excellence than rush with mediocrity. The delay proved worthwhile, delivering a polished experience that communicated Stripe's meticulous approach to detail.
Visual asset creation presented unique challenges. Stripe commissioned custom imagery showing brands using their services—each image meticulously crafted to reflect both the featured company's essence and Stripe's distinctive visual identity (including the signature parallelogram design element). The team initially explored AI-generated imagery, expecting rapid production. They quickly learned that even AI tools require substantial human refinement. A photo of ice cubes in a beverage might look correct at first glance, but closer inspection reveals missing bubble details and inadequate ice crackle texture. Urban storefront imagery might get overall composition right while failing on shadow patterns and anatomical accuracy in background figures.
The homepage's signature wave underwent similar intense refinement. Stripe's engineering team developed specialized tools allowing microsecond adjustments to blur, grain, scale, rotation, and texture parameters. Every color shade mattered. The team spent considerable time defining the exact emotional tone: should the wave feel vibrant or muted? Monochromatic or multi-colored? Warm or cool? Flat or three-dimensional? Quiet or turbulent?
These discussions involved leadership—Patrick Collison's aesthetic judgment helped crystallize direction. Once finalized through the visual tool, the challenge shifted to engineering efficiency, ensuring the wave rendered smoothly across all devices and connection speeds. This synthesis of design vision and technical optimization exemplifies Stripe's approach: craft and pragmatism together.
AI as Design Multiplier: Raising the Floor, Not Replacing Craft
Stripe's integration of AI tools into the design workflow demonstrates how emerging technology amplifies rather than replaces human excellence. AI excels at generating "super real" baseline imagery—visually credible starting points that previously required extensive photography shoots or illustration work. A designer can sketch a concept, feed it into an AI tool configured with Stripe's design system components, and receive a rough working prototype in minutes.
This acceleration is transformative. The design team can now evaluate 20 different approaches in the time previously required for two. User testing accelerates dramatically—changing all copy or visual elements to test different messaging variations takes hours instead of weeks. Engineers and designers reclaim time previously consumed by repetitive production work.
Yet AI's role remains bounded. Katie emphasizes that AI doesn't replace craft, taste, or essential human attention to detail. The real question isn't whether AI speeds up production—it obviously does. The critical question is: what do designers do with that reclaimed time? The temptation to simply ship more average products at higher velocity is real and must be actively resisted.
Stripe's approach involves fighting what Katie calls "the gravitational pull to mediocrity." It's dangerously easy to look at AI output and think, "that's good enough and came together so quickly." But releasing work simply because it's easy betrays both the company and users. Excellence demands asking harder questions: Is this truly great? Does it achieve the goal? Does it feel intentional and well-crafted? Does it build trust or erode it? Would this make front-page news if it failed?
The answer often requires another iteration. Modern tools enable this workflow beautifully—designers can tweak small elements repeatedly without starting over. This merger of design and engineering tools eliminates the excuse of accepting "slop." The path exists to fight for right solutions; it requires intentionality and refusal to settle.
Designing Systems for AI-Assisted Scale
Design systems have always served scaling purposes. As organizations grow beyond small teams having daily conversations, design systems help ensure coherent decision-making and consistent user experience. AI introduces new possibilities and challenges to this traditional role.
Katie envisions design systems increasingly managed by AI tools, enabling faster scaling without sacrificing quality. The workflow becomes: designer sketches desired output, AI tool assembles rough version using system components, designer refines by identifying components that don't quite fit purpose, AI tool helps expand the system to accommodate new use cases. This iterative expansion grows the design system organically in response to real product needs.
This approach demands discipline. It's easy to accept AI output and move forward; resisting that ease requires conscious choice. Designers must continuously ask: Is this slop, or is it solid foundation for refinement? The difference between shipping finished work and shipping incomplete work depends on this evaluation. The best tools today don't eliminate this judgment—they enhance the designer's ability to implement it at scale.
Stripe's philosophy emphasizes an "Minimum Viable Quality Product" rather than MVP. Shipping products with unfinished quality erodes user trust, particularly crucial for financial infrastructure serving diverse customers worldwide. But equally, perfection is a dangerous pursuit when your product only exists as shipped reality, not internal intention. The balance requires defining essential success components while accepting incremental learning from real-world usage—particularly important with AI where user behavior often surprises creators.
Walking the Store: User Experience Across Integrated Products
Stripe employs a cultural practice called "walking the store"—literally using your products as customers would, exploring different user journeys, attempting transactions, and identifying dead ends. This isn't occasional feedback gathering; it's a company-wide requirement. Every Friday, founders publicly walk the store in front of the entire company, modeling its importance and demonstrating how different perspectives surface different insights.
This practice reveals interconnection problems invisible from individual team perspectives. Stripe's money movement, revenue, and payments organizations naturally focus on their specific missions. Without conscious coordination, users might experience jarring transitions when moving from subscriptions (revenue product) to payments to tax solutions. The different organizations might not consider how their design decisions affect adjacent experiences.
Walking the store makes this visible. A data scientist notices different details than an engineer, who observes differently than a product leader. Together, they understand how a user might encounter inconsistencies, confusing transitions, or missing features that should obviously exist in integrated services. Stripe tracks "essential journeys"—critical user paths like "new customer onboarding to first transaction to recurring billing setup"—with scoreboard tracking (red/yellow/green) ensuring organizational attention.
This methodology directly informed the new homepage design. The bento layout and modal system needed to respect the reality that users might need multiple Stripe services. By designing explicitly for these cross-product journeys, Stripe could help users understand the comprehensive value they could unlock rather than forcing them to piece together scattered solutions.
Principles for Design Excellence in the AI Era
Katie distills several core principles that Stripe applies to product and experience design, particularly relevant as AI tools proliferate:
Resist the gravitational pull to mediocrity. It's easy to accept adequate solutions, especially when accumulated across a thousand small decisions. But compound mediocrity creates products nobody loves using. Fighting this pull requires asking: What's the cost of accepting good enough? How many good-enough decisions will erode product excellence?
Experience as a user would. Don't sell stakeholders on rationale; instead ask whether the actual user experience feels right without explanation. Prototyping rather than presenting—showing real usage rather than describing intended usage—separates great decisions from decent ones.
Evaluate trade-offs explicitly. Will this negatively impact someone's day? Could it erode trust? Would it make headlines if it failed? These questions transform design from aesthetic choice to values expression.
Progress beats perfection. Shipped products matter infinitely more than perfectly-planned-but-unreleased designs. You won't understand how users interact with AI systems until they experience them in real contexts. Ship work that meets essential quality thresholds while remaining open to learning and iteration.
Quality as manifesto. Every detail—animation timing, gradient precision, imagery authenticity, component consistency—communicates who you are and what you care about. Excellent details build trust; mediocre ones erode it. This especially matters for companies handling financial data and money.
Conclusion
Stripe's homepage redesign demonstrates how thoughtful design strategy, craftsmanship, and emerging AI tools work together to create exceptional user experiences at scale. The project required a year of exploration, countless iterations, decisive rejection of mediocrity, and willingness to delay launch for quality—all ultimately guided by fundamental questions about website purpose and user value.
The result isn't just aesthetic improvement; it's strategic clarity. The new homepage communicates Stripe's expanded offerings with unprecedented clarity while maintaining the light, engaging experience that respects user behavior and attention. As AI tools continue transforming design workflows, Stripe's approach offers a model: leverage technology for speed and scale while maintaining uncompromising standards for craft, intention, and user benefit. The future of design isn't about choosing between human creativity and AI assistance—it's about using both to push excellence forward.
Original source: How Stripe Built Their New Website
powered by osmu.app