Всемогущий «Личный кабинет»

Приветствую, коллеги! Меня зовут Павел Мелдажис, в агентстве «Ареал» я отвечаю за выработку цифровых решений для транспортных компаний и их запуск.

В первой публикации «Цифровой вход для клиента», мы подробно разобрали главные функции «Личного кабинета» клиента транспортной компании. В продолжении темы, мы обсудим этапы проектирования интерфейса «Личного кабинета» и постараемся ответить на следующие вопросы:


Тонкости воплощения бизнес-идеи в удобный интерфейс мы обсудим с руководителем проекта развития «Личного кабинета» ПГК Дмитрием Боханом и ведущим аналитиком команды «Ареал» Ольгой Завьяловой. Процесс проектирования будет разобран на примере онлайн-подачи заявки на перевозку. Но модель работы, описанную в статье, можно легко переложить на создание любого интерфейса даже вне «Личного кабинета».

«Рождение прототипа»

– С «Первой грузовой компанией» (ПГК) мы сотрудничаем с 2017 года и за 5 лет успели серьезно обновить не только «Личный кабинет», он же «ПГК Онлайн», но и разработали под него мобильное приложение, и запустили «Мобильный репортер». Поэтому предлагаю о сборе требований и проектировании поговорить на примере процесса подачи заявки на перевозку в «ПГК Онлайн».

Дмитрий Бохан:

На данный момент системой «ПГК Онлайн» пользуются более 1 000 крупных компаний. В их числе «Новолипецкий металлургический комбинат», «Северсталь», «Евроцемент» и другие. В «Личном кабинете» клиент получает информацию о дислокации груза. Она представлена в разных видах: в таблице, на карте с движением вагонов. Можно следить за выполнением своих заявок и финансовыми потоками. Для прогноза прибытия мы используем машинное обучение на основе истории, сезонности и других факторов.

Процесс подачи заявки на перевозку включает в себя 5 этапов, на каждом из которых вносится детальная информация по маршруту, грузу, объему и графику погрузок, грузополучателях и вагонах.





– За пять лет в команде проекта появилось много экспертов, были привлечены смежные консультанты. Но так было не всегда. Расскажи с чего все начиналось? Точнее, какие люди стояли у истоков формирования команды проекта?

Дмитрий Бохан: У ПГК уже существовал «Личный кабинет», но он требовал обновления. Идея о том, что клиенты хотят получать более современные решения, похожие на привычные инструменты B2C-сегмента, витала в воздухе. Например, удобные фильтры, понятная навигация, знакомые механики работы с интерфейсом.

Когда перезапуск кабинета только стартовал, у нас было несколько активистов, они и продвигали проект. Такие люди могут быть и со стороны бизнеса, и со стороны IT. Но в крупных компаниях IT-блок всегда зависим от бизнеса. Бизнес принимает решение, куда будет развиваться компания. Соответственно, нужно найти поддержку своей идеи, продукта, показать плюсы от реализации и сильную команду разработки.


– Как на практике формируется идея конкретного клиентского сервиса? Вы закрываетесь в офисе и брейнстормите, или ты оформляешь идею, а потом привлекаешь кого-то для прототипа?

Дмитрий Бохан: В случае с «ПГК Онлайн», в частности, с заявкой, руководство компании поставило перед нами задачу: активно продвигать и развивать «Личный кабинет». Мы получили сильную поддержку процесса. После этого совместно с компанией «Ареал» были поэтапно реализованы следующие шаги.

Во-первых, мы собрали потребности от бизнеса. Ключевые контактные лица со стороны ПГК рассказали специалистам «Ареала» о процессе подачи и согласования заявки, потребностях клиентов и компании.

Во-вторых, был определен перечень функций. «Ареал» показали предварительное решение: какой интерфейс, функция закроют каждую задачу клиента и ПГК. Как правило, это mind map, схема, письменное обоснование.

В-третьих, состоялись встречи с крупными компаниями и клиентами, которые делают небольшие отправки. Было важно проверить удобство решения на «живых» пользователях разного уровня, чтобы учесть особенности каждого. В результате появились первые наброски прототипа. А затем «Ареал» на основе материалов всех встреч собрали первый вариант прототипа.

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

Финалом стала защита проекта. Мы совместно презентовали руководству прототип, смету, обоснование и перспективы будущего проекта.

– Ольга, расскажи поподробнее о том, как шла работа по формированию прототипа в «Ареал»?

