Разработка сайта для «Клиника Фомина»

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

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

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

2.Дизайн

3.Фронтенд (вëрстка и Vue.js)

4.Программирование («1С-Битрикс: Управление сайтом») 

5.Интеграции с системами («1С:МИС» и АСЯ)

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

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

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

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

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

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

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

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

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

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

В рамках дизайна наша задача была адаптировать визуал. Мы сделали техническую адаптацию версий для планшета и десктопа. Важный момент — необходимо было учесть специфику перехода от мобильной версии, сделанной в стиле 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С со стороны системы клиента.

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

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

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

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