Кэти Дилл руководит дизайном в Stripe последние пять лет и утверждает: даже визуально актуальный сайт требует полной переработки, если он перестает отражать эволюцию бизнес-модели компании. В 2026 году Stripe представила новую главную страницу, заменив версию 2020 года, которая прослужила шесть лет и стала эталоном для индустрии SaaS .
Причины отказа от дизайна шестилетней давности 1:30
Предыдущая итерация сайта Stripe, запущенная в 2020 году, сохраняла визуальную привлекательность, но перестала соответствовать масштабу продукта . К 2026 году бизнес Stripe вышел далеко за рамки обработки платежей. Кэти Дилл отмечает, что компания превратилась в комплексную платформу, включающую:
- управление подписками;
- биллинг на основе использования (usage-based billing) для ИИ-компаний;
- автоматизацию налоговой отчетности;
- платформы для перемещения денег (как в случае с Shopify) .
Старый сайт развивался методом наслоения: команда просто добавляла новые блоки вниз по странице. Это привело к потере связного повествования (narrative) и чрезмерному увеличению длины лендинга . Кроме того, визуальный язык Stripe, основанный на углах в 12 градусов и градиентных волнах, стал сложным в масштабировании для разных команд дизайнеров .
Новая архитектура: счетчик ВВП и «бенто-бокс» 6:00
Первое предложение на новом сайте осталось прежним: «Финансовая инфраструктура для роста вашей выручки» . Однако акценты сместились в сторону демонстрации глобального влияния. Кэти Дилл выделила счетчик доли мирового ВВП, проходящего через Stripe, как элемент, который может позволить себе только эта компания . Это служит сигналом надежности для всех типов клиентов — от индивидуальных предпринимателей до корпораций из списка Forbes.
Для структурирования продуктов команда применила концепцию бенто-бокса :
- Вместо длинного списка разделов используется сетка карточек, представляющая ключевые решения: платежи, биллинг, ИИ, выпуск карт (issuing), стейблкоины и маркетплейсы .
- Внедрена система прогрессивного раскрытия информации. Клик по карточке открывает модальное окно с деталями, не уводя пользователя с главной страницы .
- Цель такого подхода — сохранить легкость процесса ознакомления (browse mode) и не заставлять посетителей совершать лишние переходы на ранних этапах .
Роль анимации и «культ заботы» о деталях 11:37
Анимация на сайте Stripe не является декоративной. По словам Кэти Дилл, через проработку движущихся элементов компания транслирует свой манифест заботы о продукте . Логика проста: если клиент видит исключительное внимание к визуальным деталям, он экстраполирует это на безопасность транзакций и надежность кода бэкенда.
Процесс настройки анимации включал:
- Прототипирование скорости движения элементов (например, траектории шара в блоке биллинга) .
- Настройку плавности переходов между состояниями.
- Интерактивность: элементы реагируют на курсор, подтверждая возможность клика .
Команда осознанно отложила запуск сайта с декабря на январь из-за того, что анимации в одном из разделов не казались достаточно «бесшовными» . Кэти Дилл считает, что задержка релиза на месяц оправдана, если результат демонстрирует техническое превосходство компании .
Искусственный интеллект в дизайн-процессе 16:24
Stripe использует ИИ для генерации брендированных изображений, объединяющих символику Stripe (параллелограмм) и образы компаний-клиентов . Однако Кэти Дилл подчеркивает, что ИИ не заменяет мастерство (craft) и вкус дизайнера. При генерации изображений команда сталкивалась с типичными ошибками нейросетей: неестественными тенями, искаженной анатомией рук и рук объектов .
Основные функции ИИ в команде дизайна Stripe:
- Ускорение итераций: возможность рассмотреть 20 идей за то же время, которое раньше требовалось на две .
- Быстрое прототипирование: генерация вариантов интерфейса (например, аккордеонов или модальных окон) для проверки гипотез .
- Персонализация для тестов: автоматическая замена текстов под конкретные сегменты аудитории при проведении пользовательских исследований .
Инструмент «Идеальная волна» и визуальная идентичность 19:11
Градиентная волна — центральный элемент бренда Stripe. Чтобы найти оптимальный вариант для нового сайта, инженеры компании создали внутренний инструмент для настройки параметров графики в реальном времени . Дизайнеры могли изменять уровень размытия (blur), зернистость (grain), угол поворота и плотность текстуры прямо в браузере.
Это позволило протестировать сотни вариантов: от монохромных и спокойных до турбулентных «радужных» градиентов . Патрик Коллисон принимал активное участие в финальном отборе, оценивая, как волна взаимодействует с типографикой и читаемостью текста . Кэти Дилл отмечает, что решение по визуалу принималось исходя из того, сможет ли дизайн оставаться актуальным еще как минимум шесть лет .
Борьба с «гравитацией посредственности» 35:00
Кэти Дилл ввела термин «гравитационное притяжение к посредственности». Она утверждает, что в любой крупной организации психологически проще принять решение «и так сойдет», чтобы не нарушать сроки или не расстраивать команду дополнительными правками .
Для поддержания качества Stripe использует концепцию MVQP (Minimum Viable Quality Product — минимально жизнеспособный качественный продукт) вместо традиционного MVP . Это исключает выпуск «сырых» решений, которые могут подорвать доверие к бренду.
Практика «Walking the Store» 40:00
Ключевой метод контроля качества в Stripe — регулярное тестирование собственных продуктов сотрудниками, которое называют «обходом магазина» . Каждую пятницу основатели компании проводят эту процедуру перед всем коллективом, чтобы продемонстрировать важность внимания к деталям .
Особенности метода:
- Междисциплинарность: в тестировании одновременно участвуют инженер, дизайнер, менеджер продукта и специалист по данным .
- Поиск «тупиков»: проверка того, как разные продукты (платежи, налоги, подписки) стыкуются между собой в рамках одного пользовательского пути .
- Счетная доска: ведение реестра критических путей (essential journeys) с цветовой индикацией статуса (красный, желтый, зеленый) .
По мнению Кэти Дилл, это позволяет видеть «лес за деревьями» и вовремя замечать, когда обновление одного модуля негативно сказывается на визуальной или функциональной целостности всей системы .
