Customer Data Platform (CDP) - это система, которая объединяет данные с сайта, из приложений, CRM и офлайн-касс в единый профиль клиента. Она дает маркетологу полную видимость базы и позволяет отправлять персональные предложения и программы лояльности точно в срок, не дожидаясь выгрузок от IT по несколько дней. Система берет на себя рутину: анализирует поведение и автоматически масштабирует успешные сценарии на всю базу, освобождая команду для поиска идей. На выходе - запуск кампаний за часы вместо недель, рост конверсии и резкое снижение оттока.
Граница ответственности. Ядро обработки данных (потоки данных, дедупликация и склейка профилей, ML-модели для AI-помощника, база данных) - это отдельное инженерное направление. Моя область задач как Senior Product Designer: проектирование интерфейса управления (Профиль 360°, Конструктор сегментов, Управление сценариями, AI-помощник), единая дизайн-система на 12 модулей и инженерная связка Figma Code Connect + MCP + Storybook. Дизайн-система как инструмент, на котором собран интерфейс поверх данных.
Собрать 10+ млн записей из 8 источников в один 360°-профиль с Identity Resolution и связкой устройств.
Убрать зависимость от IT: сегменты, кампании и отчёты должны собираться руками маркетолога, без SQL.
Архитектура, которая вытянет 10+ модулей без ощущения «лоскутного одеяла» и даст место новым модулям через год.
Не чат «для галочки», а работающий инструмент: семантическая навигация, дашборды на лету и прикладные инсайты с объяснением.
Основной пользователь. Собирает сегменты, настраивает триггерные flow коммуникаций, запускает кампании через Email, SMS, Push, мессенджеры. Живёт в Segmentation Builder и Journey Builder. Главный KPI, скорость от гипотезы до рассылки.
Смотрит воронки, запускает A/B-тесты, анализирует поведение. Нужна аналитика, которая не требует SQL, и возможность нарезать данные по сегментам без помощи аналитика.
Копает глубже: LTV, эффективность каналов, атрибуция. Живёт в Customer Profile и аналитике. Готов писать SQL, но хочет, чтобы рутина уходила в интерфейс.
Строит бонусные механики, реактивирует «спящих». Нужны предиктивные модели и понятный триггерный конструктор.
«Чтобы запустить рассылку по сегменту „купили зимой, не купили весной, живут в городах-миллионниках“, я пишу заявку в IT, жду два-три дня и получаю Excel, который уже устарел. К моменту отправки треть аудитории уже купила сама.»
Маркетологу нужен не SQL, а визуальный конструктор сегментов с мгновенным preview размера сегмента.
Segmentation Builder с drag-and-drop и живым счётчиком «в сегменте сейчас 147 382 клиента»Без Identity Resolution коммуникация на разных устройствах невозможна в принципе.
Отдельный модуль Customer Profile 360° с явной связкой устройств и оценкой достоверности 98.7%«Откуда взялось, почему именно это?», главный вопрос к автоматическим отчётам.
XAI-слой в AI Assistant: каждый виджет показывает, какие поля, фильтры и SQL-запрос легли в основуСегмент по 10 млн пересчитывать в реальном времени, дорого и ненужно.
Индикатор «Обновлено» рядом с каждым большим отчётом + разделение на «горячие» (потоковые) и «холодные» (15-мин окна) данныеСайт, мобильное приложение, CRM, offline-касса, email, events, data streams, 8 источников
Identity Resolution, унификация, сегментация, аналитика и прогнозные модели
Кампании, лояльность, Google Ads, Meta, Email, SMS, Push, Web Personalization
Главная, Кампании, Задачи, Проекты, Аналитика, Настройки
Отчёты по роли, семантическая навигация, прикладные инсайты, XAI
Глобальный поиск через Cmd+K и быстрые действия для быстрого создания объектов из любого места платформы.
Быстрый доступ к крупным доменам платформы. Внутри каждого домена, поддомены второго уровня. Переключение между разделами в один клик.
Каждый модуль имеет свой sub-navigation, закреплённый слева. Breadcrumb наверху.
Tabs внутри карточки: обзор, события, атрибуты, связи, история.
Разбор 8 источников данных, карта стыков, схема профильных атрибутов. Результат, словарь данных с едиными названиями полей (Revenue, не Income; CustomerID, не User_id).
Три уровня навигации. Стандартизация паттернов: 4 типа страниц, реестр, конструктор, карточка, дашборд. Дальше весь продукт собирался из этих четырёх.
Собрал карточку клиента с Timeline событий, связкой ID между устройствами и расчётными показателями (LTV, вероятность оттока). Это стал эталон: все остальные карточки платформы сверялись с ним.
Конструктор правил с drag-and-drop, глубиной вложенности до 4 уровней И/ИЛИ/НЕ. Живой счётчик размера сегмента, один из самых сложных UX-вопросов проекта.
Визуальный редактор цепочек с триггерами, ожиданиями и условиями. Каналы: Email, SMS, Push, WhatsApp. Проектировал на той же grid-логике, что и сегменты, чтобы маркетолог не переучивался.
| Этап | Цель пользователя | Ключевые действия / экраны | Эмоции / боли | Реакция системы | Метрики |
|---|---|---|---|---|---|
| 1. Гипотеза | Сформулировать идею кампании на основе бизнес-задачи или сигнала от AI. |
|
«Вижу падение, не понимаю причину». Страх пропустить возможность. | AI показывает аномалию и предлагает действие. XAI раскрывает, откуда взялась цифра. | Время от сигнала до гипотезы, доля гипотез из AI-подсказок. |
| 2. Сегмент | Собрать аудиторию кампании без обращения в IT. |
|
Раньше ждал 3 дня и получал устаревший Excel. | Сегмент собирается за 2 минуты. Переключение Standard / Expert, SQL-редактор для аналитика. | Время на сегмент: 3 дня / 2 мин, доля self-service сегментов. |
| 3. Flow коммуникаций | Настроить триггеры, каналы и ожидания в Journey Builder. |
|
Переключение между модулями, разные UI у каналов. | Та же сетка, что и у сегментов, маркетолог не переучивается. Встроенная валидация каждого узла. | Время на flow коммуникаций, доля flow коммуникаций с ветвлением, ошибки валидации. |
| 4. Запуск | Запустить кампанию и увидеть первые результаты в реальном времени. |
|
Страх ошибиться на 10 млн. Неясно, что происходит после кнопки «Запустить». | Тестовый прогон и preview снимают тревогу. Статистика вхождения обновляется в реальном времени возле каждого узла. | Доля кампаний с тестовым прогоном, доставляемость, время от запуска до первого сигнала. |
| 5. Отчёт | Понять, сработала ли кампания, и принять решение о следующей итерации. |
|
Недоверие к AI-цифрам, «откуда это взялось». | Explainable AI показывает логику расчёта. Рядом с виджетом, кнопка создания новой кампании из текущего сегмента. | Time-to-Market цикла: 3 дня → 15 мин, CR +22%, кампаний удержания 3 в неделю. |
Обсчитывать 10 млн профилей в потоке на каждое изменение, дорого и бессмысленно. Разделил данные на «горячие» (профиль обновляется мгновенно) и «холодные» (тяжёлая аналитика пересчитывается раз в 15-30 минут).
В UI, явный индикатор «Обновлено: 12 мин назад»Ограничил глубину вложенности фильтров в сегменте до 4 уровней. На пятом JOIN-запросы начинали падать по таймауту.
Интерфейс блокирует пятый уровень с сообщением «Разбейте условие на два сегмента»LLM не видит сырые данные, только метаданные (описание таблиц, связей, токенов). Генерирует SQL и Python, SQL выполняется в базе данных, Python считает статистику и графики, результат возвращается в виджет.
Исключает галлюцинации; пришлось вложиться в качество метаданныхAI Assistant отвечает на типовые «срез по сегменту» и «топ N кампаний». Multi-touch attribution, regression, сложные A/B-разборы, всё это идёт к команде аналитики через Tableau и dbt.
Платформа не магическая, она требует подключения источников через ETL-пайплайны (минимум: транзакции, web/app events, CRM). Маркетолог не может «просто запустить CDP», integration engineer нужен на старте.
AI отвечает только на аналитические вопросы и помогает собрать сегмент по описанию. Тексты email и push, баннеры, изображения, всё это другие инструменты (внешние LLM-сервисы, дизайнер маркетинга).
Прогнозные модели (LTV, churn-probability, propensity-scores), отдельный data-science-стрим. CDP отображает результат и позволяет на нём собирать сегменты, но не обучает модели сам.
Дизайн собирался сразу в двух языках. Английский, как контрольный для проверки длины строк и плотности интерфейса.
Перед сдачей в прод тех. писатель прогоняет оба языка: терминология CDP, тон, согласованность с глоссарием. Только после OK макет уходит в разработку.
Внешний языковой AI-сервис автоматически переводит strings из i18n-файлов на польский, испанский, турецкий, чешский, финский, немецкий и т.д. Глоссарий CDP подгружается в контекст модели.
Каждый язык проверяет нативный спикер (как правило сотрудник локальной страны-партнёра). Правки возвращаются в систему переводов и закрепляются в глоссарии для следующих итераций.
Первый прототип проводил маркетолога через жёсткий flow коммуникаций: цель, аудитория, канал, креатив, расписание. На демо смотрелось дидактично, на тестах опытные маркетологи прощёлкивали по два экрана клавишей Enter, не читая. Двое из трёх респондентов попросили «дайте всё на одной странице, я знаю, что хочу собрать». Переделал в одностраничный канвас с панелью свойств, пошаговый режим оставил как опциональный для новых пользователей.
Второй вариант, строить сегмент как Excel-формулу. Аналитики хвалили, маркетологи не понимали. Оставил drag-and-drop с двумя режимами: Standard (визуально) и Expert (SQL-редактор с подсветкой). Каждая роль получила свой инструмент в одном модуле.
Идея была красивая: маркетолог двигает ползунок возраста, число клиентов пересчитывается на лету. На тестах с реальным объёмом данных UI замирал на 3-7 секунд. Заменил на режим с задержкой: после 800 мс бездействия запрос уходит, показываем спиннер на счётчике. Ощущение живости сохранилось, БД выжила.
#050507 до #1A1A1D, белый primary-текст и индиго-акцент #6366F1. Все 8 семантических токенов прибиты к data-theme="dark", переключение темы меняет только их значения.#FFFFFF до #E4E4E7, тёмный primary-текст и более насыщенный индиго #4F46E5 с success #059669 и danger #DC2626, чтобы держать контраст на светлом фоне. Переключение темы, один атрибут data-theme="light".| Токен | Пример | Размер / LH |
|---|---|---|
| display-2xl | Поездки | 72 / 90 · 600 |
| display-xl | Поездки | 60 / 72 · 600 |
| display-lg | Заголовок H1 | 48 / 60 · 600 |
| display-md | Заголовок H2 | 36 / 44 · 600 |
| display-sm | Заголовок H3 | 30 / 38 · 600 |
| display-xs | Подзаголовок | 24 / 32 · 600 |
| text-xl | Лид-абзац | 20 / 30 · 400 |
| text-lg | Основной текст | 18 / 28 · 400 |
| text-md | Краснодар → Москва | 16 / 24 · 400 |
| text-sm | Подпись | 14 / 20 · 400 |
| text-xs | 20 января 2022 | 12 / 18 · 400 |
Токены устроены трёхуровнево: примитивы (blue-500, gray-200, spacing-16) → семантика (bg.surface-primary, text.error, chart.positive) → компонент (button.primary.bg, table.row-hover, card.active.border). Экраны ссылаются только на семантический слой. Это дало переключение за один день на тёмную тему для всех аналитических модулей, поменял значения семантики, экраны перерисовывать не пришлось.
Сырая палитра и константы: blue-500, gray-200, spacing-16. Не имеют смысла в UI, только определяют значение. Никогда не используются в компонентах напрямую.
Привязка примитива к функциональной роли: bg.surface-primary, text.error, border.interactive, chart.positive. Дизайнер выбирает смысл, а не hex.
Частные значения, собранные из семантики: button.primary.bg, table.row-hover, card.active.border. Разработчик подставляет их в код один раз и больше не трогает.
Семантический слой покрывает не только статусы, но все паттерны, где появляется цвет: заливки, границы, линии графиков, текст, иконки, шаги журней. Пять ключевых ролей работают как общий словарь между дизайном, кодом и бизнес-смыслом. Ниже, какие сущности и интерфейсные паттерны опираются на каждую роль.
Активные сегменты, положительные дельты, успешно запущенные кампании, корректная работа интеграций.
ПрименяетсяУстаревающие данные, приближающиеся пороги, состояния, требующие внимания до того, как они превратятся в ошибку.
ПрименяетсяПадение метрики, ошибка интеграции или расчёта, любое состояние, требующее немедленного действия от пользователя.
ПрименяетсяТекущий фокус пользователя, запущенная кампания, активное действие. Бренд-цвет работает как навигатор внимания, а не как декор.
ПрименяетсяЧерновики, архив, неактивные объекты, placeholder-состояния. Нейтральный цвет говорит «здесь ничего сейчас не происходит».
Применяетсяcolor.indigo.500 = #6366F1 color.neutral.950 = #050507 color.neutral.100 = #E4E4E7 space.4 = 16px radius.md = 10px duration.fast = 120ms
surface.base → neutral.950 surface.raised → neutral.900 text.primary → neutral.0 text.secondary → neutral.400 accent.brand → indigo.500 border.subtle → neutral.850
button.primary.bg → accent.brand button.primary.fg → text.primary card.bg → surface.raised card.radius → radius.lg input.focus.ring → accent.brand/18% cell.gap → space.3
Связка мастер-компонентов Figma и React-компонентов репозитория. Props, варианты и имена полей совпадают 1:1. Дизайнер видит соответствие, разработчик ходит в Figma по ссылке из IDE.
Model Context Protocol. AI-агенты и плагины читают структуру дизайна и код как единое дерево. Кастомный плагин сверяет props Figma-мастера и TypeScript-компонента, находит расхождения.
Живая документация. Каждый компонент имеет набор сторис: default, all states, edge cases. Дизайнер смотрит, как компонент выглядит в реальном окружении, без сборки приложения.
Design Review AI (проверка семантических токенов), Token Batch Manager (миграция токенов), Auto Layout 5.0 как правило. Убрали рутину из дизайн-процесса.
// tokens/semantic/dark.json { "surface": { "base": { "value": "{color.neutral.950}" }, "raised": { "value": "{color.neutral.900}" } }, "accent": { "brand": { "value": "{color.indigo.500}" } }, "radius": { "md": { "value": 10 } } }
/* generated, do not edit */ :root, [data-theme="dark"] { --surface-base: #050507; --surface-raised: #0b0b0c; --accent-brand: #6366f1; --radius-md: 10px; } [data-theme="light"] { --surface-base: #ffffff; --surface-raised: #f4f4f5; --accent-brand: #4f46e5; }
// components/Button/Button.tsx type ButtonProps = { variant: "primary" | "secondary" | "ghost"; size: "sm" | "md" | "lg"; icon?: IconName; children: ReactNode; }; export const Button = (p: ButtonProps) => ( <button className={cx("btn", `btn--${p.variant}`, `btn--${p.size}`)} > {p.icon && <Icon name={p.icon} />} {p.children} </button> );
// Button.figma.tsx import figma from "@figma/code-connect"; import { Button } from "./Button"; figma.connect(Button, "https://figma.com/.../Button", { props: { variant: figma.enum("Variant", { Primary: "primary", Secondary: "secondary", Ghost: "ghost", }), children: figma.textContent("Label"), }, example: (p) => <Button variant={p.variant}>{p.children}</Button>, });
Все экраны платформы ссылаются только на семантические токены. Изменение бренда, одна правка, 12 модулей обновляются автоматически.
Синхронизация трёх источников через Code Connect и MCP. Расхождение между Figma и кодом невозможно по определению.
Плотные отступы (8px базовая единица), табулярные цифры Inter для вертикального выравнивания метрик, скрытые действия по hover. Маркетолог видит сразу 50+ строк без прокрутки.
Мастер-компоненты «Cell» и «Widget» имеют систему слотов. Новый модуль = новое содержимое в знакомых контейнерах, а не новые компоненты.
Без заявки в IT, если убрать SQL и оставить понятные «правила».
Поля, SQL-запрос, время среза. Без этого аналитики не запускают кампанию без ручной перепроверки.
Реалистично сделать в один день, без отдельной темы для каждого экрана.
Вместо ~300 отдельных ячеек таблиц, при правильной системе слотов.
Если зарезервировать запас 1.4х на немецкий и финский.
Поля, операторы и значения в строках таблицы. Маркетологи путали колонки и не понимали как соединять условия AND/OR.
Большие блоки на канвасе. Понятнее, но неудобно на ноутбуке: тач-пад уставал тащить 8-10 блоков.
Pills «Поле / Оператор / Значение» в группах AND/OR. Финальный вариант, ушёл в продакшн.
Identity Resolution связывает email, телефон, device-id, cookie-id в одну сущность с оценкой достоверности. Там, где достоверность низкая, система просит подтверждение или сохраняет отдельные профили.
Инсайт из research: 2.4 профиля на человека в среднемDrag-and-drop условий, живой счётчик с задержкой, переключение Standard / Expert. Маркетолог видит размер аудитории до запуска, Data Analyst пишет SQL в том же окне.
Инсайт из research: 80% тикетов в IT, это выгрузкиТриггеры, ожидания, условия, каналы, всё на одной grid-поверхности с теми же правилами, что и сегменты. Маркетолог не переучивается между модулями.
Общая grid-логика для сегментов и цепочекКаждый автоматический отчёт открывается в режиме объяснения: какие поля, фильтры, SQL-запрос. AI говорит «в сегменте Premium падение на 15%, посчитано по полю purchase_count за 28 дней, SQL вот».
Инсайт из research: аналитики боятся AI-цифр без обоснованияРядом с каждым большим отчётом, «Обновлено 12 мин назад». Пользователь понимает, что видит не актуальные данные в реальном времени, и принимает решение сознательно.
Инсайт из компромисса реальное время vs стоимостьEnterprise-грид с виртуальным скроллом. В DOM живут 20-30 строк, остальные подгружаются «окнами». Скролл плавный, фильтры мгновенные, экспорт уходит в фоновую задачу.
Выбор технологии под реальный масштабРаньше я писал заявку в IT и ждал три дня. Сейчас я сам собираю сегмент за пять минут и вижу, сколько людей в нём прямо во время настройки. Перезапустил три возвращающие кампании за неделю, раньше такое было физически невозможно.
Дизайн-система (токены + мастер-компонент «Ячейка») дала дизайнерам и разработчикам общий словарь. Споры о реализации прекратились, Code Connect показывает соответствие компонента и кода.
AI-навигация и прогрессивное раскрытие информации позволили новым пользователям осваивать 10+ модулей без многонедельного обучения. Setup wizard и ролевой онбординг доводят маркетолога до первой рассылки за один рабочий день.
Модуль XAI (Explainable AI) снял страх перед автоматическими отчётами. Аналитики доверяют цифрам, потому что видят SQL и поля, которые за ними стоят.