Волшебная таблетка для «Клиники Фомина»: как сделать медицинский сайт удобным и современным

Искусственный интеллект помогает врачам подбирать назначения — один этот факт отражает прогрессивный подход медицинского сервиса. Каким должен быть сайт у такой клиники? Рассказываем и показываем на примере проекта для «Клиники Фомина».

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

Запись к специалисту, сквозной поиск по сайту, геотаргетинг — федеральной сети многопрофильных клиник «Клиника Фомина» требовался быстрый и полноценный инструмент коммуникации с пользователями.

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

«Клиника Фомина» — федеральная сеть, сегодня под брендом работает 20 медицинских центров с собственной IT-инфраструктурой в 12 городах России. У клиник есть свои лаборатории, новейшая аппаратура, а подход компании основан на доказательной медицине. Специалисты «Клиники Фомина» — это доктора и кандидаты медицинских наук. Они пишут научные статьи, преподают в университетах, сами учатся в Европе и США.

Основатель сети — Дмитрий Фомин — делает ставку на технологичность. Например, компания использует автоматизированную систему АСЯ, которая упрощает для врача заполнение формы с назначением и рекомендациями для пациентов. Нас вдохновил прогрессивный подход бренда, поэтому мы с большим интересом приступили к работе.

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

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

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

Вначале мы структурировали задачи и поделили весь процесс на этапы:

• Предпроектная подготовка и разработка технического задания

• Адаптация дизайна

• Frontend-разработка на Vue.js
  

• Backend-разработка на базе 1С-Битрикс
• Интеграции с системами (1С/МИС и АСЯ)

• Базовая SEO-оптимизация и подготовка сайта к вводу в эксплуатацию и релиз

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

Мы выделили несколько важных пунктов и предложили решения:

• Более 85% аудитории заходит на сайт с мобильного телефона, поэтому мы выбрали метод Mobile First. Мобильный трафик также повлиял на разработку мобильного дизайна в стиле Single Page Application. Не просто адаптивный дизайн, а очень похожий на микросервис приложения, где любые действия проходят максимально бесшовно.

• Основная точка притяжения и лидогенерации — запись на приём. Форма должна быть максимально адаптивной, а страница — выдерживать большие нагрузки. Поэтому было принято решение программировать такие блоки на Vue.js.

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

• Сайту нужна дальнейшая поддержка и ресурсы со стороны контент-менеджмента. Поэтому для бэкенда был выбран «1С-Битрикс». Это, с одной стороны, очень гибкая система, которая даёт возможности для решения практически любой задачи с учётом расширения функционала в дальнейшем. С другой — шифрованный обмен данными обеспечивает высокий уровень безопасности. Это важно для сервиса, на котором располагается большое количество персональных данных. Ещё один плюс — систему легко администрировать, для этого не требуется специальное дополнительное образование

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

В рамках дизайна наша задача была адаптировать визуал. Мы сделали техническую адаптацию версий для планшета и десктопа. Важный момент — необходимо было учесть специфику перехода от мобильной версии, сделанной в стиле Single Page Application, на брейкпоинты планшетной версии и ПК, которая, в свою очередь, должна была быть максимально понятной и традиционной для веба.

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

Структурно страница поделена на следующие блоки:

• геотаргетинг — автоматическое определение города и перевод пользователя на страницу нужной клиники, страницы городов находятся на поддомене;

• система сквозного поиска по сайту;
  

• навигационное меню с основными разделами;
• приветственный слайдер;
• важные категории услуг, разделённые по сегментам целевой аудитории (мужчинам/женщинам/детям);
• лучшие специалисты — здесь указаны расценки и добавлена возможность быстро записаться на приëм;
• акции клиники;
• преимущества сети клиник;
• статьи в крупных СМИ;
• галерея, где пользователь может познакомиться с клиникой;
• география сети — на карте указаны города и клиники по всей стране;
• контакты, где есть удобные заметки «Как добраться» или «Как найти клинику»;
• важная техническая информация и ссылки на приложение.

Мы также проработали все необходимые страницы сайта:

1. Сквозная адаптивная форма записи пациентов к врачу с фильтрацией и выбором адреса клиники, даты приёма, специализации и других параметров.
2. Каталог услуг с направлениями. Для ключевых услуг созданы уникальные промо-лендинги с программами, формами записи, врачами, акционными предложениями.
   
3. Каталог комплексных программ и подробная страница с фильтрацией по полу и возрасту с формой обратной связи.
   
4. Каталог врачей с фильтрами и сортировкой, а также возможностью записаться на приëм.
   
5. Полноценная блоговая платформа с фильтрацией и сортировкой, созданная на отдельном поддомене для оптимальной индексации.
   
6. Каталог акций с визуальными эффектами, параллаксом.
   
7. Контентные страницы: о клинике, история, фотогалерея, сотрудничество, лицензии и сертификаты, юридическая информация, этический кодекс, новости, страница 404.
   
8. Формы обратной связи: стать частью команды, ДМС, налоговый вычет, написать директору, задать вопрос.
   
9. Страница с подробными контактами клиники и возможностью построить маршрут.
   

Проект стал для нас интересным и нестандартным опытом с точки зрения фронтенд-разработки. Всё началось с пожелания сделать не просто HTML, CSS, JS, а использовать фреймворк Vue.js в связке с чистым Bitrix, который был бы выполнен в рамках ядра без модификаций. Нужно было сделать современный стек на фронте и обеспечить также адекватную работу в рамках обновлений ядра на бэкенде. Мы хотели соединить преимущества и удобства Bitrix c точки зрения административной панели и UX/UI визуальной части сайта с точки зрения задумок дизайн-команды.

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

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

Запись на приём к врачу — самая сложная из задач в рамках этапа. Запись — не просто форма обратной связи, это полноценный микросервис, напоминающий концепцию Single Page Application.

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

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

Система записи связана с большим количеством актуальных данных, которые должны быстро обновляться. Сайт интегрирован с системой 1С (МИС), также у бренда есть собственная уникальная разработка на основе искусственного интеллекта — АСЯ. Информация должна обновляться в режиме реального времени, ведь ошибки в записи стоят репутации и в результате прибыли. Поэтому мы сделали выбор в пользу Vue.js.

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

Бэкенд проекта было решено разработать на платформе «1С-Битрикс: Управление сайтом», так как это максимально адаптированная и гибкая система, которая решает ряд важных для целей проекта задач.

У платформы много плюсов с точки зрения разработки. Она позволяет сделать практически любой функционал, что важно, ведь сервис будет расти и развиваться. Ещё один фактор — относительная лёгкость интеграции сервиса с внешними системами клиента. Плюсом можно назвать и хорошую систему защиты, что необходимо при большом количестве персональных данных.

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

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

Мультирегиональность. «Клиника Фомина» — это сеть, которая охватывает разные регионы, для каждого нужен был поддомен. Мы разработали специальный функционал для полноценного развёртывания нового города на поддомене со специальной настройкой на сервере. При этом было предусмотрено автоматическое создание всех информационных блоков и конфигурационных файлов для работы с новым сайтом/городом.

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

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

Собственное API позволяет загружать свободные даты для врачей. Это ощутимо снизило нагрузку на 1С со стороны системы клиента.

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

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

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

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

MVP-часть уже работает, сайт получил хорошие отзывы от клиентов. Оценить результат можно здесь — https://fomin-clinic.ru

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

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

Например, уникальная разработка — АСЯ. При первом знакомстве с брендом нас вдохновил подход компании:

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