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

О том, как спроектировать новую функцию, чтобы клиенты работали с удовольствием

Павел Мелдажис Павел Мелдажис
руководитель группы корпоративных решений «Ареал»




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

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

  • Как формируются требования и рождается прототип клиентского сервиса?

  • • За кем последнее слово в спорах об интерфейсе «Личного кабинета»?

  • • И что нужно прописать в техзадании, чтобы не запутать программистов?

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



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

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

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

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

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



Пример формы заявки в «Личном кабинете» клиента ПГК



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

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

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

Совет №1. Команда с горящими глазами и внутри компании, и со стороны подрядчика, а также поддержка от бизнеса – двигатель проекта. Для создания рабочего инструмента нужна постоянная активная коммуникация, работа в тандеме. Желаемого результата не будет после одного установочного разговора и месяца работы без общения.

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

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

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

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

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

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

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

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

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

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

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

Совет №2. Прототип должен появиться как можно раньше, это помогает в коммуникации и решении спорных вопросов.

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

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

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

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

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

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

Совет №3. Требования для прототипа должны идти от сотрудников компании на разных уровнях и с разными задачами. Так на руках будет целостное представление о бизнес-процессе и понимание, как его перенести в онлайн.

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



Пример прототипа заявки на предоставление вагонов

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

Пример скорректированного прототипа заявки на предоставление вагонов

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

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

Совет №4. Прототип – это «живой организм», он меняется со временем, приходом новых специалистов, появлением новых задач. Это в порядке вещей.

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

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

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

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

«Жизненный цикл» цифровой заявки на предоставление вагона после заполнения на примере движения документа между системами и учетными записями в зависимости от статуса


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Совет №6. Технические особенности нужно продумать во время разработки прототипа. Это поможет на этапе технической реализации не править интерфейсы из-за отсутствия информации.

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

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

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

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

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

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

Работая над созданием удобного интерфейса, помните о 6 слагаемых успеха проекта:

  • 1. Команда. Важна активность и желание участвовать в судьбе проекта.

  • 2. Прототип. Он должен появится как можно раньше, это помогает в коммуникации и решении спорных вопросов.

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

  • 4. Гибкость. Прототип – «живой организм»: он меняется со временем, приходом новых специалистов, появлением новых задач.

  • 5. Пользователи. Они главные эксперты в удобстве личного кабинета или его отсутствии. Пусть клиенты участвуют в принятии решений.

  • 6. Информация. Технические особенности нужно продумать во время разработки прототипа. Это поможет на этапе технической реализации не править интерфейсы из-за отсутствия информации во внутренней системе заказчика.



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


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


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

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

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

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

Тэги: Ареал, личный кабинет, IT-сервисы, интерфейс
14.02.2022

Вам интересны самые значимые события отрасли, выставки и мероприятия, конфликты и сделки, интервью и невыдуманные истории коллег? Подпишитесь на рассылку* и будьте в курсе!
Ваше имя*
Ваш e-mail*
*Всего одно письмо в неделю с дайджестом лучших материалов

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

Разместите новостной информер и на вашем сайте всегда будут обновляемые отраслевые новости






Читайте также



Другие статьи по темам

Аналитика ВЭД Таможня Интервью Задача и решение Итоги года Итоги недели Колонка редактора Конкурс Личные трудности Лучшие люди Опыт в помощь Оценка Логизорро Раскопки Складская логистика Фоторепортаж

Возврат к списку

Вверх
Вверх