Ольга Завьялова:

Прототип чаще всего представляет собой черно-белую модель интерфейса. В нем нет акцента на графическом оформлении, только механика, элементы и их взаимодействие. Его главная функция – продумать и показать, как работает интерфейс, выстроить наиболее понятную для клиента последовательность действий. Мы стараемся создать прототип как можно раньше и продолжать сбор требований, проектирование с уже готовой моделью. Это лучший способ вовлечь экспертов в обсуждение.

Дело в том, что людям нравится оценивать наглядно. Ведь проще синхронизироваться в обсуждении, указав на кнопку в прототипе, чем объяснять относительно какого объекта она должна располагаться левее или правее. Таким образом, время на подготовку прототипа компенсируется экономией на обсуждении.


«Рождение прототипа» происходит по следующему сценарию.

Все начинается с установочной встречи. На ней обозначаем конечную цель и краткую вводную, определяем подходы к задаче, этапы проекта и планируем следующие совещания. На установочной встрече каждый примеряет на себя роль и «нужность» для команды. Это влияет на общую мотивацию и вовлеченность.

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

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

– А возможно ли иная последовательность действий при разработке прототипа?

Ольга Завьялова: Да, на практике проект может начаться со второго шага – брифинга и брейншторма. Это возможно, если клиент точно понимает, чего хочет, имеет наработки от предыдущего подрядчика или согласованное технические задание. В силу погруженности в отрасль мы можем оперативно предложить первичное решение и сразу идти «в бой»: собирать детальные бизнес-требования.


В случае с ПГК мы получили бумажную форму заявки и сразу начали прототипировать.




Вариантов интерфейса изначально было несколько. Они родились в бурной дискуссии с бизнес-экспертами ПГК, мы искали варианты сокращения количества полей и упрощения клиентского пути. Например, для некоторых строк ввода появился автокомплит¹. В бумажной заявке клиент прописывал вручную и станцию отправления, и дорогу, и страну. Но в «Личном кабинете» достаточно указать станцию, а остальные данные подставляются автоматически на основе готовых справочников.


Один вариант прототипа стал ведущим и пошел в реализацию. Но! Всегда нужно держать в голове, что прототипирование – это «живой», постоянно движущийся вперед процесс.

Например, пришли дизайнеры со своим видением, и снова стали актуальными вопросы оптимизации интерфейса. Прошло время с внедрения заявки, и опыт использования подсказал новые идеи и выявил дополнительные потребности в справочниках и данных. Или развитие внутренних информационных систем ПГК позволило автоматизировать более сложные процессы. Мы постоянно продолжаем искать пути для улучшения.

«Цифровые» преимущества

– Какие вспомогательные средства есть у прототипа? И отличается ли жизненный цикл цифровой заявки на предоставление вагонов от бумажной?

Ольга Завьялова: Бумажная форма показывает только отправную точку заявки: поля для заполнения. Но у заявки есть жизнь дальше: уточнение, согласование, корректировка, удаление.

Хочу особо подчеркнуть: цифровая заявка и бумажная имеют разные «жизненные циклы». Это нужно четко проговорить и зафиксировать, чтобы выстроить рабочую архитектуру онлайн-подачи.



– Возвращаясь к вопросу о спорах внутри прототипа. Предположим, что есть противоположные позиции дизайнера и проектировщика. Один говорит, что этапы заполнения заявки должны быть реализованы через «степпер» (каждый этап заполнения заявки на отдельной странице), а другой – через страницу с выпадающими разделами. Каждый стоит на своем. Как решаются споры? Кто принимает финальное решение?

Дмитрий Бохан: На каждой встрече рождается миллион идей, даже в согласовании кусочка заполнения заявки. Если не получается принять окончательное решение, то я «торможу» обсуждение до конца встречи. Возможно, компромиссный ответ со временем родится сам.

Второй путь – это задать вопрос напрямую клиенту ПГК: «Как вам удобнее заполнять заявку?». Так как «Личный кабинет» в первую очередь для бизнеса, то его опыт и есть самое оптимальное решение.

– То есть вы тестируете продукт на востребованность с помощью потенциальных потребителей или так называемый Customer Development?

Дмитрий Бохан: Совершенно верно. Мы спрашиваем, что хотят видеть пользователи, что нужно изменить. При этом стараемся привлекать разных по масштабу клиентов, чтобы понять общую потребность, а не узкоспециализированную.


