Новый сайт клиники Доктор Профи - забота о пациентах и кратный рост метрик

Рассказываем, как мы сделали проект, которым реально пользуются пациенты и клиника. От исследования рынка до интеграции с МИС. Полный кейс редизайна медицинского сайта.

На связи продакшн Верно и наш внутренний юнит разработки медицинских проектов MEDDEV.

Медицинский центр “Доктор профи” - это одна из крупнейших клиник в регионе, которая активно развивается и расширяет направления деятельности.

• 100+ квалифицированных врачей
• 50+ направлений деятельности
  
• 6 корпусов в Тамбове
  
• 1 собственная лаборатория
  

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

Задача:

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

Изначально задача была обновить публичную часть сайта и сделать его удобным для пациентов:

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

Однако, почти сразу, список задач расширился:

Сделать интеграцию сайта с МИС (медицинская информационная система):

• Интегрировать направления и услуги;
• Интегрировать врачей и их прайсы;
  
• Интегрировать прайсы и категории лаборатории;
  
• Реализовать общую онлайн-запись;
  
• Сделать редизайн личного кабинета.
  

Ключевой нашей целью было сделать самое удобное решение для пациентов.

Ключевые проблемы, выявленные в ходе анализа:

• Сломанная навигация и структура;
• Отсутствуют целевые действия, там где должны быть (карточка врача, прайс, симптомы);
• Отсутствие нормальной адаптации под мобильные устройства (хедер на 40% экрана и тд);
• Устаревший дизайн;
• Пользователи не читали ничего на сайте, глубина просмотров была около 1,73, а отказы в некоторые периоды достигали 30% (некоторые разделы более 60%);
• Конверсия в ключевые разделы была низкой.

Просматривая вебвизор, мы столкнулись с тем, что пользователь приходит на сайт, пытается совершить действие, у него не получается и он уходит. Если пользователь уже разобрался в сайте, он идет в запись и записывается на поддомене. Причем количество записей нам не известно, так как цели в метрике отслеживали только клик по кнопке “Записаться”.

Мы сделали замеры всех доступных метрик и перешли к исследованию.

• Разработали анкету и провели опрос пациентов клиник Тамбовской области, опросив более 50 респондентов;
• Разработали сегменты целевой аудитории;
• Свели отчет по получившимся данным;

Разработали CJM - да, прям реальную CJM, полезную и функциональную.

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

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

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

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

Артефакты этапа:

• Анализ старого сайта с указанием на проблемы и их решение;
• Отчет по аналитике старого сайта;
• Сравнительная таблица структуры и функционала конкурентов;
• Конкурентный анализ - отчет;
• Данные опроса пользователей;
• Сегменты целевой аудитории;
• CJM.

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

С точкой А все стало понятно, теперь рисуем точку Б.

Важный этап, который позволяет еще до старта понимать и тестировать решения. Именно на нем заказчик предложил сделать интеграцию с МИС, что правильно, так как данные заполняются в МИС, и это позволит минимизировать ручной труд на поддержку актуальности информации.

Так как проект сам по себе большой и подразумевает развитие и поддержку, после определения концепции и дизайна основных страниц мы разработали UI-Kit

Мы выносим все ключевые элементы - это позволяет масштабировать и развивать проект.

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

Макеты и подход

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

Нужно оговориться: адаптируем макеты мы на этапе дизайна, чтобы ускорить разработку и иметь предсказуемый результат. В проекте каждая страница имеет разрешение: 1920px, 1280px, 768px, 360px. Мобильной версии мы уделили отдельное внимание, напомним, что мобильный трафик более 80%.

Артефакты этапа:

• UI-Kit;
• Макеты в Figma.

Главная страница выполняет функцию разводящей и направляет пользователей по основным разделам: направления, врачи, отзывы и информация о клинике.

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

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

Мы продумали движение пользователей по разделам и логику поведения на разных устройствах.

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

Тап-бар и мобильная навигация

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

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

Важный момент, что в медицинской сфере мобильный трафик более 80%.

Поиск работает по всему сайту, с подсказками и указанием разделов для удобства пользователей.

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

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

Мы полностью изменили подход и логику всего раздела.

1. Листинг врачей.

Теперь на сайте в общем разделе можно:

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

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

2. Карточка врача

Карточка врача теперь стала функциональной и достоверной для пользователей.

Что мы показываем пользователю на первом экране:

• ФИО и специализацию врача;
• Кого принимает: взрослых и детей и от какого возраста;
• Где принимает (у клиники 6 корпусов);
• CTA - Записаться, на случай, если пользователь искал этого врача и уже знаком с остальной информацией.

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

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

Очень, очень мало клиник могут похвастаться подобным функционалом. Причины нам не известны) Обычно все ограничиваются стандартными CTA.

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

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

По итогам работ мы добились роста популярности раздела на 344,45%. А записи из карточки врача составляют уже 1/3 от всех записей.

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

Для пользователя навигация по таким разделам тот еще квест. Не удивимся, если опытные прибегают к ctrl+f поиску.

В общем листинге можно просматривать разделы, каждый из которых имеет "товар" и участвует в продвижение. Мини-карточка анализа содержит всю необходимую ключевую информацию:

• Срок выполнения;
• Срок CITO;
• Материал;
• Подготовка;
• Стоимость и стоимость срочного анализа.

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

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

открываем запись, выбираем направление, выбираем врача, выбираем время и записываемся.

Мы переработали дизайн в единой стилистике, сверстали и отдали верстку на внедрение команде МИС. После чего внедрили онлайн-запись внутрь сайта. До этого она была на отдельном поддомене.

Мобильная версия.

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

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

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

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

Сайт на 80% интегрирован с МИС (Медицинская информационная система). Наша задача была улучшить достоверность информации и администрирование сайта, чтобы администратор, обновив цену в МИС, получил изменение на сайте и не забыл о том, что нужно менять информацию в двух местах.

Какие интеграции сделаны:

• Интеграция списка врачей по специальностям. Забираем ФИО и направления, остальное заполняем руками на сайте;
• Интеграция прайсов по направлениям;
• Интеграция прайсов по врачам;
• Интеграция анализов и стоимости;
• Интеграция онлайн-записи в карточку врача;
• Интеграция общей онлайн-записи.

При обновлении сайта мы учли старую структуру и Meta, которые частично перенесли (где-то они отсутствовали на старом сайте). Подготовительные работы позволили сайту не упасть по трафику, а лишь немного скорретироваться в первый месяц обновления. При обновлении мы сделали карту редиректов, так как немного изменилась структура и ЧПУ.

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

Для большинства разделов перед запуском мы заложили шаблоны по формированию Tittle и Description, особенно это касается детальных страниц услуг и анализов, так как их более 2 000.

Поведенческие метрики улетели в космос, а количество заявок растет каждую неделю.

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

Важно не только сделать проект, но и обучить работать с ним. Мы собрали исчерпывающую инструкцию по проекту и провели обучение. Что и как мы заполняем в административной панели, а что тянется из МИС и требует повышенного контроля.

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

На старом сайте замеряли только переходы на страницу записи, мы же настроили Java-события на запись в карточке врача и в общей записи. Данные по записям находятся под NDA, но можем сказать что количество записей выросло сильно. Все данные приведенные в кейсе взяты из метрик и показаны в относительных числах, в виде результата, который мы получили с обновлением сайта.

Заказать разработку сайта, веб-сервиса или мобильного приложения:

Телеграм-канал в котором мы показываем внутреннюю кухню и делимся новостями: