Разработка сайта для сети медицинских клиник "Ниармедик"

Заказчик«Ниармедик» — сеть медицинских клиник, которая оказывает широкий спектр амбулаторно-поликлинической помощи для детей и взрослых. В 2020 году объединилась с сетью «Доктор рядом», сохранив бренд.ЗадачаПроблемные интервью выявили основные направления для работы: автоматизация процесса записи на прием, повышение конверсии посетителей сайта в пациентов клиники, слабая адаптивная версия.

О ПРОЕКТЕ

С группой компаний «Ниармедик» мы сотрудничаем с 2015 года, и за это время успели выпустить и развить несколько проектов, связанных с медицинским препаратом «Коллост».

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

Проблемные интервью выявили основные направления для работы:

1. Автоматизация процесса записи на прием

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

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

2. Повышение конверсии посетителей сайта в пациентов клиники

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

3. Слабая адаптивная версия

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

АНАЛИТИКА И ПРОЕКТИРОВАНИЕ

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

2050dcfea659ac63ca426a65596bdfcd.png

На основе полученных данных собрали структуру проекта, позволяющую максимально коротким путем решить основные «боли» клиента:

  • Поиск врача: по направлению (аллергология, гинекология); по болезни или симптомам
  • Поиск конкретного врача (пациент уже знает, к кому обратиться)
  • Запись на прием к конкретному врачу или по направлению
  • Поиск ближайшей клиники
  • Доступ к востребованной информации (комплексные программы, акции)

ceafd86b34390a20b7c533312697a3b8.png

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

Так, главная страница проекта превратилась в набор блоков, помогающих быстро определить потребность клиента из сценариев выше и решить её коротким путем.

Для качественной интеграции сайта с Медицинской информационной системой мы написали технические требования для специалистов со стороны МИС клиента.

ВИЗУАЛЬНАЯ КОНЦЕПЦИЯ

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

7d4e974c17481f1d3216da5e9f418036.png

Мы разрабатывали сайт, который проводит клиента медцентра «за руку» от главной страницы до выбора нужной ему услуги и завершения записи на прием.

4d066072f02b663749120f5a86f989c4.png

Теперь всего за 4 шага пользователь записывается на приём. В удобной форме он выбирает услугу, клинику, врача (ориентируясь на время посещения и стоимость приёма) и оставляет свои данные. Всё, посетителя ждут в медцентре!

c3e6f44d8b471c0a5620b3dd509ec14a.png

Если клиенту нужна комплексная программа обслуживания для себя или ребенка, он выбирает нужную программу и сразу может сравнить все варианты (комплект услуг и цены).

b8e0e9e8fdb369ee185216c9e1f7a3da.png

Список врачей в виде карточек легко воспринимать. Каждая карточка сходу дает посетителю самую важную информацию.

15e9542c6b511126d6be3c4ea4830eff.png

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

ba7a82062c324b7adedd1245b0da871d.png

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

844b579c7048c11813ae1ceb0bf787fb.png

Мы настроили простой поиск среди массива медицинской информации (специализаций, диагнозов, врачей и услуг). В строку поиска посетитель может ввести специализацию врача, а может набрать свою «боль» (нервы, уши, голова, температура). Даже набивать всё слово нет необходимости, система подберет результаты по начальным буквам.

828ce242e230aff750221dd6d57db2d8.png

Умный поиск работает и на странице врачей.

477873150d4415cb40a03e69d6c79e7a.png

АДАПТИВ

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

57b6564b3f40993d1652deeb549d324e.png

РАЗРАБОТКА

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

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

ИНТЕГРАЦИЯ С МИС

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

Кроме того, существовала гипотетическая возможность перехода на другую МИС в следующем году.

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

f3fef521633fa3c3a2d20ae929472089.png

ВСЁ ПРОПАЛО…

На финальной части проекта пришли неожиданные новости — сеть клиник «Ниармедик» объединялась с сетью «Доктор рядом».

Сливались процессы, информационные системы, отделы маркетинга. И мы с клиентом оказались в ситуации, когда у объединенной компании оказалось сразу три сайта: старая версия, новая (но еще не опубликованная), и действующий сайт сети клиник «Доктор рядом».

…НА САМОМ ДЕЛЕ — ВСЁ НОРМАЛЬНО!

Команда рассматривала два основных варианта цифровой стратегии: оставить два независимых сайта или один — «объединенный».

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

Оформление сайта не соответствовало новому фирменному стилю объединенной сети.

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

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine