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

Аудит, дизайн и поддержка
9 продуктовых сайтов MAYOLY

ООО «Майоли Фарма»

Клиент

Продвижением продукции MAYOLY занимаются бренд-менеджеры фармкомпании. Каждый из них курирует свой препарат: разрабатывает его CX-стратегию во всех каналах взаимодействия с клиентом.

Одним из таких способов коммуникации является веб-ресурс продукта.

Контекст

В России MAYOLY представлен широкой линейкой лекарственных средств и БАДов. Именно эта компания реализует всем известную Смекту, а также Хофитол, Фортранс, Метеоспазмил, Танакан, Эзиклен, ПробиоЛог.

MAYOLY — международный фармацевтический бренд
с более чем 100-летней историей. Специализируется на разработке препаратов в области гастроэнтерологии.

С 2011 года

филиал в РФ

> 65% продаж

на мировых рынках

100+ стран

присутствия компании

От нас требовалось усилить команду бренд-менеджеров MAYOLY техническими компетенциями и взять на себя поддержку
их продуктовых сайтов.

Среди них: четыре — на платформе 1С-Битрикс, два — на WordPress, а также самописные решения на JS + React.
Веб-ресурс для Фортранса сделали
наши разработчики.

Началом сотрудничества стал аудит кода
и интерфейсов. После проверки нам
передали на поддержку и развитие пять сайтов, потом — еще три, и один мы создали с нуля.

Стек и сайты

1С-Битрикс

WordPress

Самописные

PHP 8.2 / JS

PHP / JS / React

JS / React

MAYOLY

+

Задачи и вызовы

Платформы на 1С-Битрикс разработаны в режиме многосайтовости:
по два сайта на одной лицензии.

Рядом с каждым изображением препарата необходимо размещать его
лицензионный номер и следить за его актуальностью.

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

Все тексты имеют подтверждение в научной литературе и отсылку в виде
сносок к первоисточникам.

Особенности

Особенности проекта:

Роадмап Далее

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

Два года работаем над комплексным развитием сайтов: разработка, редизайн, seo-оптимизация

Подключили сайты к мониторингу 24/7

Совместно с заказчиком утвердили план поэтапного улучшения каждой платформы

Провели UX-анализ и дали рекомендации по юзабилити

Решения

Пример из аудита кода:

«Рекомендуется провести проверку
в Lighthouse сайта с отключенными плагинами, не влияющими на функционал, оценить влияние плагинов. Оставить только те, без которых оценка производительности не ухудшается.»

Основной трафик в мире по версии Similarweb идет именно с мобильных устройств. В России Statcounter фиксирует 40-45% растущего мобильного трафика.

И, учитывая, что доля мобильного трафика
в России постоянно растет, мы предложили сфокусировать внимание на исправление верстки.

UX-аудит

После выявленных рисков прописали рекомендации
и возможные пути
устранения дефектов.

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

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

Технический аудит

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

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

Безопасность
и мониторинг 24/7

Платформы на WordPress и 1С-Битрикс находятся на разных серверах. Так устроено, чтобы исключить возможность компрометации всех ресурсов в случае атаки одного из них.

Если контент на сайте
меняется более чем на 30% одномоментно, то это сигнал
о возможной атаке.

Внедрили удобные пользовательские сценарии, улучшили навигацию
и визуальную подачу контента.

Мы сделали глобальный редизайн сайтов Хофитол, Метеоспазмил, Танакан. У Смекты отрисовали новую homepage и создали страницы препаратов: Смекта-порошок
и Смекта-раствор.

После редизайна /

До редизайна /

Редизайн и обновление интерфейсов

Важно — цветовая гамма сайта должна соответствовать дизайну упаковки препарата Фортранс.

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

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

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

Разработка

Чтобы привлечь и удержать
внимание пользователей,
им нужно помочь — предложить
удобные сервисы и улучшающий
UX функционал. С заботой
о клиентах MAYOLI мы внедряем
новые решения и следим, чтобы
все работало как надо.

Функциональные доработки

Ручная актуализация ссылок — поскольку аптеки могут менять URL-адреса товаров, мы ежемесячно проверяем
и обновляем ссылки.

Квиз для подбора препаратов — на сайте Хофитола пользователь отвечает на вопросы и получает рекомендацию по выбору (таблетки или раствор). Система автоматически направляет его в аптеку с нужной формой препарата.

Сервис Ютека — обновление кода интеграции по API для отображения аптек, где можно купить препараты.

Игровая механика для Танакана
— страница с простыми играми (лабиринты, поиск слов и отличий) для вовлечения пользователей.

Игровая механика для Танакана

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

Решение проблем
с почтовыми уведомлениями

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

Оптимизация серверов

Сейчас мы регулярно публикуем
на сайтах экспертный контент,
который нам передают SEO-
специалисты. Все тексты и визуал направлены на повышение индексации сайтов в поисковых системах и привлечение органического трафика.

SEO-оптимизация и контент

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

Работа над проектом
продолжается — сотрудничество продлено на 2025 год.
В наших с MAYOLY планах:

Выводы и планы на будущее

Результаты

Переработать дизайн сайта ПробиоЛог.

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

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

Все сайты стали более
защищенными, ни одна попытка взлома не увенчалась успехом.

Устранены уязвимости

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

Мы продолжаем развивать
digital-направление клиента,
улучшая пользовательский опыт
и обеспечивая стабильную
работу сайтов.

Мобильные версии теперь работают корректно.

Улучшена
адаптивность

После аудита и первых оптимизаций увеличилась средняя скорость открытия страниц.

Повышена
скорость
загрузки