Задача со звездочкой*

В 2018 году фарм-гигант Allergan планировал захватывать новые рынки: для этого компании требовалось унифицировать платформу b2b-коммерции. Нужна была платформа, которая управлялась бы из единого центра и учитывала специфику каждого региона и типов пользователей.

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

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

За реализацию задачи взялось одновременно несколько крупных международных интеграторов. В конечном итоге заказчик принял предложение от команды Astound Commerce, которая уже имела опыт работы с фарм-индустрией и опыт в реализации b2b ecommerce-проектов.

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

Редакция AIN.UA попросила участников проекта поделиться опытом и деталями работы с глобальным клиентом и как руководили реализацией проекта с Украины.

Американская Allergan — одна из крупнейших фармацевтических компаний в мире, фигурант списка Fortune 500 и лидер в сфере эстетической медицины. Она продает товары и услуги в более чем 100 странах, а ее оценивают в $63 млрд. Allergan Inc. производит продукцию для офтальмологии, неврологии, дерматологии, урологии и хирургии ожирения, а также является первопроходцем в практике увеличения груди и владельцем известного бренда БОТОКС.

Предыстории отношений и архитектура решения

История фармацевтического направления Astound Commerce началась 4-5 лет тому. Тогда к нам обратилась интернет-аптека Vets First Choice по продаже медпрепаратов для домашних животных, которая искала разработчика b2b2c-решения на платформе Salesforce Commerce Cloud (SFCC). Они попросили о разработке системы, которая позволила бы каждому ветеринару создавать и управлять собственным магазином, ценами на товары, обеспечивать prescription management и др.

Команда Astound Commerce на основе консультаций с представителями Salesforce предложила Vets First Choice уникальную структурную модель решения, но так и не заполучила клиента из-за высокой стоимости разработки. Спустя 6-7 месяцев наше предложение трансформировалось в потенциальный use-case для компании Allergan. На тот момент Allergan уже являлся ключевым клиентом Salesforce, использовав специальный пакет дополнительных расширений Viva для разработки лекарств и организации полевых исследований. Наряду с разговорами о комбинированном b2b/b2c-решении, тогда мы впервые обсудили вопрос и о разработке b2b-платформы для заказчика — Allergan b2b Direct.

Первый b2b-проект для Allergan был разработан еще в 2010 году на платформе SAP Hybris. Поэтому наша команда столкнулась с устаревшим решением, за 8 лет существования которого было внесено всего лишь несколько изменений. Перед стартом новой разработки Allergan b2b Direct работал только на десктопной версии без адаптивного инструментария для использования другими устройствами. Тогда как позитивный опыт сотрудничества по разработке b2b2c решения уже демонстрировал возможности SFCC платформы с точки зрения персонализации, управления архитектурой и контентом, масштабируемости и стабильности системы и многое другое.

«Сложность старта с b2b-проектами была в том, что нам приходилось переубеждать команду Salesforce (Sales-менеджеры, Performance-инженеры), что такого рода решения возможно реализовать на их b2c-платформе, — комментирует Стив Коллинс. — Кроме функциональных особенностей платформы Salesforce, клиента также подкупили и сроки разработки, которые по нашим расчетам занимали от 8 месяцев до года по сравнению с редизайном на Hybris».

Так как Allergan представлен по всему миру, мы разработали глобальную roadmap для этого b2b-решения с использованием configuration type items. Поэтому в случае добавления новой страны и новых особенностей b2b-решения для нового региона преимущественно использовались переменные параметры (configurable parameters). В дальнейшем это позволило добавить несколько других стран, которые раньше не имели Allergan b2b Direct, и в то же время — сократить сроки на разработку.

Наибольшими вызовами в b2b-системе Allergan являлись конечно же технические вопросы, которые требовали некоторых отклонений от обычных процессов. К примеру, весомым отличием в Allergan Direct является различия в типах заказов в зависимости от клиентов или брендов компании. Если говорить о бизнесе Allergan в области пластической хирургии — продажи имплантов, то только тут можно выделить три разных типа потока заказов:

Allergan b2b Direct — уникальная ecommerce-система продажи фармацевтических продуктов онлайн, которая позволяет размещать комбинированные заказы как от имени клиента, так и торгового представителя. Благодаря особенностям SFCC отдел продаж Allergan имеет полную статистику и данные о продажах, поведении покупателей на платформе, и может управлять ожиданиями клиентов.

Рассказывает
Стивен Коллинс, технический директор компании

Все эти взаимоотношения с клиентами и типы заказов нужно было учитывать на этапе создания архитектуры Allergan b2b Direct решения, что и требовало вовлечения всех членов команд и синергии с IT-отделом Allergan.

О том как проходил первичный сбор требований

Последовательно это выглядело так:

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

Рассказывает
Андрей Зимуха,
бизнес-аналитик компании

Пример того, как работал процесс. Для Allergan Direct нужно было разработать логин пользователя.

При формировании первичных требований заказчик глобально описал эту функцию.

