Всем привет, меня зовут Илья Гордеев, я дизайн-менеджер направления b2b продуктов в X5 Tech. На протяжении этого года я и моя команда разработали и внедрили в свои продукты ряд единых практик и артефактов, которые повысили общую гигиену дизайна, уровень продуктового подхода и понимание потребностей пользователей. Как мы это делали — расскажу в статье.
Какие конкретно проблемы хотелось полечить
Компания Х5 большая, в ней много разных продуктов, каждый из которых создавался по-своему, использовал разные подходы и не всегда соблюдал минимальную дизайн-гигиену. Дизайнеры менялись, привлекались подрядчики, росло легаси, слои дизайна и дизайн-долг, и порой дизайнер просто выгорал от организации проекта в Figma.
Но помимо очевидного порядка в файлах Figma, слоях и нейминге, дизайн-системе и компонентах (отлично описано в «Метём метлой. Рефакторим дизайн-систему, чтобы верстать макеты без боли») есть ряд «точек роста» именно для продуктового дизайна, на которые можно повлиять системно:
UX-исследования — позволят быстрее погрузить новых дизайнеров, а текущим прокачать продуктовый подход, увидеть продукт со стратегической высоты, а кому-то шагнуть из UX/UI-дизайнера в продуктового.
Проверка качества дизайн-решений — снизит нагрузку на лида и микроменеджмент со спонтанным заходом в макеты и проверкой, ввести рутину для дизайнера и фронта в плане отношения к макетам.
Документация дизайна — создание единой точки входа для команды проектирования и разработки, аккумуляция знаний по дизайну продукта, быстрое погружение новых сотрудников, возможность быстро делиться наработками и опытом со смежными командами.
Нельзя просто так взять и сделать единый дизайн-подход для всех продуктов…
Можно, если подойти к этому системно.
Просто нужны единые инструменты, которые, с одной стороны, снизят затраты на запуск дизайна новой инициативы, а дизайнеры смогут внедрить как системные практики. При этом они будут полезны членам продуктовых команд и дадут возможность централизованного мониторинга качества работы над дизайном.
Отсмотрев кучу макетов, проанализировав подходы в командах Х5 и сопоставив с текущими возможностями, выбрали следующее:
Инструменты для UX-исследований — персоны для понимания целевой аудитории, информационная архитектура, минимальная дата-аналитика, наработка навыков тестирования и работы с пользователями, создание базы респондентов.
Инструменты для повышения качества дизайна — чек-лист дизайна и следования дизайн-системе, обязательное ревью дизайн-решений готовой вёрстки, участие дизайнера в сессии дизайн-критики.
Инструменты для документации — любые удобные вики от Notion до Confluence и пр.
Персоны пользователей
Зачем и для чего они нужны, написано много, не буду повторяться. Но как менеджер я хочу быть уверен, что дизайнер и команда понимают, для кого они делают интерфейс. А для их составления были сделаны некие упражнения для знакомства с пользователями, глубинные интервью и анализ дизайнером полученных данных.
У нас разработан собственный шаблон, он содержит общие данные, роль в системе, оборудование и софт, которым пользуется персона, задачи и боли, страхи и ожидания. В обычных случаях этой информации достаточно, при этом её не так сложно добыть))
Информационная архитектура и User Flow
Часто b2b продукты имеют сложную структуру, количество ролей может быть более 10. Всё это может привести к логическим ошибкам и ненужным усложнениям.
Любой проект или продукт проще воспринимать, имея перед глазами его информационную архитектуру. Подобный артефакт позволяет легко понять масштаб проекта, сделать оценки по аудиту или редизайну, выявить проблемы в логике.
User Flow — расширенная версия информационной архитектуры, которая совмещает в себе путь пользователя, верхнеуровневое представление структуры экранов, совмещённое с функциональными бизнес-требованиями. Это отличное представление для высоко нагруженных интерфейсов.
Карточка задачи и чек-лист проверки макетов
Это небольшой шаблон, который заполняет дизайнер, работая над задачей/разделом/фичей. Она содержит понимание, что делаем и зачем. Кто принимает участие из проектирования и все ссылки.
Чек-лист проверки макетов — подробный гайд с примерами бест-практис, описывающий целевой стандарт оформления макетов и задач, он содержит три блока:
Общее оформление — требования для оформления макетов, слоёв, комментариев и подписей.
UI-стек — напоминание про разные состояния экранов, форм, скроллы, адаптив и пр.
Гайдлайны и дизайн-система Join — продукты b2b направления создаются на базе внутренней системы Join, и макеты продуктов должны соответствовать токенам, типографике и компонентам дизайн-системы.
Дизайн-ревью вёрстки
Иногда встречаю мнение, что это лишнее, так как можно созвониться с разработчиком и обсудить голосом все правки. Но у нас речь про системный подход, так что для этой активности был разработан шаблон для единого стиля оформления правок и замечаний.
Кроме проверки компонентов дизайн-системы, на ревью дизайнеры проверяют вёрстку на два вида замечаний:
Критические — то, что может повлиять на прохождение сценария:
Работоспособность сценария (если есть ветви, то и их)
Наполнение страницы (экрана) в соответствии с тикетом на разработку
Отображение на разных разрешениях
Отображение на разных браузерах
Соблюдение сетки
Тексты на соответствие макету
Состояния элементов и их стили при смене состояния
Некритические — ошибки, которые не влияют на прохождение сценария:
Иллюстрации и иконки на отображение и их размер, на соответствие макету
Наличие неразрывных пробелов
Отступы на соответствие макетам
Шрифты на соответствие стилям
Единый шаблон UX-исследования
Дизайнеры самостоятельно проводят юзабилити тестирования на продуктах. Для удобства и единообразия дизайнерами направления используется единый шаблон, который хранится в документации на wiki продукта и содержит:
ФИО дизайнера и дату проведения
Ссылку на прототип
Тестируемые гипотезы и вопросы
Ответы респондентов с критерием успешности
Организация файлов инициативы в Figma
Помимо прочего, внедрён минимальный набор рабочих файлов для проекта в Figma, который содержит вышеописанные артефакты, подходы и оформления макетов. Это позволило снизить нагрузку на менеджера и дизайнера на старте инициативы, а также сразу направить в нужное русло дизайн и исследования.
Готовые макеты, переданные в разработку
Cанбокс дизайнера для работы над задачами
Файл под все исследования (персоны, прототипы, информационная архитектура и пр.)
Локальная библиотека компонентов проекта
Файл для проведения дизайн-ревью
Где это всё системно хранить
Инициатив и других наработок по дизайну много, их видов и разнообразия ещё больше. Всё это нужно где-то хранить и поддерживать в едином месте, удовлетворяющем следующим условиям:
Должен быть доступ у всей команды, при этом в корп. контутре (никаких личных ноушенов, драфтов в Figma, почты и пр.).
Унифицированная точка входа как для команды продукта, так и для сторонних пользователей (интересанты из других областей).
Возможность хранения разных форматов и видов представления данных.
В Х5 Tech единое пространство для сотрудников — wiki. Поэтому выбор остановился на нём. К нему есть доступ у всех сотрудников, а новые знакомы с интерфейсом, он может хранить любые виды файлов, легко поддерживать актуальность, а главное – вся документация по продукту уже хранится в нём.
В итоге
Спасибо команде направления за понимание и поддержку данной инициативы. Внедрение подобных практик на продуктах позволило:
Начинать новые инициативы быстрее с набором понятных векторов развития дизайна и исследований.
Получить важные инсайты, начиная от пути пользователя в интерфейсе до «вытаскивания на свет» затерянных исследований.
Подсветить сильные и слабые стороны продуктового подхода на инициативах и повысить зрелость продуктового дизайна.
Как лидеру направления быть более погруженным в продукты через артефакты и практики дизайна..
Почитать больше про системный подход к дизайну в X5 Tech:
Статья Стаса про корпоративный шрифт: «Создание собственного корпоративного шрифта. Зачем он нужен и какой путь мы прошли»
Статья Георгия о цветах: «33 оттенка зелёного. Как мы проектировали темизированные палитры для внутренних интерфейсов Х5»
Стандарт по текстам от Саши: «Синергия дизайнеров и техписов: создание единых стандартов Tone of voice»