Дизайн в Stripe: как строить практику на стыке AI и высокого вкуса
7 из 10 опытов проверки гипотез делается за копейки. Вопрос — кто будет делать 15 из 10? Кэти Дилл, глава дизайна в Stripe, объясняет, почему AI поднимает базовый уровень, но потолок по-прежнему зависит от вкуса.
В подкасте Dive Club Кэти Дилл рассказывает о редизайне stripe.com, эволюции дизайн-процессов и том, как AI меняет работу дизайнеров. Это не просто разговор «о трендах» — это практический гайд по тому, как строить дизайн-организацию, которая не тонет в посредственности.
Бенто-сетка с чистой точкой входа
Новый stripe.com использует бенто-сетку, но с важным отличием от большинства реализаций:
«Слишком многие бенто-сетки перегружены текстом — вы заставляете писать по три строки описания для каждого элемента.»
Решение Stripe — чистая сетка с минимумом текста, но с всплывающей панелью, которая появляется при наведении и даёт столько информации, сколько нужно. Это позволяет:
- Не перегружать первый взгляд
- Дать глубину тем, кто хочет узнать больше
- Сохранять визуальную чистоту
БЕНТО-СЕТКА: ТИПИЧНЫЙ ПРОТИВ STRIPE
──────────────────────────────────────────
ТИПИЧНЫЙ ПОДХОД STRIPE
───────── ─────────────
┌─────────────────┐ ┌─────────────┐
│ Заголовок │ │ │
│ │ │ Иконка │
│ + 3 строки │ │ или │
│ описания │ │ иллюстрация│
│ которые никто │ │ │
│ не читает │ └──────┬──────┘
│ │ │
│ ▣ ▣ ▣ ▣ ▣ ▣ ▣ ▣ │ ┌──────▼──────┐
└─────────────────┘ │ ВСПЛЫВАЮЩАЯ │
│ ПАНЕЛЬ │
Перегружено с первого │ Заголовок │
взгляда │ + детали │
│ при наведении│
└─────────────┘
Чистый вход → Глубина по запросу
«Показывай, а не рассказывай» — визуальная коммуникация
Кэти описывает ключевой принцип:
«Представьте, что вы заходите на сайт и читаете только 10% слов. Вы понимаете суть? Именно так я просматриваю сайты — быстро скроллю и улавливаю общий смысл.»
Изображения должны коммуницировать суть без чтения текста. Это особенно важно для сложных B2B-продуктов, где объяснить «что это» словами — вызов.
Практический совет: Тестируйте дизайн на «10% правило» — если пользователь прочитает только десятую часть текста, поймёт ли он, о чём речь?Прямой язык без маркетингового шума
Stripe принципиально избегает «размытых формулировок»:
«Как нам сказать прямо, что делает продукт и для кого? Это непросто — не могу сказать, сколько итераций слов мы сделали.»
Это контрастирует с типичным подходом корпоративного ПО, где «доставка действенных выводов» ничего не значит.
Практический совет: Проверяйте каждый заголовок на вопрос: «Знает ли читатель, что именно делает этот продукт?» Если нет — переписывайте.Длинный заголовок вместо универсального
Интересное решение для компании с множеством продуктов:
«Финансовая инфраструктура для роста вашей выручки — нельзя сказать, что множество людей понимают, что это значит, просто прочитав это. Давайте не будем скрывать, что нам нужно больше слов.»
Вместо того чтобы впихнуть всё в 5-7 слов, Stripe использует длинный заголовок-предложение. Это честнее и информативнее.
Практический совет: Если ваш продукт сложный, не пытайтесь упростить его до бессмысленности. Лучше честно объяснить, чем создать красивый, но пустой заголовок.Красота ради красоты приносит пользу
Кэти защищает «бесполезные» визуальные элементы:
«Красота ради красоты — прекрасная вещь. Она приносит радость, делает что-то более притягательным. Представьте эту страницу без неё — вы бы просто пролистнули.»
Визуализация данных на главной странице Stripe не показывает реальные данные — это визуальная метафора глобального масштаба. Но она:
- Останавливает взгляд
- Коммуницирует «мы работаем с глобальными вещами»
- Демонстрирует заботу о деталях
Поиск новой эстетики — вызов стерильному модернизму
Патрик Коллисон и Тайлер Коэн запустили гранты на поиск новых эстетик. Причина:
«Мы пришли к тому, что некоторые продукты ощущаются оторванными, стерильными, лишёнными человечности. Что оставил позади модернизм?»
Ссылка на видео The Cultural Tutor о фонарях в Лондоне — раньше они были произведениями искусства, сейчас — функциональные трубы. То же происходит в цифровом дизайне.
Практический совет: Используйте AI не только для ускорения, но и для добавления деталей, которые раньше были «дорогими». Интерактивные разделительные линии на stripe.com — пример «цифровых фонарей».ProtoDash — внутренний инструмент для быстрого прототипирования
Stripe создал внутренний инструмент для быстрого прототипирования:
«Дизайнеры, инженеры или продакт-менеджеры могут быстро набросать разные идеи — это выглядит как, ощущается как, работает как.»
Это меняет динамику:
- Нет больше «а что если бы…» — есть «вот ссылка, посмотри»
- Работа над концепцией перестала быть дорогой
- Можно сделать 30 прототипов вместо 3
ПРОТОТИПИРОВАНИЕ: ДО И ПОСЛЕ PROTOdash
──────────────────────────────────────────
ДО ПОСЛЕ
─── ─────
"А что если бы..." "Вот ссылка, посмотри"
│ │
▼ ▼
┌─────────┐ ┌─────────┐
│ Неделя │ │ 1 час │
│ на │ │ на │
│ презентацию│ │ прототип│
└────┬────┘ └────┬────┘
│ │
▼ ▼
┌─────────┐ ┌─────────┐
│ Презен- │ │ Рабочий │
│ тация │ │ прототип│
│ в PDF │ │ в браузере│
└─────────┘ └─────────┘
3 прототипа 30 прототипов
за спринт за спринт
«Без презентаций и питчей» — новая культура обсуждений
Кэти формулирует принцип:
«Пожалуйста, не делайте презентаций. Не презентуйте идеи. Не тратьте неделю на презентацию, чтобы поговорить о вещи. Давайте просто перейдём к работе.»
Вместо презентаций — прямое взаимодействие с прототипом. Это экономит время и даёт более честную обратную связь.
Практический совет: Перестаньте делать презентации для внутренних обсуждений. Показывайте работу в контексте, где пользователь будет её видеть.Поднять пол или поднять потолок
Ключевая мысль о влиянии AI:
«Эти инструменты поднимают пол — мы можем быстро создавать более-менее хорошие вещи. Но нам также нужно поднять потолок. Как наш вкус и способности могут пойти дальше?»
7/10 опыт становится бесплатным. Вопрос — кто будет делать 15/10?
ВЛИЯНИЕ AI НА КАЧЕСТВО ДИЗАЙНА
────────────────────────────────────
ДО AI ПОСЛЕ AI
─────── ───────
▲ ▲
│ 10/10 │ 15/10 ─── ПОТОЛОК (поднять!)
│ (редко) │ (возможно со вкусом)
│ ─────┼────────────────────────
│ 7/10 │ 7/10 ─── ПОЛ (бесплатно)
│ (обычно) │ (AI делает сам)
│ ─────┼────────────────────────
│ 3/10 │ 3/10
│ (часто) │ (редко)
▼ ▼
Много посредственности Экономия времени →
потратить на качество
Культура качества — сложные разговоры
Кэти описывает подход Stripe:
«Я лучше проведу этот тяжёлый разговор, чем позволю выпустить посредственность. В конце концов команда будет рада создавать то, чем гордится.»
Пример: Патрик Коллисон просил изменить рекламные щиты, которые уже висели. Это дорого и неловко — но это демонстрирует стандарты.
Практический совет: Если что-то недостаточно хорошо — скажите. Лучше тяжёлый разговор сейчас, чем посредственность навсегда.Найм — что искать в эпоху AI
Три ключевых качества:
- Любопытство — всегда было важно, но теперь особенно про AI
- Интерес к развитию AI — не «10 лет опыта с AI», а искренний интерес и экспериментирование
- Инициативность — способность делать, а не только предлагать
Практический совет: Ищите людей, которые вайбкодят на выходных, делают пет-проекты, экспериментируют. Не обязательно в работе — но где-то.«Вам нужны такие люди — они не знают, куда мы идём, не знают ответа, но знают, что он где-то там, и хотят встать и пойти.»
Инициатива снизу
Примеры:
- ProtoDash — создал один дизайнер (Оуэн), увидев проблему
- Стратегия платформ — контент-дизайнер Крис увидел, что платформы вроде Shopify имеют другие нужды
Практический совет: Создайте условия, где люди могут «поднимать мусор» — видеть проблемы и решать их без бюрократии.«Хорошие идеи могут прийти отовсюду. Видишь мусор на полу — поднимаешь и думаешь, как сделать эту проблему лучше в долгосрочной перспективе.»
Выводы
Stripe показывает, как строить дизайн-практику, которая не тонет в эффективности. AI поднимает базовый уровень — но потолок по-прежнему зависит от вкуса, стандартов и готовности делать «цифровые фонари».
Вопрос не в том, как работать быстрее. Вопрос в том, на что вы потратите сэкономленное время.
Ссылки
- Stripe — официальный сайт