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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

• Предпроектная подготовка и разработка технического задания
• Дизайн
• Фронтенд (вëрстка и Vue.js)
• Программирование («1С-Битрикс: Управление сайтом»)
• Интеграции с системами («1С:МИС» и АСЯ)
• Базовая SEO-оптимизация и подготовка сайта к вводу в эксплуатацию и релиз

3. Результаты сотрудничества

ПРЕДПРОЕКТНАЯ АНАЛИТИКА

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

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

ДИЗАЙН

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

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

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

ФРОНТЕНД

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

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

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

ПРОГРАММИРОВАНИЕ И ИНТЕГРАЦИИ

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

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

• Мультирегиональность. «Клиника Фомина» — это сеть, которая охватывает разные регионы, для каждого нужен был поддомен. Мы разработали специальный функционал для полноценного развертывания нового города на поддомене со специальной настройкой на сервере. При этом было предусмотрено автоматическое создание всех информационных блоков и конфигурационных файлов для работы с новым сайтом/городом.
• Конструктор контентных страниц. Для всех контентных страниц, а также страниц специальности в каталоге услуг мы разработали свой конструктор, который позволяет управлять активностью блоков как на глобальном, так и на региональном уровнях. Контент-менеджер может выбрать, что будет выводиться в приоритете, а при желании отключать/включать блоки с единым контролем во всех регионах.
• Интеграция с «1С:МИС» и АСЯ. Наша задача была получать и загружать на сайт данные для каталога услуг, информацию о врачах, датах и свободных временных слотах для записи.
• Собственное API позволяет загружать свободные даты для врачей. Это ощутимо снизило нагрузку на 1С со стороны системы клиента.
• Реализовали логику и функционал подсчëта минимальной цены услуг врачей в зависимости от региона.
• Кастомизация административной панели в рамках ядра Bitrix. И для нас, и для клиента было важно, чтобы CMS полностью решала поставленные задачи, но при этом дальнейшее обновление ядра происходило без лишних манипуляций и сбоев.

SEO-ОПТИМИЗАЦИЯ

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

4. Заключение

MVP-часть успешно реализована и внедрена. Эффективность решений подтверждают показатели и метрики.

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

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

Например, уникальная разработка — АСЯ. При первом знакомстве с брендом нас вдохновил подход компании: «Мы верим, что будущее за IT-технологиями. Наша система, которую врачи нежно именуют АСЯ, задумывалась и реализуется для помощи специалистам. Работает это так: в неë входит база знаний, которую подготовил наш экспертный отдел, с актуальными клиническими рекомендациями и лучшими медицинскими практиками на разные случаи жизни, и сейчас мы учим АСЮ подсказывать врачу оптимальные, с доказанной эффективностью и необходимостью диагностические и лечебные процедуры в соответствии с тем диагнозом, который он ставит».

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

Заславский Никита Павлович

Исполнительный директор, Магвай

Для нас это очень важный проект! Последние 5 лет для студии «Магвай» медицина стала одним из ключевых направлений. Сотрудничество с медцентром «Клиника Фомина» — следующая ступень, которая помогла усилить наши компетенции в этой сфере. Несмотря на то, что студия «Магвай» известна своими топовыми решениями в области дизайна, в нашей команде есть специалисты фронтэнд- и бэкэнд-разработки высокого уровня. Этот проект дал нам возможность показать, как много мы знаем и умеем. Это больше, чем просто сайт медицинской компании, скорее медицинская платформа, которая будет развиваться и решать задачи клиента. Использование фронтэнд-фреймворка Vue.js, а также кастомных разработок на базе Bitrix решило многие задачи команды клиента. Когда нужен был тот или иной сложный функционал, мы не рассуждали в духе «это не реализуемо». Мы можем всë, и проект «Клиники Фомина» наглядно это доказывает.