На моменте UX прототипирования оказалось, что в проекте существует 4 типа пользователей с 4 типами счетов. Соответственно, в зависимости от того, какой у пользователя аккаунт, — меняются функции в его кабинете и т.п.

Финальная документация уже полностью отражала требования и представляла собой ТЗ для разработки.

«Пожалуй, Allergan Direct был одним из самых сложных проектов в моей практике. Но в условиях непредсказуемости работы с клиентом нам удалось улучшить и внутренние процессы BA-департамента» — поделился Андрей Зимуха.

Детализация требований через прототипирование и специфика UX

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

С чем были связаны сложности? Структура Allergan — матричная и очень разветвленная: десятки ведомств и департаментов и, соответственно, директоров. Многие нюансы начали всплывать по ходу работы и оказывали кардинальное влияние на логику и внешний вид будущего решения. Из-за большого количества звеньев в управляющей структуре клиента не было SPOC (single point of contact) — одного человека с решающим голосом. Решения принимает совет директоров первого и второго уровня, которым непросто договариваться не только внутри, но и между собой. Многие дискуссии не приносили пользы.

Всех директоров департаментов Allergan объединяет одна особенность: когда дело касается очень массивных информационных структур, им проще воспринимать информацию визуально и на основе этого уже принимать решения. Таких клиентов обычно называют «визуалами». Поэтому дизайнеры приняли решение идти от визуализации к документации; используя UXDD (user experience driven development). Этот подход оказался максимально эффективным в работе с менеджментом Allergan.

«UX-driven approach — визуальный язык общения с клиентом. Его используют в случае, если описание комплексной задачи не дает ясного понимания ни клиенту, ни разработчикам. Создается черновик, в котором команда рассматривает все стороны проекта, дополняя его необходимыми деталями, динамикой, сценариями и детальным контентом до тех пор, пока задача не станет понятной. Как только клиент утверждает концепт, прототип поступает в работу к бизнес-аналитику, который в свою очередь переводит его в функциональную документацию (FSD), во всех деталях описывающей задачу», — рассказывает Игорь.

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

Не менее интересная задача, которую предстояло решить на уровне UX: изменение интерфейса в зависимости от типа и уровня доступа конкретного клиента. То есть — множество пользовательских сценариев. Сам «пользователь» тоже был необычным — это мог быть как один человек, так и целая группа представителей организации (или даже сети организаций). На компоненты интерфейса могли одновременно влиять десятки различных условий. Они менялись в зависимости: от бренда; от страны (на момент разработки это были восемь стран и несколько языков); от типа пользователя системы (будь то отдельный врач или целая клиника), а также десятки других более мелких сценариев.

Hi-Fi Prototype + User Scenarios

Рассказывает
Игорь Якущенко,
Principal UX-designer

«Можете представить себе количество сценариев. В каждой из 8 стран было по 9 глобальных переменных в разных комбинациях, которые зачастую исключали либо друг друга, либо более глубокие подкомпоненты. Технически нам нужно было проработать сложнейшую сценарную логику и создать визуализацию, работающую буквально в режиме реального времени. Любое действие, будь то нажатие кнопки, смена типа пользователя или любого другого флажка — должно была моментально отображать правильную комбинацию, понятную клиенту и команде. И самое главное — решать задачу реального пользователя этой системы. Задачу решили, комбинируя три основных UX-инструмента:

Диаграмма информационной архитектуры (IA). Прояснение архитектуры с клиентом оказалось одним из самых длительных и сложных процессов в практике руководителя команды UX-дизайна;

Диаграмма User Flow (все возможные пути или маршруты пользователя в системе);

Прототипирование. Выражаясь простым языком — это почти настоящий сайт, созданный по принципу объектно-ориентированного программирования — из синхронно работающих друг с другом высокодетализированных прототипов в зависимости от поведения или пути, по которому идет пользователь (user-flow).

«Прототипирование на проекте Allergan Direct b2b удалось частично автоматизировать. К примеру, применяли многослойную мастеризацию: для разных брендов подтягивалась одна и та же структура сайта, но менялась графика и тексты», — объясняет Игорь Якущенко. Это один из немногих проектов, к прототипам которого нужно было создавать кастомный CSS-файл, чтобы поддерживать общую стилистику всех компонентов. Их только на начальном этапе было несколько тысяч.

IA + User Flow диаграмма

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

«У пользователей e-commerce по всему миру — свои «поляризующие» очки, — рассказывает Игорь. — К примеру, для версии сайта США, под запретом были кнопки на всю ширину экрана — пользователи путали их с заголовками и не нажимали на них. Или же юридические нюансы: в США сайт обязан отображать юридическое сообщение о том, что медицинские товары нельзя использовать для самолечения, без рецепта врача. Такое сообщение из-за объема информации занимало бы 30% площади экрана: это огромная текстовая стена на треть сайта. В битве с юристами нашли решение в виде частично скрывающегося блока, который можно открыть по дополнительному нажатию. Законы каждой отдельной страны — еще одна задача, которую мы должны учитывать на уровне разработки UX».