– Если сравнивать процесс заполнения бумажной и цифровой заявки, то какова будет разница по срокам?

Дмитрий Бохан: Через «Личный кабинет», согласно нашим замерам, заполнить заявку получается в 3-4 раза быстрее. Экономия времени достигается за счет того, что менеджеру ПГК не нужно вбивать заявку в систему, она сразу туда попадает и идет в работу. Также есть возможность полностью скопировать предыдущую заявку, изменив только период.

Помимо экономии времени цифровизация процесса дает прозрачность. С одной стороны, клиент видит весь объем поданных документов, статусы, согласованные заявки. С другой, руководству ПГК доступна полная картина: сколько запросов по разным направлениям перевозки отправлено, сколько по факту поехало.

Для принятия стратегических решений цифровизация процесса подачи заявки огромный – огромный плюс. Например, если менеджер с логистами понимают, что перевозка не оптимальна или не может быть выполнена, то сразу могут дать клиенту аргументированный ответ.

Синхронизация подрядчиков

– Получается, что есть четыре стадии создания прототипа. Первая – переложить внутренний процесс в цифру как есть. Вторая – обсудить с бизнесом прототип, упростить и найти оптимальный формат. Третья – аналитика: уточнить у пользователей насколько инструмент удобный. Четвертая – при необходимости возобновить общую дискуссию об оптимизации в момент дизайна. Но когда же в этом процессе появляются технические специалисты?

Дмитрий Бохан: Когда согласован верхнеуровневый прототип. Технические специалисты объясняют, возможно ли реализовать то, что мы спроектировали. И чем раньше мы поймем ограничивающие факторы, тем проще будет согласовать прототип. Но обычно еще на стадии рождения идеи обсуждаются и технические моменты.

Ольга Завьялова: Да, все верно. В мои задачи входит описание предварительных технических требований. В частности, какую информацию «Личный кабинет» будет принимать из систем ПГК, какую передавать, какие промежуточные статусы будет запрашивать. На этапе обсуждения задачи с бизнес-экспертами можно получить общие сведения о наличии данных, автоматизированных процессах, потенциальных сложностях. Уже после подготовительной работы мы выходим на обсуждение с техническими специалистами ПГК.

– В какой момент пишется техническое задание?

Ольга Завьялова: Техзадание появляется после полного согласования прототипа и схемы бизнес-процесса. Так как оно необходимо программистам.

Многие особенности реализации бизнес-экспертам очевидны: они понимают задачи и знают историю работы над проектом. А для разработчиков все устные договоренности фиксируются в техзадании. Его задача – описать внутреннюю логику интерфейсов, переходы между ними, сценарии использования, проверку данных, интеграции, нестандартные случаи. То, что на прототипе показать невозможно, а учесть нужно.


Дмитрий Бохан: Дело в том, что сервис «ПГК Онлайн» разрабатывают минимум две команды. Первая – дорабатывает мастер-систему SAP², в которой хранятся производственные данные. Вторая команда – это сотрудники «Ареала». Они занимаются макросервисами и поднятием клиентских сценариев на стороне «Личного кабинета».

И сложность заключается в том, чтобы синхронизировать работу двух подрядчиков и избежать при этом потери данных. Все должны быть в курсе доработок обеих систем. Поэтому техническое задание для личного кабинета согласуется с командой SAP. А техническое задание на доработку SAP согласуется с командой «Ареал».

Чек-поинты на пути к рабочему прототипу

Если подвести итог, то рабочий процесс превращения бизнес-идеи в проект удобного интерфейса можно представить следующим образом.

На этапе идеи привлекаются активные сотрудники. Они проводят ряд встреч, общаются между собой и с представителями бизнеса на разных уровнях, активно задействуют подрядчика. Из этих «евангелистов» складывается команда, которая потом ведет весь проект.

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

В следующей статье мы расскажем о дизайне интерфейсов на основе UX-исследования⁴.

Материал подготовлен компанией «Ареал»

---

¹Автокомплит - это когда пользователь начинает вводить запрос в строку поиска, а система показывает ему найденные совпадения.

²SAP – это автоматизированная система, предлагающая комплекс решений для выстраивания общего информационного пространства на базе предприятия и эффективного планирования ресурсов и рабочих процессов.

³Это человек, который управляет созданием продукта и отвечает за то, что получится в результате.

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