Я продуктовый дизайнер с опытом 9+ лет. Проектирую B2B-сервисы, финтех и e-commerce: от интервью с пользователями до метрик после релиза. Живу в Санкт-Петербурге, работаю удалённо.
A/B-тестированиеАнализ метрикТепловые картыОнлайн-опросыАнализ веб-трафикаПроверка статистических гипотезАнализ обращений в поддержку
Экспертныечто улучшить
UX-аудитБенчмаркингСоставление и проверка гипотезКонкурентный анализДизайн-ревьюDiscovery
Опыт
9+ лет в дизайне цифровых продуктов
B2B-сервисыФинтехE-commerceWeb 3.0Дизайн-системы
RWB2025 — 2026
Рекламная платформа Russ и Wildberries
Кампании, бюджеты и рекламные поверхности по всей России. Внедрил дизайн-ревью и Discovery-подход, собрал библиотеку дизайн-системы для продуктовых команд.
Проектировал интерфейсы для веба, мобильных и настольных приложений, работал с командами разработки и анализировал фидбек пользователей по метрикам и картам Hotjar.
Есть сложная задача? Расскажите о ней
Предложу, с чего начать, и расскажу, чем смогу помочь.
CRM из нулевых, в которой кампания запускается за минуты
Как я перестроил продукт на новой дизайн-системе и спецификациях: фичи стали выходить быстрее и дешевле, а ручные операции с деньгами и креативами ушли из поддержки в интерфейс.
Роль
Ведущий продуктовый дизайнер
Команда
~50 человек, 3 команды, 2 дизайнера
Домен
AdTech + FinTech, B2B
Платформы
Web + мобильный адаптив
Результаты · 2025–2026
−40%
время создания кампании у менеджеров
−53%
ошибок при настройке кампании у внешних клиентов
−45%
технических обращений в поддержку
−35%
времени на распределение бюджетов
Группа Russ — крупнейший в России оператор наружной рекламы. Щиты, цифровые экраны и медиафасады в 150+ городах, аэропорты, вокзалы, метро, МЦК, МЦД и пункты выдачи Wildberries.
Russ Online — система, через которую проходят деньги и реклама всей этой инфраструктуры. Менеджеры и внешние клиенты заводят в ней кампании, загружают креативы, управляют бюджетами, выставляют счета и получают эфирные справки.
AdTechКампании на десятках тысяч поверхностей, модерация, programmatic и RTB
FinTechКошелёк, предоплата и постоплата, плательщики, счета, доверительное управление
МасштабДесятки тысяч экранов по всей стране и миллиарды выходов рекламы в месяц
Любая ошибка в интерфейсе здесь — это либо деньги, списанные не там, либо экран, на котором не вышла оплаченная реклама.
Отвечал за продукт от постановки задачи до релиза. Подчинялся руководителю цифровизации и руководителю отдела дизайна.
Стратегия и приоритеты. Вместе с продактами решал, что и в каком порядке делаем, оценивая стоимость внедрения каждой фичи
Дизайн-система. Выстроил систему Russ поверх Тайги и синхронизировал её с фронтендом
Спецификации. Состояния, крайние случаи, валидация и поведение компонентов для разработки и QA
Исследования. Интервью с менеджерами, разбор обращений в поддержку, наблюдение за работой в системе
Процесс. Дизайн-ревью, дизайн-демо для бизнеса, приёмка вёрстки
Продукт собирали в начале 2000-х, и за 20 лет он оброс костылями. Остановить его и переписать было нельзя: бизнес рос и приносил новые задачи.
Дизайн-системы почти нет. Макеты собирали поверх скриншотов, из старых компонентов вперемешку с сырыми новыми
Легаси диктует дизайн. Любое изменение могло задеть финансовую логику
Ручные операции через поддержку. Смена плательщика — до часа ожидания, повторная модерация креатива — несколько часов
Жёсткий запуск. Без всех креативов кампанию не запустить, для правки её нужно остановить
Дорогая разработка. Каждая фича делалась с нуля, вопросы всплывали уже в вёрстке
Гипотеза
Если перестраивать продукт раздел за разделом на общей дизайн-системе и со спецификациями, каждая следующая фича будет дешевле предыдущей, а ручные операции можно убрать без риска для финансовой логики.
Прежде чем чинить сценарии, команде нужен был общий язык. За год я выстроил дизайн-систему Russ поверх Тайги.
БрейкпоинтыЕдиная сетка от широких мониторов до телефона
Базовый лейаутОдна структура навигации и рабочей области для всех разделов
ТаблицыФильтры, поиск, массовые действия, экспорт, пустые состояния
КарточкиАльтернатива таблице для мобильных и обзорных экранов
Flow-результатыЭкраны успеха, ошибки и ожидания после финансовых действий
ТипографикаИ десятки компонентов с состояниями и правилами
С этого момента новая фича перестала быть «новым интерфейсом». Она собирается из уже сверстанных и протестированных блоков.
Кравцов Олег×
К
Кравцов Олег
● Активный
Сбросить токенОперацииСовместный доступ
Информация о пользователе⌃
Фамилия
Кравцов
Имя
Олег
Отчество
Андреевич
Email
o.kravtsov@sevveter.ru✉
Мобильный телефон
+7 (921) 482-17-36☎
Менеджер Russ
m.kotova@russ-media.ru
Должность
Руководитель отдела
Организация
ООО «Северный ветер»⌕
Регион базирования
Санкт-Петербург
Роль
Администратор
Комментарий
Внесите комментарии по пользователю
Адрес доставки корреспонденции⌃
Страна
Область/Район
Город
Улица
Почтовый индекс
Плательщики⌃
Действия ▾ | ✚Плательщики | Заявки | Архивные
ⓘ Информация
Закрыть
Кампании
Клиенты
Креативы
Финансы
Счета
Каталог
Отчёты
Новости
Пользователь
ОК
Активный
Кравцов Олег Андреевич
Администратор
Операции
Совместный доступ
Сбросить токен
ИнформацияПлательщикиПраваРекламодатели
Контакты
ФИО
Кравцов Олег Андреевич
Регион базирования
Санкт‑Петербург
E‑mail
o.kravtsov@sevveter.ru
Мобильный телефон
+7 (921) 482‑17‑36
Должность
Руководитель отдела
Организация
ООО «Северный ветер»
Роль
Администратор
Менеджер Russ
Мария Котова
Комментарий
Адрес доставки корреспонденции
Адрес
191025, Россия, Санкт‑Петербург, ул. Марата, 14, офис 305
БылоСтало
‹ ›
Карточка пользователя до и после: модалка из нулевых и страница, собранная из компонентов дизайн-системы. Потяните разделитель, чтобы сравнить.
Главная проверка для системы случилась, когда компания вышла за пределы наружной рекламы: аэропорты, вокзалы, метро, МЦК и МЦД.
Внутри мы звали эту задачу «зоопарк экранов»: десятки форматов поверхностей со своими правилами. Работа заняла 5 месяцев от исследования до релиза.
Новый сценарий создания кампании, который выдерживает наружку, транзит и будущие типы поверхностей
Новая логика добавления территорий размещения — обращений в поддержку стало меньше
Разделы «Клиенты» и «Отчёты»: менеджер видит цикл клиент → кампания → эфир → деньги
Без дизайн-системы транзит пришлось бы делать отдельным продуктом. С ней он стал расширением существующего.
Список кампаний до и после: статусы, тип кампании и расход бюджета читаются с первого взгляда. Потяните разделитель, чтобы сравнить.
Мастер создания кампании: концепт, который мы не выпустили
Транзит принёс десятки новых параметров: терминалы, направления рейсов, зоны, форматы экранов, дневные и ночные ставки. Старая форма создания кампании их не вмещала, и я спроектировал новый мастер — пошаговый сценарий с картой и живой статистикой.
Паттерны я искал у сервисов, где человек выбирает из тысяч объектов на карте и сразу видит, во что обойдётся выбор.
АвитоФильтры в боковой панели поверх карты: результат обновляется сразу, без перехода на другую страницу.Панель «Фильтры» на шаге выбора поверхностей
ЦианКарта и список работают вместе, а тысячи объектов собираются в кластеры с числом внутри.Карта с кластерами и синхронный список поверхностей
ДомкликКарточка в списке: фото, главные параметры и метки видны без открытия объекта.Карточка поверхности: фото, GID, зона, число экранов, часы работы
Ипотечные калькуляторыДомклик, Банки.ру, Циан, Дом.ру: итог пересчитывается справа на лету, рядом подсказано рекомендуемое значение.Панель статистики и рекомендуемая стоимость выхода
Из этих паттернов я собрал кликабельный прототип мастера из четырёх шагов: основные параметры, настройки размещения, выбор поверхностей на карте и бюджет.
Концепт мастера: четыре шага от основных параметров до ставок за выход. Карта, фильтры и статистика — из референсов выше. Данные в демо вымышленные.
Что показало тестирование
Прототип я проверил на респондентах из числа менеджеров и агентств.
Что сработало
Карта со списком. Респонденты быстро находили нужные поверхности и понимали, что уже выбрано. Панель фильтров узнавали сразу: паттерн знаком по сервисам недвижимости.
Что мешало
Длина пути. Четыре шага с десятками полей — долго для опытных менеджеров: им важно видеть все параметры сразу и загружать готовые списки GID. Новичкам мастер понятнее, но чтобы это подтвердить, нужно было дополнительное тестирование, а времени на него не было.
Почему не выпустили
Опытные менеджеры сейчас составляют 85% пользователей продукта, и решение делали для них. К тому же стоимость: карта с кластерами, фильтры, пересчёт статистики и ставки по каждому формату — несколько спринтов разработки, а транзит нужно было запускать сейчас.
Что выпустили
Мы выбрали вариант для опытных менеджеров: одна страница вместо четырёх шагов. Слева форма с общей информацией, стратегией, географией, территориями и бюджетом, справа карта со статистикой. Этот сценарий показан на обложке кейса.
Концепт4 шага
Основные параметры
Настройки размещения
Выбор поверхностей
Бюджет и ставки
Релиз1 страница
Форма и карта на одной странице
Концепт остался в запасе: карта, фильтры и ставки по форматам уже продуманы, и когда появится ресурс, их можно развивать, а не проектировать заново.
Как я веду задачу от идеи до второй версии — на примере калькулятора программатик-кампании.
С калькулятором клиент сам прикидывает объём и стоимость размещения на уличных экранах и в ПВЗ ещё до заявки: выбирает регион, тип конструкции, количество экранов, дни и часы показа — и сразу видит сумму.
Подготовка
Референсы
Локальные компоненты
Макеты
Десктоп
Телефон 375
Планшет 800
Все состояния
Заметки для разработки
Релиз
Версия 1.0 в проде
Интервью и опрос менеджеров
Доработка
Версия 2.0
Референсы
Начинаю с референсов. Здесь это ипотечные и кредитные калькуляторы банков и сервисов недвижимости: как они раскладывают параметры, дают быстрые значения рядом со слайдером и показывают итог, которым можно поделиться.
Доска референсов: калькуляторы Домклика, Сбера и банков, внизу первые наброски калькулятора Russ.
Макеты и заметки для разработки
По ходу работы собираю локальные компоненты — сетку часов показа, слайдеры с быстрыми значениями, карточку итога — и из них десктоп, телефон на 375 px и планшет на 800 px. На доске показываю все состояния: пустой расчёт, ошибки валидации, выпадающие списки, изменённую ставку, скопированную ссылку, PDF.
Десктоп: состояния и заметки для разработки
Телефон, 375 px
Планшет, 800 px
Доска версии 1.0 в Figma: каждый экран в нескольких состояниях, рядом жёлтые стикеры с логикой работы.
Логику работы и заметки для разработчиков пишу прямо на доске, в жёлтых стикерах. Это и есть спецификация: разработчик видит правило рядом с экраном, к которому оно относится.
Логика работы
При открытии страницы по ссылке сохранённые ставки сверяются с текущими минимальными: если сохранённые выше или равны минимальным — используются они, иначе подставляются актуальные минимальные, а в расчёте появляется комментарий об изменении.
Логика работы · Сделать новый
При создании нового расчёта открываем его на новой странице.
Логика работы · PDF
Ссылку на онлайн-версию расчёта в PDF нужно сделать кликабельной.
1.0 → фидбек → 2.0
Версию 1.0 выпустили в прод, после чего я провёл интервью и опрос менеджеров. Выводов было два:
Калькулятор лучше без скролла. Параметры и итог должны помещаться на один экран, чтобы было видно, как меняется сумма.
Итоги лучше карточками, как на дашборде. Длинный список цифр на странице результата и в PDF читался тяжело.
Так появилась версия 2.0: слайдеры стали компактнее, быстрые значения переехали в строку заголовка, сетка часов — в две строки, а итог собран из карточек с главной суммой отдельным блоком. То же — в PDF.
Рассчитайте стоимость программатик-кампании на уличных экранах и ПВЗ
Онлайн-версия расчёта: online.russoutdoor.ru/calcДанные актуальны на 22.09.2026
Расчёты в калькуляторе носят ознакомительный характер и не являются публичной офертой. Итоговые условия размещения определяются при создании кампании в личном кабинете и могут отличаться от результатов предварительных расчётов.
Онлайн-версия расчёта: online.russoutdoor.ru/calcДанные актуальны на 22.09.2026
Расчёты в калькуляторе носят ознакомительный характер и не являются публичной офертой. Итоговые условия размещения определяются при создании кампании в личном кабинете и могут отличаться от результатов предварительных расчётов.
1.02.0
‹ ›
PDF расчёта в той же логике: карточки и сумма отдельным блоком.
Доска версии 2.0: десктоп, телефон и PDF.
Правила, которые работают в каждой задаче
Спецификация к каждой фиче. Состояния, крайние случаи, валидация, тексты ошибок, правила расчётов
Дизайн-демо до разработки. Бизнес даёт обратную связь на макетах, а не на готовом коде
Рассылки перед релизом. Пользователи заранее знают, что поменяется
Ревью вёрстки. Расхождения с дизайн-системой ловим до прода
Результат: ниже стоимость изменений, меньше нагрузки на поддержку, предсказуемые релизы.
Финансовая часть — самая чувствительная. Ошибка дизайна здесь превращается в неверный счёт или спор с клиентом.
Смена плательщика в постоплате. Раньше менеджер писал в поддержку и ждал. Я убрал два средних шага: теперь замена делается в один клик, с проверками внутри интерфейса.
Запуск→Отчётный период→Обращение в поддержку→Ожидание замены→Счёт
Было до 1 часа через поддержку, стало мгновенно — самим менеджером.
Кошелёк клиента. Баланс, резервы под кампании, списания и задолженность в одном месте
Финансы и счета. Единая табличная архитектура с понятными статусами
Доверительное управление. Передача управления бюджетом и кампаниями другому лицу с разграничением прав
Онлайн-калькулятор. Клиент сам прикидывает стоимость кампании до заявки
191025, Россия, Санкт‑Петербург, ул. Марата, 14, офис 305
Поиск
ООО «Северный ветер»
ИНН: 7813456290 • КПП: 781301001781401001
Активный • Оферта принята • MSA контракт • Основной контракт
Баланс ⓘ
1 250 000,00 ₽
Пополнить
Бонусы ⓘ
150 000,00
НачислитьПодробнее
ИП Лебедев А. С.
ИНН: 781402637518 • КПП: —
Активный • Оферта не принята • Основной контракт
Принять оферту
Баланс ⓘ
86 400,00 ₽
Пополнить
Редактировать
Счета плательщика
Выставить счёт
Перенести в архив
Плательщик — ООО «Северный ветер»
Наименование
ООО «Северный ветер»
Полное наименование для документов
Общество с ограниченной ответственностью «Северный ветер»
ИНН
7813456290
КПП
781301001781401001
Загрузите документ, подтверждающий смену КПП
ОГРН
1177847123456
Загрузите файл или перетяните его сюда
PDF, JPG, PNG — до 30 МБ
Документ, подтверждающий смену КПП
Уведомление_о_смене_КПП.pdf
Загрузка… 64%1,8 Мб
Юридический адрес
191025, Санкт‑Петербург, ул. Марата, 14, офис 305
Фактический адрес
191025, Санкт‑Петербург, ул. Марата, 14, офис 305
Совпадает с юридическим
Почтовый адрес
Совпадает с юридическим
Банковские реквизитыОферты
Поиск
Операции
СЕВЕРО‑ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Санкт‑Петербург
БИК 044030653
Корр. счёт 30101810500000000653
ФИЛИАЛ «САНКТ‑ПЕТЕРБУРГСКИЙ» АО «АЛЬФА‑БАНК»
Санкт‑Петербург
БИК 044030786
Корр. счёт 30101810600000000786
ОтменаСохранить
Данные плательщика обновлены
Уведомление_о_смене_КПП.pdf
Смена КПП плательщика прямо в карточке пользователя: интерфейс сам просит подтверждающий документ, и данные сохраняются без обращения в поддержку.
Креативы — узкое горлышко запуска. Здесь менеджеры теряли больше всего времени, а клиенты — выходы рекламы.
Было
часы · повторная модерация
Стало
минуты
Сценарий
Было
Стало
Запуск кампании
Нужны все креативы
Достаточно одного согласованного
Правки креативов
Остановка кампании
Без остановки
Удаление поверхностей
Переход в другой раздел
Прямо в блоке креативов
Старый блок креативов жил в модалке кампании: общие требования сверху, ряд селектов и длинная прокрутка, где у каждой поверхности свой креатив, свои серые кнопки и статус, который легко не заметить. Креатив из прошлого цикла приходилось заново отправлять на модерацию.
ⓘ Важно знать: На некоторых поверхностях имеются ограничения по времени работы экрана.
Рекламодатель
✔Северный кофе
Статус кампании
Черновик
Начать вещание
Операции
Креативы
Технические требования▣ JPG, JPEG не более 5 МБ▶ MP4 не более 10 МБ
ⓘ Для согласования некоторых креативов нужно будет загрузить юридические документыПодробнее
Поиск по названию креатива и Public ID
Статус
Все
Регион
Выбрано 2
Территория
Выбрано 2
Вид креатива
Все
Вещание
По расписанию
Период
—
Выбрать всеВыбрано: 0Скачать список креативовСогласовать выбранныеУдалить выбранные
Москва. АэропортыЗагрузить ещё
◷ 15 сек ⤢ Ширина: 2400px Высота: 2400px
Загрузите файлы или перетяните их сюда
Требуемые форматы 1,17×2,8 • 1,4×2,6
Библиотека креативов
Первая неделя бесплатно
FitLab
ⓘ Недоступен для распространения на другие регионы
Черновик
Poster ID — 2026604 • Public ID — 66604
0,71 МБ • 15 сек • ролик_960×720.mp4
Загружен 22 октября 13:56 • 1 формат
Период вещания По расписанию кампании
Настроить период вещанияСогласовать
Обмен старой техники
ТехноДом
ⓘ Недоступен для распространения на другие регионы
Нужны документы
Poster ID — 2031187 • Public ID — 61187
0,71 МБ • 15 сек • ролик_960×720.mp4
Загружен 22 октября 13:56 • 10 форматов
Период вещания По расписанию кампании
Настроить период вещанияЗагрузить документы
iИнформацияСохранитьЗакрыть
БылоСтало
‹ ›
Слева старый блок, справа моя версия: требования и форматы у каждой группы поверхностей, статус и действия у каждого креатива, массовые действия и загрузка из библиотеки. Данные вымышленные.
Эту версию я проектировал с оглядкой на сроки: бизнесу нужно было закрыть потребность к конкретной дате. Поэтому я оставил каркас модалки кампании и переработал только блок креативов — так вышло быстрее и дешевле для разработки, а пользователи получили главное уже в первом релизе.
Ключевой элемент — библиотека креативов. Материал из прошлого цикла подключается к новой кампании и сразу получает статус «Согласован», без повторной модерации. Именно так путь креатива из цикла сократился с часов до минут.
ⓘ Важно знать: На некоторых поверхностях имеются ограничения по времени работы экрана.
Рекламодатель
✔Северный кофе
Статус кампании
Черновик
Начать вещание
Операции
Креативы
Технические требования▣ JPG, JPEG не более 5 МБ▶ MP4 не более 10 МБ
ⓘ Для согласования некоторых креативов нужно будет загрузить юридические документыПодробнее
Поиск по названию креатива и Public ID
Статус
Все
Регион
Выбрано 2
Территория
Выбрано 2
Вид креатива
Все
Вещание
По расписанию
Период
—
Выбрать всеВыбрано: 0Скачать список креативовСогласовать выбранныеУдалить выбранные
Москва. АэропортыЗагрузить ещё
◷ 15 сек ⤢ Ширина: 2400px Высота: 2400px
Загрузите файлы или перетяните их сюда
Требуемые форматы 1,17×2,8 • 1,4×2,6
Библиотека креативов
Осенний раф уже в меню
Северный кофе
ⓘ Недоступен для распространения на другие регионы
СогласованИз цикла, без модерации
Poster ID — 3187402 • Public ID — 67402
0,71 МБ • 15 сек • ролик_960×720.mp4
Загружен 22 октября 13:56 • 1 формат
Период вещания По расписанию кампании
Настроить период вещанияПоказать статистику
Первая неделя бесплатно
FitLab
ⓘ Недоступен для распространения на другие регионы
Черновик
Poster ID — 2026604 • Public ID — 66604
0,71 МБ • 15 сек • ролик_960×720.mp4
Загружен 22 октября 13:56 • 1 формат
Период вещания По расписанию кампании
Настроить период вещанияСогласовать
Обмен старой техники
ТехноДом
ⓘ Недоступен для распространения на другие регионы
Нужны документы
Poster ID — 2031187 • Public ID — 61187
0,71 МБ • 15 сек • ролик_960×720.mp4
Загружен 22 октября 13:56 • 10 форматов
Период вещания По расписанию кампании
Настроить период вещанияЗагрузить документы
iИнформацияСохранитьЗакрыть
Библиотека креативов
Поиск по названию креатива и ID постера
Выбрать всеВыбрано: 01
3187402
Осенний раф уже в меню
Северный кофе
СогласованiСогласован из цикла, минуя модерацию
0,71 МБ • 960×720 • 15 сек • ролик_960×720.mp4
22 октября 13:56
Poster ID — 3187402 • Public ID — 67402
Автор — Мария Петрова • Заказчик — Северный кофе
2026604
Первая неделя бесплатно
FitLab
Согласованi
0,71 МБ • 960×720 • 15 сек • ролик_960×720.mp4
22 октября 13:56
Poster ID — 2026604 • Public ID — 66604
Автор — Мария Петрова • Заказчик — Северный кофе
2031187
Обмен старой техники
ТехноДом
Согласованi
0,71 МБ • 960×720 • 15 сек • ролик_960×720.mp4
22 октября 13:56
Poster ID — 2031187 • Public ID — 61187
Автор — Мария Петрова • Заказчик — Северный кофе
ЗакрытьПрименить
Креатив добавлен и уже согласован
Креатив из библиотеки подключается к кампании за пару кликов и приходит уже согласованным.
Второй этап — подключение нестандартных конструкций к RTB, автоматическому аукциону, где показы покупаются в реальном времени. Под это упростили массовое управление креативами, доработали поиск, фильтры и экспорт, автоматизировали синхронизацию поверхностей, и ручных операций стало меньше.
Куда мы пришли
Дальше раздел развивали командой: у креативов появилась отдельная страница в меню с фильтрами по типу сделки, длительности и типу файла, а карточка показывает все параметры сразу. Статусы, библиотека и логика согласования из моей версии остались в основе.
Кампании
Клиенты
Креативы
Финансы
Счета
Каталог
Пользователи
Отчёты
Новости
Креативы
Фильтры
Дата загрузки
Тип конструкции
Статус
Регион
Заказчик
Тип сделки
ГибкаяГарантированнаяАлгоритмический охват
Длительность ролика
5 сек10 сек15 сек
Тип файла
ИзображениеВидео
ПоискСортировка
3187402Согласован
Осенний раф уже в меню
Северный кофе
Регион
Москва
Дата загрузки
14 января 12:57
Размер файла
2,4 MB
Тип конструкции
Цифровой щит 6×3
Poster ID
3187402
Рекламодатель
Северный кофе
Ширина и высота
1440 × 720 px
Public ID
67402
Автор
Мария Петрова
2026604Согласован
Первая неделя бесплатно
FitLab
Регион
Москва
Дата загрузки
14 января 12:57
Размер файла
2,4 MB
Тип конструкции
Аэропорты Digital
Poster ID
2026604
Рекламодатель
FitLab
Ширина и высота
1080 × 1920 px
Public ID
66604
Автор
Карина Овсянник
Актуальная версия раздела «Креативы», к которой мы пришли командой.
Благодаря брейкпоинтам и карточкам адаптив не потребовал отдельного проекта.
Главная сложность — таблицы. На десктопе у кампании девять колонок, и на узком экране такая таблица либо уезжает в горизонтальный скролл, либо становится нечитаемой. Я адаптировал таблицы под карточки: строка превращается в карточку, где у каждого значения есть подпись.
ID и статус — в шапку. По ним менеджер находит нужную запись в списке.
Бюджет и число сторон — вниз, крупно. Это итог, ради которого карточку открывают.
Остальные поля — пары «подпись — значение». На планшете в две колонки, на телефоне в одну.
Детали креатива — во вкладку «Информация». Список кампаний остаётся под рукой, а параметры файла не мешают.
Креатив 3187402
Осенний раф уже в меню
Северный кофе
raf_1080_1920_20261014.jpeg
Регион
Москва
Тип конструкции
Вокзалы Digital
Ширина и высота
1080 × 1920 px
Тип файла
Изображение
Дата загрузки
14 января 12:57
Poster ID
3187402
Public ID
67402
Автор
Мария Петрова
Размер файла
2,4 MB
Заказчик
Медиагруппа «Вектор»
Рекламодатель
Северный кофе
Длительность
10 секунд
Отклонён
ⓘ
Причина отклонения ТТ — разрешение (размер ролика в пикселях)
Список кампаний
Поиск
IDРекламодательСтатусТип сделкиБюджет без НДСНачалоКонецСозданоСогласовано
Единая точка управления безопасностью для DevOps-инженеров
B2BКибербезопасностьWeb + Mobile
Система защиты контейнерных сред
Единая точка управления безопасностью для DevOps-инженеров
Спроектировал с нуля отечественную систему защиты контейнерных сред. Фичи рождались не из ТЗ, а из задач инженеров: от интервью до 250+ экранов.
Роль
Ведущий продуктовый дизайнер
Команда
~18 человек, Scrum, спринты по 2 недели
Домен
B2B, информационная безопасность
Платформы
Web + мобильная адаптация
Результаты
−25%
время обработки уязвимостей и рисков
+18%
завершённость сценария: пошаговая настройка политик против единой формы
250+
экранов, из них 120+ страниц десктопа с мобильной адаптацией
40+
сценариев с ролевыми доступами и связанными сущностями
«Купол. Контейнеры» защищает всё, из чего состоит контейнерная платформа: образы, реестры, оркестраторы, контейнеры и ОС хоста — на всём цикле разработки ПО.
Раньше такие решения делали в основном иностранные вендоры. Компании получали регуляторные риски (ФСТЭК, CIS), непрозрачность и невозможность что-то настроить под себя. Цель бизнеса — заменить зарубежные решения и дать инженерам одно место для контроля уязвимостей, политик и конфигураций.
DevOps-инженерВедёт несколько кластеров и проектов, ценит скорость и надёжность
Смежные ролиSecOps, аналитик, архитектор
СтандартыФСТЭК и CIS Benchmark прямо в интерфейсе
10 разделов продуктаот мониторинга до администрирования
01ДашбордыСводка по рискам в настраиваемых виджетах
02Карта сетиКластеры, узлы, контейнеры и связи между ними
03УязвимостиНайденные уязвимости в образах и контейнерах, с критичностью и ответственными
04КомплаенсПроверки на соответствие ФСТЭК и CIS Benchmark
05АудитЖурнал событий и действий пользователей
06Принятые рискиУязвимости, которые команда осознанно оставила, с обоснованием и сроком
07ПолитикиПравила безопасности: глобальные и локальные
08НастройкиПодключение кластеров, реестров и интеграций
09АдминистраторПользователи, роли и доступы
10База знанийСправка по проверкам и работе с продуктом
Я был ведущим дизайнером продукта. Моя задача была не рисовать интерфейс по ТЗ, а сформировать структуру будущих фич через логику пользователя.
Исследования. Проблемные интервью с DevOps, JTBD, бенчмаркинг, A/B-тесты, проверка гипотез
Архитектура. Информационная архитектура продукта, юзкейсы, CJM и флоу
Команда. Работал в связке с PO, аналитиками, фронтенд- и бэкенд-разработчиками, QA, DevOps и архитектором. Каждое утро синхронизировались на дейликах, задачи вели в Jira, требования и спецификации — в Confluence.
Дизайн-система. Работал на большой системе со спецификациями; мои локальные компоненты потом вошли в неё
Цена ошибки. Нельзя дать пользователю случайно отключить политику безопасности
Гипотеза
Если выводить фичи из реальных задач инженеров, а не из списка требований, продукт получит понятную и приоритезированную структуру, и инженеры быстрее примут ещё один инструмент.
На старте были только предварительные требования бизнеса и гипотезы команды. Структуру продукта я собрал из поведения пользователей.
Глубинные интервью с DevOps. Как сейчас работают с безопасностью, где сложно, что фрустрирует
Job stories. Задачи, которые инженер решает в своём процессе
Декомпозиция в фичи и сценарии. Каждая фича отвечает на конкретную job story
CJM и флоу. Согласование с командой и итерации: алерты, политики, роли, уведомления, фильтры, дашборды
«Когда я замечаю критическую уязвимость, я хочу быстро понять, где она, и назначить ответственного, чтобы снизить риск для продакшена»
Job story в интерфейсе: из списка уязвимостей инженер открывает карточку — уровень опасности, принятые риски, затронутые образы и факторы риска — и переходит к подробному описанию из БДУ ФСТЭК и NVD.
Разобрал зарубежные CI/CD- и Kubernetes-инструменты, к которым инженеры уже привыкли: навигацию, подачу данных, алерты, настройку политик.
Инженеры ждут, что продукт будет работать как привычные зарубежные сервисы
Часть терминов лучше оставить на английском — перевод только мешает
Зарубежные решения перегружены терминологией и прячут важное в глубоких меню
Решение: взял паттерны, к которым привыкли инженеры, но упростил язык и навигацию. Так снизился порог входа и сократился онбординг.
Мои пометки на интерфейсах конкурентов: зелёным — что забрал, красным — чего избегал.
Snyk Container
Sysdig Secure
Aqua Security
Карта сети: топология кластера по пространствам имён, клик по поду открывает его детали — статус, ноду, контейнеры и порты. Термины Kubernetes оставлены на английском.
Комплаенс: стандарты CIS, лучшие практики Docker, PCI DSS и NIST во вкладках — как в привычных инженерам зарубежных инструментах.
На интерактивных прототипах прогонял ключевые сценарии: настройку политик, назначение ролей, реакцию на угрозы.
Люди не понимали последствий удаления и редактирования политик — добавил подтверждения и статусы
Назначение ролей было непрозрачным — добавил карточки ролей и превью доступов
Лишние шаги и сложные формулировки — переработал последовательность и упростил терминологию
В A/B-тесте сравнил два способа настроить политику безопасности:
Единая форма
базовый уровень
Пошаговая
+18% завершённость
Сетевые политики: из списка — в конструктор, где правила собираются полями и селекторами, и одним переходом — в редактор кода для тех, кому привычнее YAML. Валидация показывает ошибку до применения.
Администратор: роль открывается карточкой с превью доступов — видно, к каким разделам у роли есть доступ, ещё до сохранения.
Гипотезы: по одной, с проверкой
Каждую доработку я оформлял гипотезой: проблема, вариант реализации, макет «сейчас / гипотеза», прототип и ссылки на исследования. Гипотезы вели в общей базе со статусами, так команда видела, что уже проверено, а что в работе.
При принятии риска инженер выбирает десятки образов, и найти нужный в длинном списке трудно. Гипотеза: добавить поиск в блок «Выбранные образы» и в окно выбора.
Слева текущий вариант, справа гипотеза с поиском. Данные образов скрыты.
Таблицы универсальны, но для анализа больших объёмов нужен компактный вид, а на небольших экранах — меньше прокрутки. Гипотеза: переключатель плотности «Компактный / Стандартный» в меню «Ещё» над таблицей.
СейчасГипотеза
‹ ›
Потяните ползунок: стандартная и компактная плотность строк.
В широких таблицах при горизонтальном скролле терялось, к какой строке относятся данные. Гипотеза: закрепить чекбоксы и первый столбец.
При горизонтальном скролле чекбоксы и столбец «Репозиторий» остаются на месте, остальные столбцы уезжают.
У разных ролей разные приоритеты в одной и той же таблице. Гипотеза: окно «Настройка столбцов» — скрыть лишние и перетащить нужные ближе к началу.
СейчасГипотеза
‹ ›
Потяните ползунок: таблица и окно настройки столбцов.
Результаты сканирования, импорта и экспорта приходят асинхронно, и пользователь их пропускал. Гипотеза: центр уведомлений в шапке с новыми и прочитанными.
СейчасГипотеза
‹ ›
Потяните ползунок: колокольчик и панель уведомлений.
При навигации с клавиатуры было не видно, какая кнопка активна. Гипотеза: заметное состояние фокуса для основных и второстепенных кнопок.
Tab ⇥переключение фокуса
Фокус переходит по кнопкам с клавиатуры: вокруг активной кнопки появляется заметная обводка.
Инженерам передавали промежуточные версии прототипов и экранов, а потом разбирали, где они спотыкаются.
Путали глобальные и локальные политики — развёл их визуально и вынес в табы
Хотели гибкий дашборд — добавил настройку виджетов, пресеты и собственные страницы
Часть сценариев была избыточной — упростил логику и убрал шаги
Дашборды после обратной связи: вкладки для разных наборов, панель «Изменить дашборд» с поиском и включением виджетов по группам.
Принятые риски: действующие и архивные, новое принятие — в боковой панели с обоснованием, сроком и выбором образов.
Продукт стал одним из первых полноценных отечественных решений в своей категории.
Что изменилось
Как добились
Эффект
Обработка уязвимостей
Новая логика алертов и навигации
−25% времени
Настройка политик
Пошаговый сценарий по итогам A/B
+18% завершённость
Ошибки в политиках и ролях
Подтверждения, валидация, статусы, превью
Меньше ошибок конфигурации
Поддержка
Подсказки и понятные флоу
Реже вопросы про доступы и политики
Миграция с зарубежных решений
Знакомая структура, адаптированные термины
Комфортный переход для команд
На пилоте пользователи говорили, что «работать стало проще и спокойнее».
Мобильная версия
Я спроектировал и мобильную адаптацию: 120+ страниц десктопа адаптированы под телефон. Навигация переехала в нижний таб-бар с кнопкой «Ещё», таблицы стали скроллиться по горизонтали с закреплённым первым столбцом, боковые панели — полноэкранными.
Политики Kyverno
Отчёты Kyverno
Редактор политики
Создать дашборд
Пустой дашборд
Ошибка 404
Экраны мобильной версии, 375 px. Нажмите, чтобы рассмотреть целиком.
Дашборды
Карта сети
Уязвимости
Карточка уязвимости
Комплаенс
Политики
Детали пода
Описание уязвимости
Часть из 250+ экранов продукта. Нажмите, чтобы рассмотреть. Данные в макетах тестовые.
JTBD — это не методика ради методики. Он дал продукту приоритеты: что делать, зачем и как этим будут пользоваться
В безопасности упрощать нужно осторожно. Удобство не должно открывать дорогу опасному действию
Привычное важнее нового. Знакомые паттерны снимают страх перехода на отечественный продукт
Касса самообслуживания, понятная с первого касания
Редизайн КСО для крупнейшей продуктовой сети Узбекистана. Флоу собран с нуля с учётом местных особенностей: два терминала оплаты и кешбэк 1% по QR-коду.
Роль
Продуктовый дизайнер, полный цикл
Команда
Арт-директор, PM, команда клиента
Домен
Ритейл, платежи
Платформа
Сенсорный киоск
Проект в цифрах
8
касс самообслуживания изучил в поле за один день
2
платёжных терминала в одном сценарии оплаты
1%
кешбэк по QR-коду, встроенный во флоу
60+
экранов за 140 часов работы
Клиент пришёл с устаревшей КСО: неудачный дизайн и запутанный опыт мешали людям быстро оплатить покупки.
Задача была не обновить визуал, а сделать кассу удобной и быстрой для всех. Главная местная особенность — два терминала оплаты на одной кассе. В российских КСО такого нет.
Касса до редизайна: стартовый экран, выбор товара без штрихкода — сетка одинаковых зелёных плиток без фото и цен — и корзина.
Работал в дизайн-студии с арт-директором и проджект-менеджером и отвечал за весь цикл.
Встречи с клиентом дважды в неделю. Разработчики, владелец продукта, бизнес. Презентовал решения, уточнял цели и требования
Защита решений. Показывал job stories и объяснял, как они ложатся в пользовательские пути
Погружение в контекст. Технические ограничения, локальные и культурные особенности, реальные сценарии
Основная аудитория — люди до 40 лет, привычные к цифровым сервисам. Но касса должна быть удобной и пожилым.
Запутанная структура старого интерфейса
Непонятная оплата, особенно с картой лояльности и QR-кодом
Мало подсказок и визуальной поддержки на каждом шаге
Штрихкод вводится вручную, без фото товара и поиска по категориям
Непонятно, сколько баллов начислится и что делать при ошибке
2 терминалаДля разных видов банковских карт
Много способов оплатыКарта, QR, бонусы
Без весовКонтроль через видеонаблюдение и персонал
Гипотеза
Если спроектировать флоу с нуля на основе реального поведения людей у касс и дать подсказку на каждом шаге, покупатели будут реже звать сотрудника и быстрее проходить оплату.
Чтобы не гадать, как должна работать идеальная КСО, я пошёл смотреть на живых людей у касс.
За день посетил 8 точек: Перекрёсток, Пятёрочка, Лента, О'Кей, Леруа Мерлен, Бургер Кинг, KFC и «Вкусно — и точка». Наблюдал, где люди тормозят и какие экраны вызывают затруднения. Всё сфотографировал, записал и перенёс в Figma.
Леруа МерленВвод кода вручную без фото товара
ПятёрочкаВесы и товар без штрихкода прямо на старте
ПерекрёстокПомощь ассистента: как пользоваться кассой
ПерекрёстокОплата улыбкой
Бургер КингВыбор языка меню в отдельном окне
Вкусно — и точкаБаллы по QR и языки прямо на старте
Фото из полевого исследования: снимал кассы и то, как ими пользуются люди.
Бенчмаркинг по каждой сети: путь покупателя по экранам, зелёные точки — удачные решения, красные — проблемы. Нажмите на доску, чтобы открыть крупно.
Параллельно разобрал текущий флоу клиента, который уже тестировали в нескольких магазинах. Вместе с заказчиком решили не латать старое, а спроектировать флоу заново.
Текущий флоу клиента: красными точками отметил места, где покупатель терялся или делал лишнее действие.
Наблюдения разделил на удачные решения и повторяющиеся ошибки, чтобы не наступать на чужие грабли.
УдачноПомощь прямо на кассеКнопка помощи и пошаговое объяснение на старте. Важно для пожилых и тех, кто впервые на КСО.
УдачноОплата улыбкойБиометрия снимает лишние шаги и ускоряет оплату.
ОшибкаТри QR-кода на одном экранеНепонятно, какой код за что отвечает. Люди растеряны и ошибаются.
ОшибкаШтрихкод без фото и ценыКод вводится вручную, а человек не видит, что добавляет в корзину.
Банк решений целиком: зелёные точки — практики, которые стоит взять, красные — ошибки, которые нельзя повторять.
Из интервью с бизнесом и болей покупателей собрал job stories, а из них — набор UX-гипотез. На них опирался каждый экран.
Выбор языка→Штрихкод или поиск без него→Корзина и пакет→Карта лояльности и баллы→Оплата: терминал или QR→Чек и кешбэк
Товар без штрихкода ищется по категориям и названию. Если что-то пошло не так, в шапке всегда есть «Инструкция» и «Вызов сотрудника».
Из интервью с бизнесом и болей покупателей собрал job stories. К каждой — гипотеза, как изменить опыт, и метрика, на которую она влияет.
Job stories и гипотезы в Notion. Нажмите, чтобы открыть крупно.
Собрал карту всех экранов и переходов, чтобы у каждого сценария был понятный вход и выход.
Карта экранов КСО. Нажмите, чтобы открыть крупно.
Самый запутанный сценарий — карта лояльности. Разобрал, как её применяют на кассе и в мобильном приложении, и свёл в один путь.
Применение физической карты и карты из приложения. Нажмите, чтобы открыть крупно.
По карте собрал вайрфреймы ключевых сценариев и связал их в прототип.
Вайрфреймы сценария «Товар без штрихкода» и соседних экранов. Нажмите, чтобы открыть крупно.
Собрал интерактивный прототип и проверил сценарии ещё до финального дизайна.
Люди из целевой аудитории проходили оплату, применяли карту лояльности, отменяли товар и звали помощь. Я смотрел, где они спотыкаются. По итогам перестроил блоки, упростил навигацию, уточнил формулировки и добавил подсказки.
Прототип для тестов: выбор товара без штрихкода, корзина и поиск по коду. На этих экранах люди проходили сценарии.
Концепцию строил на брендбуке сети, чтобы касса стала частью экосистемы бренда.
Подобрал размеры элементов и шрифтов под быстрое восприятие
Выделил ключевые действия цветом и визуальными маркерами
Учёл тех, кто пользуется КСО впервые
Проработал все состояния, включая ошибки и нестандартные сценарии
Подготовил UI-кит и спецификации, провёл ревью с разработкой и проконтролировал внедрение
БылоСталоБылоСтало
→
→
Стартовый экран
Товары без штрихкода
Слева старая касса, справа новая. На старте одно главное действие и два запасных пути, а товар без штрихкода ищется по фото, категориям и названию.
Покупка на КСО
01
Сканирование
Главный экран сразу подсказывает первое действие
02
Корзина
Фото, количество и цена по каждой позиции
03
Пакет
Предложение пакета перед оплатой, а не после
04
Карта лояльности
Напоминание до оплаты, чтобы не потерять бонусы
05
Способ оплаты
Карта или онлайн, затем платёжная система
06
Нужный терминал
Экран показывает, в какой из двух вставить карту
07
Чек и кешбэк
QR-код на кешбэк 1% и оценка кассы
Основной сценарий: скан, корзина, пакет, карта лояльности, способ оплаты, подсказка с нужным терминалом и чек с кешбэком. Экраны из финальных макетов.
Товар без штрихкода
01
Товар без штрихкода
Отдельная кнопка на главном экране
02
Каталог по категориям
Фото, цена и скидка на карточке товара
03
Поиск по названию
Клавиатура на экране, без ввода кода
04
Результат
Видно, что именно добавляешь в корзину
Товар без штрихкода: из каталога по категориям или поиском по названию с экранной клавиатуры.
UI-кит: кнопки, карточки товаров, поля, клавиатура и поп-апы. Передал его в разработку вместе со спецификациями.
Меньше нагрузки на персонал. Покупатели быстрее проходят сценарии и реже зовут помощь
Короче очереди. Сократилось общее время обслуживания, что важно в часы пик
Больше успешных транзакций. Понятная оплата и подсказки снизили ошибки при сканировании и оплате
Местные особенности стали преимуществом. Два терминала, кешбэк и многоязычие помогли быстрее привыкнуть к кассе
Поле быстрее отчётов. Один день у чужих касс дал больше, чем неделя разбора скриншотов
Локальный контекст меняет продукт. Два терминала — это не деталь, а другой флоу оплаты
Киоск читают на бегу. Размер, контраст и одно главное действие на экране важнее декора
Маркетплейс стройматериалов, где прораб закажет прямо со стройки
Полная пересборка сайта из начала 2000-х: исследование аудитории, UX-аудит по Baymard, новые продуктовые механики и 150+ экранов для десктопа и мобайла.
Роль
Продуктовый дизайнер, полный цикл
Работа
Напрямую с владельцем продукта и разработкой
Домен
E-commerce для строителей
Платформы
Web + Mobile
Проект в цифрах
−35%
время оформления заказа
+12%
конверсия в заказ
−30%
обращений в поддержку
+18%
повторных заказов
MGN — британский маркетплейс стройматериалов, аналог Леруа Мерлен, OBI и Максидома. На старте это был интерфейс начала 2000-х без дизайн-системы и без проверки на пользователях.
Редизайн задумывался не как обновление стилей, а как пересборка продукта: удобство, современные паттерны и реальные задачи пользователей.
Сам выстроил процесс: вместо «перерисовать» — разобрать проблемы, найти метрики и сформулировать гипотезы.
Исследования. Интервью, обратная связь от поддержки, валидация идей тестами
Метрики. Зафиксировал текущие показатели и те, на которые можем повлиять. О части из них в компании не знали
Дизайн. UI-кит и основные интерфейсы
Синхронизация. Напрямую с владельцем продукта и разработкой, приоритизация сценариев
Пользователи не доводили заказ до конца, а поддержка разбирала вопросы про корзину и доставку.
Бизнес
Пользователи
Потери на этапе оформления
Сложно найти нужный товар
Высокая нагрузка на поддержку
Нет даже избранного
Уступает конкурентам визуально и функционально
Пустые карточки: нет отзывов и характеристик
Нет единого визуального языка
Низкий контраст, важное не выделено
Нет аналитики по ключевым действиям
Сайт плохо работает на телефоне
Гипотеза
Если сократить путь до заказа, наполнить карточки информацией и сделать мобайл удобным для работы на объекте, вырастет конверсия в заказ и снизится нагрузка на поддержку.
Основные пользователи — прорабы, снабженцы и небольшие строительные компании. Часто заказывают с телефона прямо на объекте.
35+, в основном мужчины, невысокая цифровая грамотность
Работают в полевых условиях
Часто заказывают одни и те же материалы
Чувствительны к цене
Строители — ребята с крепкими руками и крупными пальцами. Это не шутка, а практическое UX-наблюдение из тестов.
Чтобы аргументы были весомее, проверил сайт по рекомендациям Baymard Institute.
Нашёл дублирующиеся действия, неочевидную иерархию в карточке, лишние переходы, сложную информацию о доставке и контраст ниже стандартов. Затем разобрал прямых конкурентов в России и Великобритании и косвенных — Ozon, Wildberries, IKEA.
Оформление заказа до редизайна: доставка, оплата и мобильная версия. Красные точки — проблемы, найденные в аудите: дубли действий, лишние поля и шаги, слабая иерархия. Нажмите, чтобы открыть крупно.
Из интервью, обращений в поддержку и аудита собрал job stories. Каждая описывает ситуацию, мотивацию и то, что должен дать интерфейс.
Job story
Мотивация
Что важно в интерфейсе
Когда я ищу нужный товар, я хочу быстро отфильтровать по параметрам,
чтобы не тратить время на просмотр нерелевантных позиций
Удобные фильтры, быстрый отклик, предварительный просмотр
Когда я собираю заказ для стройки, я хочу видеть всё в одной корзине,
чтобы ничего не забыть и удобно оформить доставку
Группировка по категориям, визуальные напоминания, автозаполнение
Когда я нахожусь на объекте с телефона, я хочу оформить заказ за 2–3 шага,
чтобы не отвлекаться от рабочего процесса
Упрощённый флоу, крупные элементы, минимум текста
Когда я выбираю товар, я хочу видеть отзывы и характеристики,
чтобы убедиться, что он мне подходит
Яркие табы, фильтр отзывов, примеры использования
Когда я оформляю заказ, я хочу понимать, где и как применяются мои бонусы,
чтобы максимально сэкономить
Видимая система бонусов, индикатор выгоды, расчёт скидки
Когда я делаю повторный заказ, я хочу просто нажать «повторить»,
чтобы не собирать всё заново вручную
История заказов, быстрый доступ к часто покупаемым товарам
Когда я оформляю заказ, я хочу быть уверен, что ввёл всё правильно,
чтобы не пришлось обращаться в поддержку
Подсказки, валидации, проверка на последнем шаге
По этим историям я приоритизировал сценарии вместе с владельцем продукта: сначала поиск, карточка и оформление заказа, затем бонусы и личный кабинет.
Кроме редизайна предложил бизнесу три механики, которые удерживают клиента внутри сервиса.
Бонусная программаКешбэк для клиента, повторные заказы для бизнеса
«Кухни и ванные»Конфигуратор с ценой и дизайн-проектом от партнёров — выше средний чек
КалькуляторыПрораб считает материалы на сайте и не уходит к другим сервисам
mgnbm.co.uk
Бонусы в личном кабинете: баланс, история начислений и списаний, ответы на частые вопросы. Списать бонусы можно прямо на шаге оформления.
mgnbm.co.uk
Страница кухни: описание, палитра цветов, цена по размеру планировки, запись на бесплатную консультацию и заказ каталога.
mgnbm.co.uk
Калькулятор гипсокартона и штукатурки: прораб вводит размеры стен и сразу получает количество материалов.
Что дали механики
Бонусная программа
+18%повторных заказов
×2заказов из аккаунта
×3отзывов в карточках
«Кухни и ванные»
+22%средний чек
+30%заявок на консультацию
+25%время на сайте
Калькуляторы
24%расчётов доходят до корзины
−15%дозаказов
−30%вопросов «сколько нужно»
По job stories пересобрал ключевые разделы маркетплейса.
Главная. Современная сетка и интерактивные блоки
Категории. Новые фильтры и навигация по лучшим практикам конкурентов
Карточка товара. Табы с документацией, вопросами и ответами, отзывами; избранное и бонусы
Корзина. Три шага: корзина, оформление, оплата — и кешбэк за заказ
Поиск. Товар добавляется в корзину прямо из результатов
Личный кабинет. Способы оплаты, настройки связи, интересы и бонусы
mgnbm.co.uk
9:41
Главная: промо-баннер, преимущества доставки, подборки товаров и крупные категории. Мобильная версия повторяет структуру, но с навигацией внизу экрана — под большой палец.
mgnbm.co.uk
Карточка товара: цена с НДС и без, бонусы за покупку, «Часто покупают вместе» и табы с описанием, характеристиками, вопросами и отзывами.
mgnbm.co.uk
Оформление в три шага: корзина, способ получения и адрес, оплата. Сводка заказа всегда справа, бонусы списываются в том же окне.
9:41
9:41
9:41
Мобильная версия для работы на объекте: крупные кнопки, характеристики в аккордеонах, корзина с итогом без лишних шагов.
Проект перевёл маркетплейс на продуктовые рельсы и дал бизнесу инструменты для роста.
−35% время оформления заказа: три шага вместо длинной формы
+12% конверсия из корзины в заказ
−30% обращений в поддержку по корзине и доставке
+18% повторных заказов благодаря бонусам
150+ экранов и UI-кит уложились в бюджет внедрения
Редизайн — повод поговорить о метриках. Бизнес часто не знает, какие показатели может сдвинуть
Контекст использования решает. Стройка, телефон и крупные пальцы важнее любого тренда
Дизайнер может предлагать продукт. Бонусы и калькуляторы выросли из исследования, а не из ТЗ
NFT-маркетплейс, где игрок торгует так же легко, как играет
За год спроектировал с нуля площадку для торговли игровыми активами на шести блокчейнах: маркетплейс, личный кабинет, админку, лендинг и дизайн-систему в двух темах.
Роль
Продуктовый дизайнер
Срок
1 год, до закрытой беты
Домен
Web3, NFT, GameFi
Платформы
Web + Mobile, светлая и тёмная темы
Результаты за год
180+
страниц: маркетплейс, кабинет, админка, лендинг
6
блокчейнов в одном интерфейсе
10+
маркетплейсов разобрал в бенчмарке
2
темы на общей дизайн-системе
NDA
Проект под NDA, поэтому в кейсе я рассказываю про свой подход и дизайн-процесс. Экраны — только те, что заказчик разрешил опубликовать.
У компании есть свои NFT-игры. Игрокам нужно было место, где можно безопасно купить, продать и обменять игровые активы, не уходя на чужие площадки.
MON's задумывался как главный инструмент торговли между игроками и витрина для всей экосистемы: лутбоксы, коллекции, аналитика рынка и обучение новичков.
ИгрокиПришли из игры, хотят быстро получить нужный предмет, в крипте разбираются слабо
Трейдеры и коллекционерыСравнивают цены, следят за объёмами торгов и редкостью
Команда проектаУправляет контентом, коллекциями и модерацией через админку
Экосистема MON на лендинге: лутбоксы, NFT-маркетплейс и игровой движок — три продукта, которые связывает маркетплейс.
Отвечал за продукт целиком: структуру, сценарии, дизайн-систему и качество того, что уходит в релиз.
Исследование. Бенчмаркинг 10+ маркетплейсов и выбор паттернов, к которым привыкла аудитория
Архитектура. Маркетплейс, личный кабинет, административная панель и лендинг
Дизайн-система. UI-кит на автолейаутах, светлая и тёмная темы
Арт-направление. Работа с 2D- и 3D-художниками над персонажами и элементами
Качество. Аудит вёрстки после каждой итерации фронтенда
NFT-маркетплейсы обычно сделаны для тех, кто уже разбирается в криптовалюте. Наши пользователи часто приходили из игры.
Шесть блокчейнов. У каждого своя валюта и свои кошельки — легко запутаться, в чём цена и куда платить
Низкое доверие. Непонятно, живой ли рынок, сколько на самом деле стоит предмет и не обманут ли
Порог входа. Подключение кошелька и первая покупка — момент, где новички уходят
Скучная торговля. Обычная витрина не удерживает игроков, которым важна эмоция
Гипотеза
Если спрятать сложность мультичейна за привычными паттернами, показать рынок прозрачно и добавить игровые механики, игроки начнут торговать внутри экосистемы, а не на сторонних площадках.
Разобрал больше десяти NFT-маркетплейсов: навигацию, карточки активов, покупку, подключение кошелька и подачу аналитики.
Главный вывод: аудитория уже привыкла к определённой структуре. Поэтому верхний уровень навигации построил на знакомых разделах — Explore, Marketplace, Create, Resources. Отличаться решили не структурой, а подачей: игровым визуалом, геймификацией и заботой о новичках.
Сложность мультичейна не должна ложиться на пользователя. Он всегда должен понимать, в какой сети находится и в чём цена.
Переключатель сети в шапке. Текущий блокчейн виден на любой странице и меняется в одно действие
Цена в родной валюте сети. Карточки показывают цену сразу в нужном токене, без пересчётов в голове
Подключение кошелька — главное действие. Кнопка Connect выделена цветом и всегда на виду
Переключатель сети в шапке: шесть блокчейнов в одном выпадающем списке, рядом — яркая кнопка Connect.
Чтобы человек доверял площадке, он должен видеть, что рынок живой.
Спроектировал разделы Rankings и Metrics: графики объёма торгов и числа транзакций за выбранный период, подсказки с точными значениями на графике. Трейдер оценивает рынок за секунды, а новичок видит, что здесь действительно торгуют.
Top collections: рейтинг коллекций с объёмом торгов, фильтром по сети и периоду.
Торговля должна ощущаться как продолжение игры, а не как биржа.
Лутбоксы. Подборка Top lootboxes с фильтром по периоду превращает покупку в событие
Арт вместе с художниками. С 2D- и 3D-художниками создавали персонажей, кристаллы, монеты и карты, которые живут и в играх, и на площадке
Уникальные механики. Ещё несколько игровых фич держим в секрете до релиза
Первый экран лендинга: 3D-маскот, которого мы сделали с художниками, и сети, в которых живёт MON.
Mon.Land — игровой мир экосистемы: персонажи и локации, созданные вместе с 2D-художниками.
Главную я пересобрал под телефон, а не просто сжал десктоп: у каждого блока свой мобильный паттерн.
Карусели. Статьи и коллекции листаются свайпом — на экране помещается больше, а страница не растягивается
Фильтры в списках. Период и сеть для рейтинга выбираются выпадающими списками прямо над ним
Поиск и фильтры каталога. Строка поиска и кнопка фильтров вместо боковой панели
Футер-аккордеон. Разделы сайта свёрнуты и не заставляют долго скроллить
9:41
Мобильная главная MON целиком: карусели, рейтинг с фильтрами, каталог и промо.
Для инвесторов и игроков я спроектировал отдельный широкоформатный лендинг. Его задача — за минуту объяснить, что такое MON и зачем ему свой токен.
Экосистема. Лутбоксы, маркетплейс и игровой движок — три карточки вместо длинного текста
Mon.Land. Лента персонажей показывает мир игры, а не абстрактный «метаверс»
$MON для инвесторов. Три выгоды токена по шагам и прозрачная токеномика в цифрах
Роадмап. Четыре этапа от NFT до Mon.Land — видно, куда движется продукт
Лендинг MON целиком: от первого экрана до роадмапа и токеномики.
Блок «What $MON brings to investors»: три выгоды токена, каждая со своей 3D-иллюстрацией.
Роадмап: от NFT-маркетплейса к лутбоксам, игровому движку и Mon.Land.
180+ страниц невозможно держать в одном стиле без системы.
UI-кит на автолейаутахКомпоненты адаптируются под контент и брейкпоинты
Светлая и тёмная темыПереключатель в шапке, обе темы на общих токенах
Широкоформатный лендингОтдельная версия для больших экранов
Главная на десктопе: гайды, коллекции, рейтинг, каталог с фильтрами и промо — всё на одной дизайн-системе.
Хороший макет ничего не стоит, если в продакшене он выглядит иначе.
Аудит после каждой итерации фронтенда. Замеры, скриншоты и описания расхождений
Детальный user flow. Разработка видит, как экраны связаны между собой
Закрытая бета. Тестируем с реальными игроками
Telegram-чаты сообщества. Обратная связь напрямую попадает в бэклог
За год продукт прошёл путь от идеи до закрытой беты.
Что сделано
Зачем
Маркетплейс на 180+ страниц
Полный цикл торговли игровыми активами
Поддержка 6 блокчейнов
Игроки из разных сетей в одной экосистеме
Личный кабинет и админка
Управление активами и контентом
Мобильная версия и две темы
Торговля с телефона, комфорт в любое время
Лендинг в двух темах и широкоформатная версия
Привлечение игроков в экосистему
Дальше: завершение беты, постепенное открытие функций и новые фичи по обратной связи сообщества.
В Web3 главный враг — страх. Понятная сеть, цена и кнопка подключения важнее любой анимации
Знакомая структура — фундамент, а отличие — в подаче. Игроков удерживают визуал и механики, а не новая навигация
Дизайн-система окупается на объёме. Без неё 180+ страниц в двух темах разъехались бы за месяц
Леруа Мерлен
Пятёрочка
Перекрёсток
Перекрёсток
Бургер Кинг
Вкусно — и точка
