Merck «Инвокана»: как лекарство перестало быть скучной инструкцией

Фармацевтический сайт. Пример того, как геймификация работает в онлайне. Звучит как приговор к зевоте. Стена мелкого текста, таблица дозировок, предупреждения на пол-экрана. Люди открывают такие страницы по необходимости и закрывают при первом удобном случае.

Merck поставили задачу иначе. Информация о препарате Инвокана может подаваться не проще (всё-таки медицина), но понятнее. Пациент с диабетом, который ищет данные о лечении, заслуживает нормального объяснения, а не академической монографии.

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

Критичный момент: две аудитории с полярными запросами. Врачу нужны клинические данные и механизм действия. Пациенту: поможет ли, какие побочные эффекты. Один интерфейс обслуживает обоих, и каждый находит своё.

Анимации и 3D-элементы работают на объяснение. Визуализация ингибитора SGLT2 запоминается в разы лучше абзаца терминов.

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

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

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

Отдельная задача: работа с двумя аудиториями. Вместо двух отдельных сайтов (как делают многие фарм-компании) выстроили единый интерфейс, где глубина детализации регулируется самим пользователем. Хочешь верхний уровень? Читай заголовки карточек. Нужны подробности? Раскрой. Нужны ссылки на исследования? Они внутри развёрнутого блока.

3D-элементы и анимации использовали точечно и осмысленно: визуализация действия препарата и навигационные переходы. Каждый анимированный элемент несёт информационную нагрузку. Адаптивная вёрстка даёт одинаково комфортный опыт на мобильных и десктопах.