«Львиную долю работы сделали и часть команды освободили»: как мы делаем редизайн Mindbox

Мы в Луче любим делать продуктовый дизайн сложных B2B сервисов. Чтобы эффективно работать над таким проектом, дизайнеры студии обычно полностью переходят в команду клиента. Именно так мы уже три года делаем редизайн для платформы автоматизации маркетинга Mindbox.

Если наём подрядчика вас пока пугает, а настроить дизайн-процесс и поднять метрики хочется — почитайте этот материал. Расскажем, как всё работает.

Mindbox до Луча

Мы техническая компания, большинство сотрудников в штате — инженеры. До прихода дизайнеров из Луча внешним видом продукта занималась команда разработки. Пользовательские сценарии прорабатывались недостаточно, похожие задачи решались по-разному в разных частях продукта. Постоянно появлялись новые функции, но общая логика не складывалась. Из-за этого пользователям было сложно работать с платформой, и нагрузка на поддержку была высокой.

Мы понимали, что нам нужен консистентный дизайн, понятные шаблоны использования и настроенные продуктовые процессы. Но в Mindbox никогда не было экспертов в продуктовом дизайне, и никто не умел их нанимать. Так мы решили работать со студией «Луч».

Mindbox с Лучом

Мы начали с исследований и редизайна раздела «Клиент». Сработали хорошо, и нам поручили заниматься остальными продуктами. Почти сразу начали делать дизайн-систему.

Работаем с Mindbox уже три года. Начинали с трех человек, выросли до шести, а потом снова вернулись к трем, но уже другим. Вопросами поиска и онбординга новых ребят всегда занималась студия.

В первую очередь нужно было наладить прямое общение между командой Mindbox и нашими дизайнерами. Так у ребят из Луча появились корпоративные почты, доступ к Slack, календарю и важным рабочим документам. Планировать загрузку стало легко и приятно.

Затем работали над тем, чтобы дизайнеров подключали к задачам как можно раньше. В начале сотрудничества нас звали уже на этапе проектирования. Сейчас мы приходим на этапе дискавери, чтобы вместе с продактом и разработкой детально проработать решение, найти ограничения и риски. Это ускоряет реализацию и помогает лучше контролировать процесс.

Приятный бонус для клиента: дизайнеры регулярно приносят макеты на студийный смотр, где остальные ребята из студии накидывают идей по улучшению.

Выстроили дизайн-процесс с нуля и разделили его на этапы

1. Погружение. Дизайнер подключается на этапе дискавери, работает в связке с продактом, помогает собрать карточку задачи.
2. Производство. Сделали шаблон постановки задачи. Ввели прозрачный трекинг. Ходим на командные встречи, работаем в одном канбане со штатными сотрудниками. Делаем дизайн, обновляем или дополняем компоненты в дизайн-системе.
   
3. Тесты. Проводим итерационные UX-тесты. Планируем внедрить небольшие тесты с использованием платформ для автоматизации.
   
4. Дизайн-ревью. Всё, что можно проверить, проверяем сразу параллельно с другими задачами.
   
5. Трекинг метрик. Прорабатываем процесс внедрения CSAT, чтобы понять, насколько пользователи довольны дизайном.

Договориться использовать UX-тесты было нелегко, ведь они увеличивают время реализации и часто просто доказывают, что изначальное решение было верным.

Мы по прежнему идем на компромисс по срокам и стоимости, но уровень продуктовой культуры в команде уже вырос. Удобство пользователей выходит на первое место, а продакты видят, что исследования улучшают дизайн и дают дополнительные инсайты.

Со своей стороны мы подготовили алгоритм проведения тестов, шаблон скрипта для интервью и отчета.

Мы начали собирать дизайн-систему с нуля на старте проекта, поэтому она детально проработана. Делаем атомарный дизайн, используем семантические стили типографики и цветов, тщательно описываем шаблоны и принципы применения компонентов.

Сейчас создаем больше локальных паттернов и чиним сбои в процессах вокруг дизайн-системы. Раньше дизайнеры могли не знать, что решение требует предварительной кастомной разработки. Сейчас, как только возникают сомнения, мы общаемся с разработчиками, узнаем ограничения и находим компромисс.

Расскажем на конкретном примере. В Mindbox есть раздел «Продуктовые рекомендации», где формируются подборки похожих товаров в интернет-магазинах. До редизайна выбирать алгоритмы рекомендаций из выпадающего списка было неудобно, а их названия не помогали понять, какой лучше. Пользователи терялись и звонили в поддержку или вовсе прекращали использовать раздел.

Мы пересобрали страницу в соответствии с дизайн-системой, поменяли порядок настроек, вынесли пример рекомендаций наверх, добавили описание алгоритма и дату обновления механики.

В результате с разделом стали работать в два раза больше пользователей, а жалобы в поддержку на интерфейс упали на 50%.

• Улучшить процесс взаимодействия с разработкой
• Стабильно подключаться к миссиям на этапе идеи и помогать с дискавери-исследованием
• Научиться количественно измерять пользу от дизайна.

За годы работы мы точно повлияли друг на друга. Дизайнеры Луча глубоко погрузились в продукт, а команда Mindbox прокачала продуктовую культуру, экспертность в исследованиях и дизайне. Вместе мы шагнули от расплывчатой постановки задач в Гуглдоке к упорядоченным процессам, качественному планированию и опоре на юзкейсы.