B2B/B2G
Web
Ad-Tech
BigData
Сделано в VK в 2024
Обновление форм VK ОРД
Оператор рекламных данных от VK, который позволяет удобно маркировать рекламу для соблюдения закона путём передачи данных о рекламных кампаниях в ЕРИР
Сокращение времени заполнения формы
Снижение точек, где можно ошибиться
Внедрение подсказок
Команда
Я — Ведущий дизайнер (и единственный)
В мои задачи входило полное курирование дизайна продукта, проведение аналитики и погружение в сферу, а также поддержание коммуникации с разработкой для передачи макетов
Продукт-оунер
Вела коммуникацию с Роскомнадзором и Единым реестром интернет рекламы (ЕРИР), передавала требования регуляторов в команду, а где-то отбивалась от сомнительных решений
Продакты (3 человека)
Отвечали за разные части продукта (десктоп, оно же “большой кабинет” и приложение в ВКонтакте), контролировали реализацию задач, которые приносила PO
Аналитики (2 человека)
Аналитики помогали мне с данными и часто делали полезные выгрузки для проверки различных гипотез
Фронтенд (4 человека)
Больше всего среди разработчиков я вёл коммуникацию с лидом фронтенд-разработки. Вместе мы определяли что и как будет разрабатываться, где какой будет нейминг, как будут выглядеть переменные и так далее
Бэкенд (10 человек)
Технический директор сильно помогал мне на старте с погружением во все нюансы продукта так как отлично в нём разбирался, а также по ходу проекта давал комментарии о возможности реализации тех или иных фич
Ресёрч
Анализ проекта
Изучил сферу, закон о рекламе, текущий интерфейс, погрузился в пользовательский сценарий подачи данных. Общался с различными членами команды для уточнения особенностей пользовательского пути, также узнал, какие бизнес-показатели важны для продукта
Анализ конкурентов
Проанализировал кабинеты конкурирующих ОРД Озона, Яндекса и т.д. Смотрел как устроен их пользовательский путь
Интервью с ЦА
Провёл около 10 интервью с маркетологами, менеджерами и специально выделенными сотрудниками, отвечающими за подачу рекламной статистики. Узнал, как они подают данные, какими ОРД пользуются и с какими проблемами сталкиваются.
Проблемы
Устаревшие и сложные формы
Весь дизайн VK ОРД до момента моего прихода разрабатывался силами разработчиков, где на первом месте была реализация по ТЗ с минимальным акцентом на пользовательский опыт, что породило множество проблем с юзабилити
Одна из первых форм которую должен заполнить пользователь. Сразу видно как минимум две ошибки: ошибки скрыты за хинтами, что усложняет их восприятие, а номер не имеет удобной маски
Ошибки при подаче данных
Закон вышел не так давно, многие понятия не имеют что за ОРД и как ими пользоваться, а интерфейс даёт мало подсказок, что вызывает обилие некорректно поданных данных
Отсутствие гибкости
Интерфейс слабо умел отклонятся от пошагового процесса, поэтому если пользователь забывал что-то указать или внести, ему приходилось начинать путь с упущенного пункта, безвозвратно теряя прогресс
Если ты уже начал заполнять договор и вдруг вспомнил, что забыл завести контрагента, то придётся закрыть форму, уйти в другой таб, а потом заполнять всё заново
Свой язык разработки
Исторически сложилось, что команда ОРД писала свой код на Vue, в то время как дизайн-система VK была написана на React. С первого дня работы мне дали понять, что использовать дизайн-систему напрямую у меня не получится, однако поддерживать консистентность с сервисами VK всё-таки нужно.
Моей ключевой задачей было ускорить разработку решений, а также снизить нагрузку на команду поддержки, то есть сделать процесс подачи данных простым и не вызывающим вопросов
Решения (1/5)
Мультимодальность
Представим, что пользователь заполняет данные договора и вдруг понял, что он забыл завести в ОРД одного из контрагентов договора. Раньше ему пришлось бы закрыть форму, перейти в другой таб, завести контрагента, потом вернутся к договору и заполнить его заново.
В моём решении всё это происходит в рамках одного флоу, где создание договора не прерывается, а добавление контрагента происходит параллельно в форме, которая появится поверх формы договора
Обновлённая форма договора с раскрытым инпутом поля исполнителя, где можно не только выбрать уже имеющихся, но и добавить нового
Обновлённая форма контрагента, открытая поверх формы добавления договора
Аналогичные решения были сделаны для всех сценариев, где пользователю может понадобится добавить недостающие для конкретной формы данные, не покидая саму форму
Решения (2/5)
Черновики
Некоторые формы являются очень большими, поэтому их заполнение может растянуться на несколько сеансов. Текущее решение не позволяло поставить заполнение формы на паузу, поэтому я придумал черновики
При нажатии на кнопку «Сохранить черновик» форма будет выносится в специальную папку черновиков
Решения (3/5)
Обновление формы креативов
Форма регистрации креатива является одной из самых больших в ОРД и самых пошаговых, однако её текущий вид вызывает сильную когнитивную нагрузку и имеет множество точек для упрощения
Форма регистрации креатив до обновления
Разделение на шаги
Форма достаточно пошаговая, поэтому я решил, что можно снизить когнитивную нагрузку выдавая шаги по очереди и не перегружая экран полями ввода
Форма регистрации креатива после обновления
Акцент на ERID
Идентификатор рекламного креатива, он же ERID, является ключевым для поиска нужных креативов, поэтому было принято решение дать ему больше акцента и сразу показать, где его можно будет увидеть. Пока креатив только регистрируется, в форме указывается, что ERID ещё не присвоен — он отобразится там как только ЕРИР одобрит данные
Перенос поля договора
Все креативы привязываются к изначальным договорам, поэтому это поле было решено перенести выше
Первый шаг формы регистрации креатива после обновления
Продуманные корнеркейсы
Форма подстраивается под контекст и учитывает корнеркейсы. Например, если рекламный креатив является саморекламой, то форма даёт подсказки по её заполнению. Или если креатив никуда не ведёт, то можно нажать специальную кнопку, отметив, что ссылок в креативе нет. Таким образом пользователь не будет переживать о том, что ему надо что-то указать, чего у него нет.
Демонстрация корнеркейса при выборе саморекламы
Демонстрация корнеркейса при отсутствии ссылок в креативе
Удобные мелочи
Зачастую проще перетащить картинку в окно браузера, чем искать её на компьютере через файловый менеджер, поэтому на шаг добавления файла я добавил драгндроп.
Также креативами часто бывают длинные видео, раньше прогресса загрузки таковых не было, что вызывало негативный фидбек, пользователи думали, что сайт завис (хотя видео просто долго грузилось). Поэтому было решено добавить прогрессбар загрузки файла.
Ещё одна мелочь — отображение выполненных шагов галочкой. Так пользователь будет меньше переживать о том, что он что-то не заполнил и сразу будет понимать, когда все обязательные поля заполнены.
Демонстрация работы драгндропа
Демонстрация работы прогрессбара
Общий вид заполненной формы креатива
Решения (4/5)
Обновление формы акта
Форма регистрации акта была самой большой и самой сложной, как с точки юзабилити, так и с точки технической реализации. Она затрагивала много других форм и имела внутри себя обильный функционал. При её обновлении было больше 10-ти различных итераций дизайна, прототипы многих из которых прошли коридорные тестирования.
Форма акта до обновления
Пересмотр архитектуры полей
Вместе с продактами и аналитиками мы тщательно изучили какие поля в каком порядке заполняются, а какие поля могут дать нам данные для автозаполнения других полей. В итоге мы придумали иерархию, которая поможет заполянть акт максимально быстро.
Первым делом мы запрашиваем договор акта, он позволит понять какие роли есть у заказчика и исполнителя (иногда они не совпадают, но в 90% случаев это ускорит заполнение).
Далее запрашивается номер акта, его сумма и период. Указанный период позволит автозаполнить поле даты выставления акта т.к. эта дата обычно совпадает с концом периода акта.
Незаполненная обновленная форма регистрации акта
Продуманные корнеркейсы
Бывают кейсы, когда в рамках акта нужно указать исполнителя издателем, но чаще всего такую роль контрагенту даже не заводят. Особенность этой роли в том, что для её добавления контрагенту нужно указать площадку, издателем которой является контрагент. Форма предусматривает этот кейс и выводит подсказку о добавлении площадки, а мультимодальность позволит решить этот кейс не покидая форму акта.
Незаполненная обновленная форма регистрации акта
Новое поведение разаллокации
Раньше разаллокация сразу выводилась в форме, однако для некоторых актов она не нужна, поэтому мы решили скрыть её, пока мы не убедимся, что пользователю действительно нужно будет её заполнять
Вид формы после указания договора и периода
Проверка данных в разаллокации
В разаллокации нужно указывать по каким договорам разбиваются деньги в акте, а также, если на эти договоры заведены креативы, нужно указаить и их.
Мы отправляем запрос на бэк при выборе договора и проверяем, зарегистрированы ли на него креативы и если ответ положительный, выводим в форме чекбокс, подсказывающий, что можно указать креативы (это не всегда нужно, поэтому и чекбокс)
Вид формы после указания договора в разаллокации, если на договор есть креативы
Вывод релевантных данных
На договор может быть оформлено множество креативов, но благодаря пошаговому заполнению нужных полей, форма умеет анализировать данные и выводить только релевантные для конкретного периода и договора креативы, не отображая лишнего
Вид формы при включенном чекбоксе выбора креативов
Помощь в заполнении статистики
При заведении квартальных актов можно забыть указать статистику за последний месяц, поэтому при выборе креативов таблица запрашивает данные о поданной статистике по креативам, если данных вдруг нет, таблица покажет пустую строку, предлагая заполнить статистику за этот месяц.
Также, есть кейсы “разаллокации денег по акту”, это скорее бюрократическая проблема, которая выглядит так: Блогер крутит рекламу 3 месяца, по итогам 3 месяцев ему дают 15 000 руб. Их надо указать в акте, но их же надо указывать в статистике каждый месяц. Однако блогер не может их указать заранее т.к. не знает, сколько ему дадут через 3 месяца. В таком кейсе при подаче акта надо разбить эту сумму на 3 месяца добавив деньги в статистику по нужному месяцу.
Форма предусматривает этот кейс, отображая деньги по статистике и предлагает проверить ту статистику, где деньги не указаны, иногда это нужно заполнять.
Вид формы при включенном чекбоксе выбора креативов
Множественная разаллокация
Большие акты иногда требуют несколько разаллокаций, специально для таких кейсов был предусмотрен свёрнутый вид разаллокации, который отображает номер договора, к которому она относится и указанное количество креативов. Такое решение позволяет сделать форму легче и снижает когнитивную нагрузку во время её заполнения.
Вид формы при включенном чекбоксе выбора креативов
Решения (5/5)
Уведомление о работе в демо-кабинете
В ОРД есть демо-версия кабинета, где можно тестировать интерфейс, пробовать заполнять формы и так далее. Однако до моего прихода демо-кабинет отличался от настоящего только ссылкой, это вызывало ошибочную подачу данных в демо-кабинет, вместо настоящего.
Я предложил добавить акцентную плашку при работе в демо-кабинете, чтобы было чётко ясно, что поданные данные не будут отправляться в ЕРИР. После внедрения плашки, обращения в саппорт на тему ошибочной подачи данных прекратились.
Демонстрация плашки демо-кабинета
Итоги
Я проработал над проектом почти год, далеко не все мои решения успели доехать до прода, поэтому похвастаться ростом метрик не получится. Однако вот что точно можно отметить
Ускорение времени разработки
Удобные ready-to-dev макеты с детальным описанием, а также проработанная дизайн-система с токенами помогли команде разработки в разы ускорить выкатку решений. Некоторые моменты и вовсе удалось автоматизировать через интеграции, например при обновлении токенов цвета или отступов, они автоматически обновляются в коде проекта
Фундмент тёмной темы
Использование токенов фигмы и их интеграция в код позволила заложить базу для тёмной темы, которая станет доступна после реализации всех частей интерфейса
Система переводов
Весь статичный текст задавался при помощи токенов, это позволило быстро внедрить китайский язык, просто добавив к токенам ещё один мод
Выстроенный процесс по работе с дизайнером
Я с нуля выстроил процесс взаимодействия с разработкой и продактами, завёл шаблоны для описания и оценок задач, помог фронтенд разработчикам интегрировать систему оценок к себе и лучше прогнозировать сроки выполнения задач
Успешные тестирования прототипов
Сложные и объёмные вещи вроде обновления формы актов не успели выйти в прод, однако, коридорные тестирования на реальных пользователях показали, что обновлённый дизайн гораздо лучше помогает пользователям быстро заполнять данные.
Например финальная итерация формы актов, продемонстрированная в кейсе, была успешно пройдена 5 пользователями в рамках тестирования.