На b2b-сайтах, в отличии от стандартных интернет-магазинов, чтобы совершить покупку, нужно заполнять большое количество текстовых полей. Если этот сложный интерфейс пришлось бы на треть закрыть текстовым сообщением, пользователи испытывали бы серьезный диссонанс, особенно на небольших мобильных устройствах, и, как показывает практика и многолетний опыт работы с аналитикой пользовательской конверсии, уходили бы с сайта, не завершив покупку.

«Реализация UX-части заняла несколько месяцев кропотливого труда. Общими усилиями несколько брендов, стран, языков, типов пользователей, крайне широкий возрастной диапазон, специфическая аудитория медицинской отрасли объединили в одном масштабируемом, удобном на любом устройстве сервисе Allergan Direct. Смело могу назвать эту задачу одной из предельно сложных и интересных за все 15 лет практики», — подытожил UX-дизайнер проекта.

Как создавали визуализацию для b2b-платформы

Перед командой UI-дизайнеров стояла нетривиальная задача — b2b-решение для фармацевтической отрасли. Специфика индустрии накладывает ограничения на визуализацию и в целом к design flow. На начальном этапе провели глубокий анализ поставленной задачи. Нужно было учесть специфичность отрасли и факторов, чтобы определить цельный подход к разработке дизайна и минимизировать влияние рисков в условиях высокой неопределенности.

Allergan b2b Direct ориентирован на специалистов, которые решают широкий спектр задач ежедневно. Важно было обеспечить доступность интерфейса для всех возрастных групп и создать нейтральный look & feel, который позволит сконцентрироваться на действии, а не на визуальном оформлении. К тому же, подобные платформы создают на длительный период и скорее всего не будут проводить редизайн последующие годы. Все это стало дополнительным аргументом не идти на поводу краткосрочных визуальных трендов, а следовать классическим паттернам.

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

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

Рассказывает
Алексей Казновецкий,
senior UI-дизайнер

Будет визуально консистентна на разных устройствах;

Снизит времязатраты на адаптацию дизайна под разные разрешения экрана.

За основу команда взяла подход «атомарного дизайна». Разработав и протестировав UI-компоненты на целых страницах и убедившись, что система достаточно гибкая и задает общий стиль интерфейса, — мы презентовали ее клиенту. Команда Allergan одобрила наш концепт только после очень внимательной проверки на соответствие с визуальными гайдлайнами бренда. И мы приступили к разработке проекта.

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

«Общие впечатления о проекте я могу сравнить с катанием на американских горках: временами все стабильно, а потом — вдруг масштабный CR ( change request — ред.)», — делится Алексей Казновецкий. Так, на завершающем этапе разработки дизайна от клиента пришли требования на изменение внешнего вида дизайн-элементов, которые повлекли за собой обновление 80% всех макетов (более 150!). И поскольку front-end-разработка проходила одновременно с разработкой дизайна, дизайнеры были на грани срыва дедлайнов так как это имело влияние абсолютно на всю команду.

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

Change request — запрос от клиента на изменение какого-то элемента или процесса.

В чем была основная задача менеджера проекта

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

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

«Со стороны команды Astound было необходимо уделить массу времени для качественного стаффинга проекта. Тут я хочу сказать отдельное спасибо нашим функциональным менеджерам, которые смогли подобрать сбалансированную и очень сильную команду, а так же качественно отрабатывали запросы на изменения», — рассказывает Владимир Шишкин.

Постепенно методология разработки решений The Astound Way Solution Framework (AWSF) проходила проверку на интеграцию в культуру ведения проектов Allergan. Проговаривались форматы и правила работы с требованиями, процедуры согласования и внесения изменений, подходы к управлению рисками и работы с зависимостями. Allergan в свою очередь делился своими практиками и шаблонами, ожиданиями и требованиями согласно внутренним правилам и устоям. Ведь проект Allergan Direct был частью интегрированного портфеля клиента.

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

Astound Team Roster насчитывал 56 человек, со стороны клиента — более 30 человек, план коммуникаций доходил до 5 страниц, а библиотека на Confluence приобрела «стройный» структурированный и понятный вид.

После декомпозиции задач проекта, оценки трудозатрат, онбординга команды был согласован первоначальный масштаб и baseline (базовый план развития) проекта. Но работы для проектного руководителя меньше не стало.

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

Опытная команда, формализация процессов внесения изменений на начальном этапе помогла справиться в данной ситуации. Несмотря на 21 изменений в baseline по итогам более 400 запросов на изменения на отрезке в 10 месяцев, — клиент остался доволен результатами. Это было откровенно не просто, но мы приобрели очень ценный опыт работы в подобных условиях.

«Хочу сказать спасибо всем участникам проекта. Как известно проект управляется менеджером, а делается специалистами и вы показали 100-ый уровень мастерства!» — подытожил проектный менеджер Allergan b2b Direct.

Рассказывает
Владимир Шишкин, проектный менеджер Allergan b2b Direct

The Astound Way Solution Framework — адаптированная под e-commerce проекты, авторская методология управления проектами компании Astound.