Доктор Профи. Разработка сайта многопрофильной клиники

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

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

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

Задача:

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

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

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

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

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

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

1. Сделать редизайн личного кабинета.

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

Старый сайт

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

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

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

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

Исследование и аналитика

Анализ целевой аудитории

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

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

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

Анализ конкурентов

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

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

Выводы по итогам исследования

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

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

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

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

Проектирование и концепции

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

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

Дизайн

UI-kit

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

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

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

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

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

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

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

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

Функционал и решения

Главная

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

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

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

Навигация

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

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

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

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

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

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

Поиск

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

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

Врачи

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн-запись в карточке врача

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

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

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

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

Стоимость услуг

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

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

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

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

Анализы

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

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

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

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

Общая онлайн-запись

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

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

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

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

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

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

Личный кабинет

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

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

Интеграции

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

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

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

SEO

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

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

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

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

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