How Stripe Built Their New Website
In a Nutshell
Stripe's Katie Dill details the redesign of their 2020 homepage to reflect evolved products like usage-based billing for AI, stablecoins, and platforms, addressing outdated visuals (e.g., 12-degree bar, gradient wave), narrative sprawl, and enterprise scale via a fresh manifesto with unchanged hero tagline "Financial infrastructure to grow your revenue." Key features include a GDP counter for trust, bento grid with modals for 12+ products, purposeful animations, custom user images, and dynamic integrations, all refined through months of iteration using AI for rapid prototyping and exploration without sacrificing craft. AI raises design floors for speed but demands fighting mediocrity via prototypes, user-testing, QA "walking the store," and principles like MVQP to ensure cohesive, joyful experiences amid broad team contributions.
These notes were generated by AI and may contain inaccuracies.
Katie Dill, Stripe's head of design, discusses the launch of Stripe's new homepage and how AI is changing the design process.
The original Stripe homepage launched in 2020, six years ago. It stood the test of time well. The redesign was driven by business evolution beyond the old site's story, need to freshen the brand, and reach a broader set of users. Changes included updating words, product shots, and user representations for larger enterprises and growing startups.
The page had grown long with additive sections, losing narrative clarity. Product suite evolved significantly: started with payments, now includes subscriptions, usage-based billing for AI companies, tax and revenue recognition for platforms like Shopify, and money movement for platform businesses. Old site only glimpsed the full offering.
Visuals needed refresh to match business sophistication. Issues with 12 degree bar, colors, overlays, typography, and gradient wave that didn't scale well. Needed new design vision and updated story.
The 2020 site looks modern despite age, testament to Stripe's forward design thinking with ongoing updates.
Old approach: add sections targeting different users, hoping scrollers find theirs. AI now major: 78% of Forbes AI 50 use Stripe for scaling and monetization via usage-based billing for inferences costs.
Point of a website: manifesto demonstrating who you are, what you do, why, through build, presentation, colors, typography, details. Goal: clear story for who Stripe serves, how, and values. Process took painstaking hours over a year+, not rushed since internal.
Many weeks/months of exploration, rejecting options not right for next 6 years.
Hero tagline remains: "Financial infrastructure to grow your revenue."
Live counter shows percentage of global GDP running on Stripe (reached billionth transaction). Signals scale for enterprises. Scrolls users at bottom. Builds trust for micro-entrepreneurs to large enterprises: dependable, reliable, trustworthy at scale.
Bento depicts solution set scale without overwhelm:
- Payments: online + Terminal
- Billing: usage-based, fixed fee subscriptions, customizable
- AI
- Issuing
- Stablecoins
- Platforms/Marketplaces
Minimal text, show not tell via imagery. Overlay modals for more insight without leaving page. Progressive disclosure for 12+ products. Keeps light, exploratory journey; avoids early jumps.
Fine-tuned via prototyping: adjusted line counts, speeds. Expresses care (assumed in money movement/security), makes alive, provides feedback (clickable). Delicate, not distracting.
Animated metrics show scale: global, uptime. Loosely communicates intent, adds interest/fun. Changes by time of day.
Sites entering fun era post-SaaS sameness. AI tools enable fast good, freeing time for great/playful/beautiful. Animations/interactivity purposeful, tied to messages.
Delayed launch from December to January to perfect 4 animations' smoothness/transitions. Group decision: worth waiting over holidays vs. clunky.
Custom images blend Stripe brand (parallelogram) with served companies. AI explored but required process/love. Visual punctuation to slow fast scrollers, communicate brand types.
Dark background for integrations/APIs (developer language, carried from old site). Squeezy boy: dynamic fun portrayals (Black Friday/Cyber Monday city, podcast Cheeky Pint). Challenges: scale images. Iteration for polish.
Top wave/gradient: endless variants over 5 years. Tool for tweaking blur, grain, scale, rotation, thickness, texture, color, movement. Essential for right mix, performant build.
First: define goals (vibrant/muted? flat/object? monochromatic/bold/rainbow?). Discussions with Patrick (heavily involved). Like choosing clothes for years.
Infinite variations; downselect: large range → subset comfortable with → ?
We down select to a subset of texture options that we're comfortable with and wouldn't hesitate to put in front of Patrick. It's helpful to show the process and what was explored. We discuss which ones feel right, and Patrick's decisiveness and good taste help finalize choices. A blessing and curse of design is that something feeling great in isolation or on a board changes when integrated with typography, logos, and other elements, or after sitting with it over time. Designs evolve as initial choices may not stand the test of time.
The goal is to get prototypes into a state mimicking user experience as quickly as possible, putting ourselves in the user's shoes. Sometimes coding takes time, so we down select using static visuals first to decide which versions to code. The AI tool helps by generating many versions at once for side-by-side comparison.
Text overlays require adjusting colors for readability, ensuring no distraction and proper interaction with other page elements.
Bento grids aim to communicate Stripe's offerings efficiently, considering user types like micro-entrepreneurs, small businesses, large enterprises, and interests in billing or Connect. Showing everything on one screen reduces scroll drop-off.
- One variation squishes everything together but is type-heavy, showing more telling than showing.
- Section-by-section approach similar to the original site feels too scrolly.
- Accordion requires user effort to expand, which user research showed hinders quick digestion—people rarely click tabs.
Users arrive in lean-back, browse mode, so hiding key messages behind clicks fails. The visual bento grid wins for being kinder, allowing passive scanning.
AI excels at hyper-realistic images like product shots. Simple prompts fail; nuances and details must match the site's care level.
Bubbles required intense iteration. An ice cube with bubbles looked okay initially but failed scrutiny:
Each critique highlights where it doesn't feel real, like imperfect anatomy, shadows, or layouts (e.g., URBN example with wrong arm, missing hand, incorrect shadow).
AI speeds exploration (20 ideas vs. 2), prototyping (e.g., accordion movements), and user testing (quick word changes). It raises the floor for baseline products but doesn't replace craft, taste, or detail attention.
Designers push the status quo, creating easy-to-use, powerful tools that solve problems, build businesses, and bring joy—a beautiful world is better.
AI enables raising the floor to 7/10 quickly for standard components like modals, freeing time for new paradigms:
- Agent experiences for AI-driven business building.
- Tomorrow's UX for agent-internet traversal.
Everyone can now ship code, update products, and websites. Design systems scale teams by ensuring coherence as organizations grow.
AI manages and expands systems: sketch an idea, AI assembles from components; tweak or extend for new use cases.
Don't accept AI's quick output if it's not great—fight for intentionality with iterative tweaks. Merge of design and dev tools prevents slop.
Gravitational pull is to mediocrity; accepting good enough compounds over time, making products meh. Few companies stand out as exquisite.
Fight the gravitational pull to mediocrity and do not leave well enough alone.
Consider the cost: if you let one thing slide, what else follows? Don't prioritize team feelings over quality.
- Experience as the user would: prototype, not present—focus on end-feel without internal context.
- Weigh trade-offs: Does it erode trust? Make front-page news?
Progress > perfection; ship MVQP (minimum viable quality product) to learn, especially with AI's unpredictability. Have a rubric for essentials.
Walking the store embodies user perspective. Internal familiarity blinds to real experience.
Products evolve post-ship via others' changes, like mismatched home updates. Stripe's areas (money movement, revenue, payments) must interconnect seamlessly across user journeys (e.g., subscriptions + payments + tax).
Culture mandates it: Essential Journeys scoreboard (red/yellow/green). Founders demo Fridays company-wide, highlighting diverse viewpoints (engineer, PM, data scientist) for fuller user understanding.
Behind-the-scenes effort—blood, sweat, tears—is rarely shared but essential to great work.
Keep Y Combinator in your library
Save the videos and channels worth coming back to, and find them again in one place.
