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

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

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

Что было на старте

Mindbox до Луча

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

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

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

Mindbox с Лучом

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

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

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

Не всегда всё шло гладко, даже людей меняли на проекте. Всё решалось переговорами на уровне менеджмента, без фаундеров — и это хорошо.

сооснователь Mindbox Александр Горник

Как дизайнеры Луча меняли рабочие процессы

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

Почты, календари, Slack — всё как у людей в штате
Почты, календари, Slack — всё как у людей в штате

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

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

Когда разбираемся в задаче, много спрашиваем про продукт и сценарии использования
Когда разбираемся в задаче, много спрашиваем про продукт и сценарии использования

Не просто делают дизайн, а помогают отстроить процессы UX-тестирования, дизайна и верстки. Переживают за результат, задают неудобные вопросы, двигают процессы, исследуют конкурентов.

сооснователь Mindbox Александр Горник

Что мы сделали за три года

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

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

Помогли настроить UX-тестирование

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

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

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

Подсказки и шаблоны для проведения тестов от Луча
Подсказки и шаблоны для проведения тестов от Луча

Создали одну из лучших дизайн-систем в истории студии

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

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

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

Влияем на метрики

Фидбэк по изменениям от клиентов положительный, обращений в поддержку стало меньше.

сооснователь Mindbox Александр Горник

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

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

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

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

Что в планах

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

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

Если надо в UI или UX, то коллеги — про результат и пользу. Мы сделали сотни экранов, работаем уже три года и дальше будем работать еще долго, если не всегда. Срабатываемся всё лучше и слышим друг друга, несмотря на косяки с обеих сторон.

сооснователь Mindbox Александр Горник

Хотите узнать о нас больше? Вот наш канал в Телеграм. А вот сайт. Кстати, это информация, не является рекламой.

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

Кайф, коллеги :) Успехов вам!

1
Ответить

А сколько работа заняла часов примерно?

Ответить