By playing, you agree to uListen's Terms and Privacy Policy and YouTube's Terms of Service.

How Stripe Built Their New Website

Even the most successful websites eventually need a redesign. Take Stripe for example. After six years with the same homepage, they recently unveiled a brand new site that reflects how the fintech giant has evolved over the past few years.

Aaron EpsteinhostKatie Dillguest

Apr 22, 202643mWatch on YouTube

Summaries, chapters, transcripts, and FAQs on this page are made by uListen, not YouTube.

CHAPTERS

Jump to publisher timestamps

Chapter summaries

Stripe’s homepage redesign: what changed and why it mattered
Aaron Epstein welcomes Stripe Head of Design Katie Dill to unpack the thinking and craft behind Stripe’s new homepage. They set the stakes: the redesign isn’t about trend-chasing, but reflecting how Stripe’s business and brand have evolved—and how AI is entering the design workflow.
- •Context: new Stripe homepage launch and behind-the-scenes breakdown
- •Goals: revisit old vs. new site, process, and AI’s impact on design work
- •Framing: homepage as a high-stakes brand artifact, not just marketing collateral
The 2020 site held up—until Stripe outgrew its story
Katie explains the old (2020-era) site still looked strong and aged well, which made redesigning it a higher bar. The real issue was narrative and product breadth: Stripe’s capabilities had expanded beyond what the old structure could clearly communicate.
- •Old site was still visually modern and functional
- •Business evolution (beyond ‘payments-first’) demanded a new explanation
- •Site became long and additive over time, weakening narrative coherence
The biggest gap: product suite breadth and new customer realities
Stripe now supports multinational enterprises, platforms, billing complexity, tax, revenue recognition, and fast-scaling AI companies—yet visitors only got a partial glimpse. The redesign needed to clearly signal who Stripe serves and what it enables today.
- •Stripe supports enterprises, startups, platforms, marketplaces, and AI companies
- •New use cases: usage-based billing, subscriptions, tax, rev rec, money movement
- •Old homepage underrepresented the true scope and modern priorities
First principles: “What is the point of a website?”
Katie frames the homepage as a company manifesto expressed through words and details: typography, color, motion, and what the team chooses to care about. The redesign aimed for radical clarity—who Stripe is for, what it offers, and what it stands for.
- •Website as an implicit manifesto (values conveyed through execution)
- •Design details communicate trust, competence, and care
- •Goal: make Stripe’s audience, offering, and priorities unmistakable
A year-plus of exploration: refusing to ‘wear the wrong shirt’ for six years
Because the homepage represents Stripe for years, the team invested extensive time exploring directions and discarding “almost right” solutions. Katie emphasizes the willingness to iterate patiently rather than ship something that doesn’t feel enduring.
- •Long timeline enabled deeper exploration and higher standards
- •Many concepts were ‘good’ but not durable or distinctive enough
- •Deliberate pacing: ship when it truly matches the brand’s evolution
Homepage hero choices: keeping the core line, adding broader signals
The new hero retains the foundational positioning (“financial infrastructure to grow your revenue”) while adding cues that Stripe is more than payments. The top-of-page decisions focus on quickly establishing scope and credibility.
- •Core positioning stayed consistent; supporting context expanded
- •Hero content designed to catch more “Stripe is for me” audiences
- •Top-of-page clarity reduces reliance on deep scrolling
The GDP counter: trust and proof only Stripe can credibly show
They discuss the live GDP counter as a uniquely Stripe-able credibility signal: measurable global impact and scale. It reinforces trust for both small builders and large enterprises through quantifiable social proof.
- •Trust-building: reliability and scale are central buying criteria
- •GDP counter quantifies impact; reinforces enterprise readiness
- •Complemented by customer logo/social proof elements
The ‘Bento box’ section: progressive disclosure for a complex suite
Katie breaks down the bento approach: a visual, low-text way to convey multiple solutions without overwhelming users. It’s designed for exploration—showing vs. telling—and guiding users into deeper detail only when they’re ready.
- •Bento tiles depict solution areas (payments, billing, AI, issuing, stablecoins, platforms)
- •Minimal text + strong visuals to avoid overload
- •Progressive disclosure prevents the homepage from becoming a product catalog
Why modals (not new pages): keep users on the journey
Instead of sending visitors away, the site uses overlays/modals to expand information in-place. This supports a ‘browse’ mindset, keeps context, and makes exploration feel light rather than navigationally expensive.
- •Modals maintain momentum and reduce early-page drop-off
- •In-place details help users decide without losing context
- •Interaction design supports scanning and optional deep dives
Motion and delight—without distraction: tuning animations to communicate care
They explore how Stripe uses subtle animations to make the page feel alive and signal craftsmanship. Katie stresses careful prototyping and fine-tuning (speed, density, transitions) so motion supports meaning rather than becoming noise.
- •Motion signals responsiveness, clickability, and brand ‘aliveness’
- •Iteration to avoid annoying or overwhelming interactions
- •Animations reinforce messages (scale, uptime) while adding beauty
Beauty has value: intentionality, iteration, and knowing when to wait
Katie defends beauty as part of progress and explains how the team delayed launch to get key transitions and motion right. They discuss the discipline of being intentional—shipping when it’s joyful, coherent, and high-quality rather than merely “done.”
- •Beauty and craft are strategic, not decorative
- •Launch delayed to fix ‘kludgy’ motion/transitions for coherence
- •Intentionality: every element must earn its place
Brand storytelling blocks: custom customer imagery, darker dev section, and ‘Squeezy Boy’
The homepage uses custom-made customer visuals to create punctuation moments that slow fast scrollers and connect Stripe to the brands it serves. They also cover the darker developer/integrations area and a playful, frequently updated content module (‘Squeezy Boy’) that introduces additional design constraints.
- •Custom customer images blend Stripe motifs (parallelogram) with partner brands
- •Dark section nods to developer context and continuity with prior site
- •‘Squeezy Boy’ module: dynamic content + responsive scaling challenges
Designing the Stripe wave: tooling, endless variants, and performance constraints
Katie shows how Stripe built internal tools to iterate on the iconic wave background—tweaking blur, grain, scale, rotation, color, texture, and motion. The team narrows options, reviews with Patrick, tests in real context, and ensures the final result is performant across devices.
- •Internal tool enables rapid exploration and saved states for comparisons
- •Decision process: broad exploration → down-select → founder review → in-context testing
- •Real-world constraints: readability behind text, cohesive composition, and performance
Homepage concept exploration: why bento won over scroll, tabs, and accordions
They walk through rejected concepts—dense ‘everything at once’ layouts, scrolly section stacks, and accordions that tested poorly due to interaction effort. The bento approach proved most visual and ‘kinder’ to users in a lean-back browsing mode.
- •Tradeoff: show more sooner vs. overwhelming users
- •User research: accordions/tabs require effort and reduce comprehension
- •Bento favored for immediate visual comprehension and faster orientation
AI in the workflow: faster exploration, but craft and taste still decide
Katie details where AI helped (rapid prototyping, experimenting with motion/words, generating photoreal imagery), and where it didn’t (pixel-level correctness, realism, brand nuance). AI raises the floor, but the team must still fight ‘slop’ and push from 7/10 to exceptional.
- •AI accelerates ideation, prototyping, and user-test variations
- •Generated imagery still needs heavy critique (anatomy, shadows, realism, brand fit)
- •Designers must not accept ‘pretty good’ just because it’s fast
Fighting mediocrity + ‘walking the store’: quality culture in an AI era
Katie shares principles for maintaining excellence: resist the gravitational pull to mediocrity, prototype like a user would experience it, and balance progress with a minimum viable quality bar. She closes with how Stripe institutionalizes ‘walking the store’ to catch UX drift across teams and keep the end-to-end experience coherent.
- •Principles: don’t accept good-enough compounding over time; realize work in user context
- •Balance: progress over perfection, but protect trust with MVQP (minimum viable quality)
- •‘Walking the store’ as a cross-functional, founder-led practice to maintain cohesion

Publisher timestamps

Get more out of YouTube videos.

Read along on your phone, search it beside the video, or ask your favorite AI app what was said.