# Как Stripe перепроектировала главную страницу: бенто-боксы, ИИ и счетчик ВВП Источник: https://www.youtube.com/watch?v=ypzNhwpmOD4 Канал: Y Combinator Опубликовано: 22.04.2026 --- Кэти Дилл руководит дизайном в Stripe последние пять лет и утверждает: даже визуально актуальный сайт требует полной переработки, если он перестает отражать эволюцию бизнес-модели компании. В 2026 году Stripe представила новую главную страницу, заменив версию 2020 года, которая прослужила шесть лет и стала эталоном для индустрии SaaS [00:53]. ## Причины отказа от дизайна шестилетней давности [[JUMP:01:30]] Предыдущая итерация сайта Stripe, запущенная в 2020 году, сохраняла визуальную привлекательность, но перестала соответствовать масштабу продукта [01:05]. К 2026 году бизнес Stripe вышел далеко за рамки обработки платежей. Кэти Дилл отмечает, что компания превратилась в комплексную платформу, включающую: * управление подписками; * биллинг на основе использования (usage-based billing) для ИИ-компаний; * автоматизацию налоговой отчетности; * платформы для перемещения денег (как в случае с Shopify) [02:27]. Старый сайт развивался методом наслоения: команда просто добавляла новые блоки вниз по странице. Это привело к потере связного повествования (narrative) и чрезмерному увеличению длины лендинга [03:00]. Кроме того, визуальный язык Stripe, основанный на углах в 12 градусов и градиентных волнах, стал сложным в масштабировании для разных команд дизайнеров [03:34]. ## Новая архитектура: счетчик ВВП и «бенто-бокс» [[JUMP:06:00]] Первое предложение на новом сайте осталось прежним: «Финансовая инфраструктура для роста вашей выручки» [06:44]. Однако акценты сместились в сторону демонстрации глобального влияния. Кэти Дилл выделила счетчик доли мирового ВВП, проходящего через Stripe, как элемент, который может позволить себе только эта компания [07:10]. Это служит сигналом надежности для всех типов клиентов — от индивидуальных предпринимателей до корпораций из списка Forbes. Для структурирования продуктов команда применила концепцию **бенто-бокса** [08:45]: * Вместо длинного списка разделов используется сетка карточек, представляющая ключевые решения: платежи, биллинг, ИИ, выпуск карт (issuing), стейблкоины и маркетплейсы [09:05]. * Внедрена система прогрессивного раскрытия информации. Клик по карточке открывает модальное окно с деталями, не уводя пользователя с главной страницы [09:55]. * Цель такого подхода — сохранить легкость процесса ознакомления (browse mode) и не заставлять посетителей совершать лишние переходы на ранних этапах [11:03]. ## Роль анимации и «культ заботы» о деталях [[JUMP:11:37]] Анимация на сайте Stripe не является декоративной. По словам Кэти Дилл, через проработку движущихся элементов компания транслирует свой манифест заботы о продукте [12:09]. Логика проста: если клиент видит исключительное внимание к визуальным деталям, он экстраполирует это на безопасность транзакций и надежность кода бэкенда. Процесс настройки анимации включал: 1. Прототипирование скорости движения элементов (например, траектории шара в блоке биллинга) [11:42]. 2. Настройку плавности переходов между состояниями. 3. Интерактивность: элементы реагируют на курсор, подтверждая возможность клика [12:48]. Команда осознанно отложила запуск сайта с декабря на январь из-за того, что анимации в одном из разделов не казались достаточно «бесшовными» [15:14]. Кэти Дилл считает, что задержка релиза на месяц оправдана, если результат демонстрирует техническое превосходство компании [15:42]. ## Искусственный интеллект в дизайн-процессе [[JUMP:16:24]] Stripe использует ИИ для генерации брендированных изображений, объединяющих символику Stripe (параллелограмм) и образы компаний-клиентов [16:37]. Однако Кэти Дилл подчеркивает, что ИИ не заменяет мастерство (craft) и вкус дизайнера. При генерации изображений команда сталкивалась с типичными ошибками нейросетей: неестественными тенями, искаженной анатомией рук и рук объектов [28:41]. Основные функции ИИ в команде дизайна Stripe: * **Ускорение итераций:** возможность рассмотреть 20 идей за то же время, которое раньше требовалось на две [29:08]. * **Быстрое прототипирование:** генерация вариантов интерфейса (например, аккордеонов или модальных окон) для проверки гипотез [29:34]. * **Персонализация для тестов:** автоматическая замена текстов под конкретные сегменты аудитории при проведении пользовательских исследований [29:48]. ## Инструмент «Идеальная волна» и визуальная идентичность [[JUMP:19:11]] Градиентная волна — центральный элемент бренда Stripe. Чтобы найти оптимальный вариант для нового сайта, инженеры компании создали внутренний инструмент для настройки параметров графики в реальном времени [20:04]. Дизайнеры могли изменять уровень размытия (blur), зернистость (grain), угол поворота и плотность текстуры прямо в браузере. Это позволило протестировать сотни вариантов: от монохромных и спокойных до турбулентных «радужных» градиентов [21:21]. Патрик Коллисон принимал активное участие в финальном отборе, оценивая, как волна взаимодействует с типографикой и читаемостью текста [21:47]. Кэти Дилл отмечает, что решение по визуалу принималось исходя из того, сможет ли дизайн оставаться актуальным еще как минимум шесть лет [23:30]. ## Борьба с «гравитацией посредственности» [[JUMP:35:00]] Кэти Дилл ввела термин «гравитационное притяжение к посредственности». Она утверждает, что в любой крупной организации психологически проще принять решение «и так сойдет», чтобы не нарушать сроки или не расстраивать команду дополнительными правками [35:38]. Для поддержания качества Stripe использует концепцию **MVQP** (Minimum Viable Quality Product — минимально жизнеспособный качественный продукт) вместо традиционного MVP [39:10]. Это исключает выпуск «сырых» решений, которые могут подорвать доверие к бренду. ## Практика «Walking the Store» [[JUMP:40:00]] Ключевой метод контроля качества в Stripe — регулярное тестирование собственных продуктов сотрудниками, которое называют «обходом магазина» [40:03]. Каждую пятницу основатели компании проводят эту процедуру перед всем коллективом, чтобы продемонстрировать важность внимания к деталям [42:13]. Особенности метода: * **Междисциплинарность:** в тестировании одновременно участвуют инженер, дизайнер, менеджер продукта и специалист по данным [42:40]. * **Поиск «тупиков»:** проверка того, как разные продукты (платежи, налоги, подписки) стыкуются между собой в рамках одного пользовательского пути [41:21]. * **Счетная доска:** ведение реестра критических путей (essential journeys) с цветовой индикацией статуса (красный, желтый, зеленый) [41:47]. По мнению Кэти Дилл, это позволяет видеть «лес за деревьями» и вовремя замечать, когда обновление одного модуля негативно сказывается на визуальной или функциональной целостности всей системы [40:55].