Loginet — это первый продукт, в котором я работал. Я начал внештатное сотрудничество с компанией, когда работал в Aspired. Работы было много. До моего прихода должности дизайнера в компании и вовсе не существовало. Система была написана на JS с использованием только стандартных компонентов.
Передо мной стояла огромная и сложная задача. Требовалось разработать последовательные принципы и паттерны для всей системы. Это самый интересный и сложный проект в моей карьере, результатами которого я горжусь. К сожалению, я не могу выложить все наработки. Покажу только то, что не подпадает под NDA.
Передо мной стояла огромная и сложная задача. Требовалось разработать последовательные принципы и паттерны для всей системы. Это самый интересный и сложный проект в моей карьере, результатами которого я горжусь. К сожалению, я не могу выложить все наработки. Покажу только то, что не подпадает под NDA.
Loginet
UX исследования
Как понять, чего хочет пользователь? Можно ставить эксперименты, смотреть аналитику, метрики, сравнивать свой продукт с конкурентами. Все это можно и нужно делать. Но что, если нет необходимых инструментов, а самое главное — времени и ресурсов?
Приблизительно в такой ситуации я находился, когда передо мной была поставлена следующая задача: за короткий срок получить как можно больше актуальной информации о взаимодействии пользователей с продуктом. Посидев и подумав, я решил сделать CJM, потому что это - один из самых информативных и всеобъемлющих Alignment Maps.
Для того, чтобы работа началась, мне нужно было инициировать проект и собрать команду. Я написал письмо моему руководству, в котором рассказал о целях проекта и той пользе, которую он принесет компании. Мое предложение было одобрено, и после утверждения плана я собрал команду и приступил к работе.
Приблизительно в такой ситуации я находился, когда передо мной была поставлена следующая задача: за короткий срок получить как можно больше актуальной информации о взаимодействии пользователей с продуктом. Посидев и подумав, я решил сделать CJM, потому что это - один из самых информативных и всеобъемлющих Alignment Maps.
Для того, чтобы работа началась, мне нужно было инициировать проект и собрать команду. Я написал письмо моему руководству, в котором рассказал о целях проекта и той пользе, которую он принесет компании. Мое предложение было одобрено, и после утверждения плана я собрал команду и приступил к работе.
CJM Roadmap
Целевые персоны
Одновременно с началом проведения исследований я сочинил четыре персоны и отправил их стейкхолдерам для внесения корректировок. К счастью, мои коллеги находились в контексте логистики гораздо дольше меня и имели более точное представление о том, кто есть наш пользователь. После нескольких совещаний мы решили ограничить количество персон до двух с целью максимизировать КПД для двух самых коммерчески важных групп пользователей.
В последствии я внес правки, исходя из информации, полученной от участников интервью, и персоны были готовы.
Одновременно с началом проведения исследований я сочинил четыре персоны и отправил их стейкхолдерам для внесения корректировок. К счастью, мои коллеги находились в контексте логистики гораздо дольше меня и имели более точное представление о том, кто есть наш пользователь. После нескольких совещаний мы решили ограничить количество персон до двух с целью максимизировать КПД для двух самых коммерчески важных групп пользователей.
В последствии я внес правки, исходя из информации, полученной от участников интервью, и персоны были готовы.
Персоны
Внутренние интервью
Внутренние интервью - это, пожалуй, один из самых распространенных и простых способов понять, с какими проблемами сталкиваются пользователи. С коллегами проще назначать встречи, да и интервью проводить проще, потому что все друг с другом знакомы. Самое главное - выбрать правильных людей. Чем ближе соприкосновение с пользователем, тем больше информации можно получить.
Я включил в список интервьюированных всех сотрудников отдела поддержки, отдела по работе с клиентами, продакт оунера, несколько проджект менеджеров и пару ребят из отдела разработки для альтернативного угла зрения. Всего у меня получилось около двадцати человек.
Внутренние интервью - это, пожалуй, один из самых распространенных и простых способов понять, с какими проблемами сталкиваются пользователи. С коллегами проще назначать встречи, да и интервью проводить проще, потому что все друг с другом знакомы. Самое главное - выбрать правильных людей. Чем ближе соприкосновение с пользователем, тем больше информации можно получить.
Я включил в список интервьюированных всех сотрудников отдела поддержки, отдела по работе с клиентами, продакт оунера, несколько проджект менеджеров и пару ребят из отдела разработки для альтернативного угла зрения. Всего у меня получилось около двадцати человек.
Детали проведения интервью
Обычно при составлении CJM фокусируются именно на актуальном опыте, связанном с продуктом. Я же решил не ограничиваться существующими проблемами и попробовать заглянуть немного дальше в область Cast Dev.
Интервью проходили по видеосвязи и записывались. На каждого респондента отводилось по одному часу, но некоторые интервью длились до полутора часов. Изначально я составил список вопросов по каждому этапу контакта с продуктом. Однако, я быстро понял, что чем, казалось бы, точнее вопрос, тем он более закрепощает респондента. К середине проведения внутренних интервью у меня получился список более верхнеуровневых вопросов, которые давали больше свободы опрашиваемым. Хочу отметить, что я обращал внимание не только на сами ответы, но и на эмоциональный отклик, который обычно индицирует важность того, о чем идет речь.
Для того, чтобы вся команда почувствовала эмпатию и глубже погрузилась в работу, я отправил каждому члену команды по несколько видео интервью для расшифровки, а результаты проверил сам.
Обычно при составлении CJM фокусируются именно на актуальном опыте, связанном с продуктом. Я же решил не ограничиваться существующими проблемами и попробовать заглянуть немного дальше в область Cast Dev.
Интервью проходили по видеосвязи и записывались. На каждого респондента отводилось по одному часу, но некоторые интервью длились до полутора часов. Изначально я составил список вопросов по каждому этапу контакта с продуктом. Однако, я быстро понял, что чем, казалось бы, точнее вопрос, тем он более закрепощает респондента. К середине проведения внутренних интервью у меня получился список более верхнеуровневых вопросов, которые давали больше свободы опрашиваемым. Хочу отметить, что я обращал внимание не только на сами ответы, но и на эмоциональный отклик, который обычно индицирует важность того, о чем идет речь.
Для того, чтобы вся команда почувствовала эмпатию и глубже погрузилась в работу, я отправил каждому члену команды по несколько видео интервью для расшифровки, а результаты проверил сам.
Внутренняя CJM
Получив и расшифровав информацию из внутренних интервью, мы с дизайнером начали составлять первый вариант CJM. К сожалению, тогда еще не существовало Figma Jam, так что мы решили разработать свои компоненты для этого проекта. В итоге у нас получилась удобная карта с возможностью перетаскивания и всеми теми функциями, которые позволяют нам делать лейауты.
У нас получилась CJM, с которой уже можно было работать. Несколько особенно важных моментов сразу пошли в разработку, остальные ждали своего подтверждения у реальных пользователей.
Получив и расшифровав информацию из внутренних интервью, мы с дизайнером начали составлять первый вариант CJM. К сожалению, тогда еще не существовало Figma Jam, так что мы решили разработать свои компоненты для этого проекта. В итоге у нас получилась удобная карта с возможностью перетаскивания и всеми теми функциями, которые позволяют нам делать лейауты.
У нас получилась CJM, с которой уже можно было работать. Несколько особенно важных моментов сразу пошли в разработку, остальные ждали своего подтверждения у реальных пользователей.
Финальная CJM
Финальная CJM
Интервью с пользователями проходили по тому же принципу, что и с коллегами, с той лишь разницей, что весь пул опрашиваемых был разделен на две роли: Грузовладельцев и Перевозчиков.
У каждого респондента получилась своя карта с ответами. У нас уже была сводная CJM, которая включала все внутренние интервью. Оставалось самое сложное - соединить все вместе. На это ушло не одно совещание, сопровождаемое бурными спорами. После соединения всей полученной информации мы написали предложения по улучшению каждого этапа CJM и отправили этот документ для обратной связи всем руководителям отделов.
Финальным этапом были презентация карты руководству и планирование внесений доработок в Roadmap.
Интервью с пользователями проходили по тому же принципу, что и с коллегами, с той лишь разницей, что весь пул опрашиваемых был разделен на две роли: Грузовладельцев и Перевозчиков.
У каждого респондента получилась своя карта с ответами. У нас уже была сводная CJM, которая включала все внутренние интервью. Оставалось самое сложное - соединить все вместе. На это ушло не одно совещание, сопровождаемое бурными спорами. После соединения всей полученной информации мы написали предложения по улучшению каждого этапа CJM и отправили этот документ для обратной связи всем руководителям отделов.
Финальным этапом были презентация карты руководству и планирование внесений доработок в Roadmap.
Задачи из CJM разбитые по проектам
Результаты исследования
- CJM была представлена нашим инвесторам и помогла получить дополнительное финансирование.
- Было принято решение о создании Help Center, который в разы снизил нагрузку на наш колл-центр.
- В Roadmap было запланировано несколько проектов, которые должны улучшить пользовательский опыт.
- CJM помогла создать среду для связи отделов и открытого диалога, что положительно сказалось на климате внутри компании.
- CJM была представлена нашим инвесторам и помогла получить дополнительное финансирование.
- Было принято решение о создании Help Center, который в разы снизил нагрузку на наш колл-центр.
- В Roadmap было запланировано несколько проектов, которые должны улучшить пользовательский опыт.
- CJM помогла создать среду для связи отделов и открытого диалога, что положительно сказалось на климате внутри компании.
Навигация
Сперва может показаться, что сделать навигацию просто. Но это не так. Я считаю, что чем чаще происходит итерация с компонентом или блоком, тем безупречнее он должен быть спроектирован. Соответственно, тем сложнее это сделать.
Нужно сказать пару слов о табах, дублирующих табы браузера. Возникает вопрос: «Зачем они нужны?»
Это не моя прихоть, а техническое ограничение, которое мне требовалось удовлетворить. Мне нужно было спроектировать навигацию, которая бы позволяла открыть все страницы портала на одной вкладке браузера. Привычный паттерн вкладок браузера решает эту задачу идеально.
Нужно сказать пару слов о табах, дублирующих табы браузера. Возникает вопрос: «Зачем они нужны?»
Это не моя прихоть, а техническое ограничение, которое мне требовалось удовлетворить. Мне нужно было спроектировать навигацию, которая бы позволяла открыть все страницы портала на одной вкладке браузера. Привычный паттерн вкладок браузера решает эту задачу идеально.
Дизайн система
С самого первого дня я понял, что над таким проектом нельзя работать без дизайн-системы. К моему великому сожалению, в Фигме еще не было функции вариантов. Мне пришлось решать эту задачу. Проблема состояла в том, чтобы соблюсти баланс между количеством уникальных компонентов и весом файла, на который они влияют. Я хотел сделать систему, которая позволит проектировать на лету, не потребует долгого изучения для новых членов команды. Сейчас, имея инструмент Варианты, я бы сделал все иначе. Но даже при таком результате система решает свои задачи и в десятки раз убыстряет процесс проектирования.
Для каждого варианта есть описание, инструкция по использованию, но я не могу выложить эти материалы.
Для каждого варианта есть описание, инструкция по использованию, но я не могу выложить эти материалы.
Дашборд
Дашборд дело тонкое. Этот дашборд я делал, как только пришёл в Loginet. Перед уходом я работал над его редизайном, который очень сильно изменит, то как люди пользуются продуктом. Но это уже другая история. Этот дашборд я включил чтобы показать, как я работаю с графиками и цветом.
Создание перевозки
Перевозка — это основная сущность системы Loginet. Почти все бизнес-процессы так или иначе связаны с ней. Пройдя по ссылке, можно посмотреть кликабельный прототип. Обычно к каждому прототипу я записываю видео для документации, чтобы команда разработки быстро вникала в суть работы блока. Это видео можно посмотреть после ссылки на прототип.
О моём опыте в продукте
Работа в Loginet меня многому научила. До Loginet я думал, что работа в продукте — нудная, однотонная рутина, где дизайнеры работают беспрекословно, как каторжники на галере, подчиняясь Product Owner. Но это оказался творческий процесс, где ты (дизайнер) реально влияешь на то, как продукт выглядит, как работает. Это невероятно увлекательный и захватывающий процесс. Для меня это как экономическая стратегия, где нужно бесконечно улучшать свой город, чтобы игра продолжалась.
На предыдущем месте работы я взаимодействовал и с разработчиками, и с заказчиками. Но сервисная разработка — дело другое. Когда работаешь в продукте, твое погружение в бизнес-процесс намного глубже. Так как нет человека, который знает всю систему целиком, приходится общаться с огромным количеством людей из разных отделов и уровней. Через какое-то время ты уже не понимаешь, кто ты сам (дизайнер, маркетолог, разработчик). Это и есть продуктовый дизайн.
Сложно переоценить тот опыт, который я получил, сделав миллиард ошибок. Мне бы очень хотелось попробовать построить что-то подобное с самого начала, имея за плечами новые знания.
На предыдущем месте работы я взаимодействовал и с разработчиками, и с заказчиками. Но сервисная разработка — дело другое. Когда работаешь в продукте, твое погружение в бизнес-процесс намного глубже. Так как нет человека, который знает всю систему целиком, приходится общаться с огромным количеством людей из разных отделов и уровней. Через какое-то время ты уже не понимаешь, кто ты сам (дизайнер, маркетолог, разработчик). Это и есть продуктовый дизайн.
Сложно переоценить тот опыт, который я получил, сделав миллиард ошибок. Мне бы очень хотелось попробовать построить что-то подобное с самого начала, имея за плечами новые знания.
