Ниже расскажем, как мы создали корпоративный сайт медицинской клиники с нуля на Битрикс. Объясняем, почему красивый дизайн — только часть успеха. Описываем весь процесс: от выбора CMS до написания текстов, разработки дизайна, вёрстки и интеграции. Узнаете, как создать сайт для клиники, который не только удобен и привлекателен для пользователей, но и приносит продажи.
Клиент — частная клиника дерматокосметологии в Липецке. Сейчас там проводят разнообразные медицинские процедуры, однако со временем планируют запустить свою линейку лечебной косметики. Так что основной запрос клиента был следующим: создать конверсионный корпоративный сайт, который впоследствии можно было бы трансформировать в интернет-магазин. Решили делать сайт с индивидуальным дизайном. При разработке опирались на сайты федеральных медицинских центров.
- Цель: создать конверсионный корпоративный сайт
- CMS: Битрикс
- Дальнейшая трансформация сайта в интернет-магазин лечебной косметики
Дальше пошагово расскажем, как мы решали эту задачу, учитывая все условия.
Шаг 1. Семантическое проектирование
Самое главное в будущем успехе сайта – создать его изначально под текущие потребности рынка. Поэтому разработка начинается с детальной аналитики рынка и сбора спроса по тематике.
Проанализировали сайты конкурентов: федеральных и частных медицинских клиник. Важно было понять, как пользователи ищут информацию и выбирают медицинские центры.
На основе клиентского спроса разработали структуру сайта:
Конечно же, начали с создания страниц «Главная» и «О клинике»:
Клиника проводит 2000 анализов, поэтому для удобства пользователей надо было их правильно структурировать. Хотите попробовать упорядочить 2000 медицинских анализов? Честно скажем, было сложно, привлекали медиков и экспертов. Проводили custdev среди пользователей, чтобы структура была понятна обывателю.
В итоге реализована фильтрация по тегам: органы, системы и болезни. На сайте это выглядит так:
Кроме страницы с лабораторными исследованиями есть раздел «Услуги и цены». В нем процедуры поделены по областям медицины, на которых специализируется клиника. Это также очень удобно для клиента, который ищет информацию по волнующему его вопросу:
Также был предусмотрен раздел «блог», в котором специалисты клиники размещают статьи для привлечения клиентов по информационным запросам для выстраивания экспертных продаж:
Для медицинской ниши крайне важно было создать страницу «Отзывы», чтобы пользователи видели, что специалисты клиники качественно выполняют свою работу и им можно доверять. Помимо блока с комментариями клиентов:
создали форму для того, чтобы посетители могли оставить отзыв прямо на сайте:
В структуре сайте предусмотрели раздел «Лечебная косметика», который будет впоследствии заполняться специалистами клиники (после запуска продукции), но на данном этапе эта страница скрыта:
Шаг 2. Расширили семантическое ядро
Составили семантическое ядро для других страниц. Обычно мы создаем его для тех страниц, для которых пишем тексты. Вот, например, несколько ключевых запросов для страниц «Главная», «О компании», «Лабораторные исследования и анализы»:
Однако в данном случае ключевые запросы были дополнительно подобраны еще для 85 страниц, чтобы клиент мог самостоятельно заполнять свой сайт, используя рекомендованные нами ключи.
Шаг 3. Написали тексты
Помимо того, что тексты оптимизированные и продающие, они также требовали особого внимания из-за сложной тематики: должны были быть корректными с медицинской точки зрения. Тут подключали информацию от экспертов, чтобы сайт соответствовал EEAT-нормам, так как это YMYL-тематика, т. е. важная часть жизнедеятельности человека, поэтому к текстам у поисковиков особые требования.
Мы заполнили страницы: «Главная», «О клинике», «Лабораторные исследования и анализы», «Трихология», «Подология» и «Налоговый вычет».
Также надо сказать, что клиент самостоятельно создавал тексты для некоторых страниц, наши специалисты корректировали их: следили за тем, чтобы они были уникальными, оптимизированными и соответствовали всем маркетинговым нормам.
Подготовили сайт к ФЗ №152 о персональных данных.
Шаг 4. Доработали прототипы
После того, как тексты были написаны, к работе притупил UX-специалист. Проанализировал задачи бизнеса, учел требования целевой аудитории и на основе текстов улучшил прототипы. Этот этап необходим, так как сайт должен получиться не просто внешне привлекательным, но и максимально удобным и полезным для пользователей.
Особое внимание уделили блоку с анализами. Зачастую на сайтах медицинских организаций есть проблема с тем, чтобы быстро и просто найти необходимую процедуру или анализ. Мы учли это при разработке сайта. Во-первых, структурировали анализы:
Во-вторых, деление анализов на категории появляется после того, как пользователь кликает по области поиска, что тоже очень удобно — не приходится переходить на отдельную страницу:
Также для комфорта пользователей после выбора категории справа, рядом со строкой поиска появляется вид анализа, стоимость и кнопка «записаться»:
Поиск анализов мы постарались расположить в начале страницы, однако перед ним поместили еще один раздел, в котором представили материалы о том, как записаться на процедуру, подготовиться к ней, какие документы взять с собой и куда придут результаты:
Важно было, чтобы список анализов был в поле зрения пользователя, поэтому всю организационную информацию поместили в «спойлеры»:
Таким образом, потенциальный клиент может получить максимум нужной информации, оставаясь на этой странице. Не нужно звонить, чтобы выяснить, сколько стоит сдать анализ или как подготовиться к процедуре — на странице он найдет ответы на все свои вопросы быстро и легко.
Также для удобства пользователей блок с записью на прием мы расположили в конце каждой страницы, чтобы потенциальному пациенту клиники не приходилось искать эту информацию по всему сайту, а он всегда мог записаться:
Шаг 5. Разработали дизайн
Начнем с того, что дизайн индивидуальный. В нем использовано много фотографий нашего клиента — главного врача клиники с опытом работы 25 лет. Фотографии сотрудников повышают лояльность аудитории, так как она видит, что за компанией стоят конкретные люди.
В этом проекте мы решили использовали нестандартную сетку — расположили заголовки не над разделами, а слева:
Это упрощает восприятие информации для пользователя. Так как сайты обычно не читают полностью, их «сканируют», ища необходимую информацию. Такое расположение заголовков позволяет быстрее это делать.
Также хочется упомянуть и о том, что мы не пользовались иконками, основным выразительным средством является композиция и типографика (шрифты). Например, блоки с достоинствами компании, которые есть на любом корпоративном сайте, мы делали в виде списков, иконки не использовали:
Этот прием также позволяет удерживать внимание пользователей на сайте.
Также нужно сказать и о том, что дизайн адаптивный — отображается на всех устройствах:
Шаг 6. Сверстали макеты и провели интеграцию с CMS
Технические специалисты приступили к верстке макетов и их реализации. Провели интеграцию с Битрикс, чтобы клиент в дальнейшем мог самостоятельно обновлять информацию на сайте и добавлять новую. Также наши сотрудники создали инструкции для клиента по заполнению сайта, чтобы он мог делать это самостоятельно в будущем:
Также добавили на сайт все удобные для клиента средства связи (мессенджеры, почта, звонок) для более оперативной обработки заявок:
В итоге получили корпоративный сайт — хороший инструмент для ведения бизнеса. Он не просто демонстрирует все достоинства клиники, выглядит привлекательно, но еще и работает на результат — приносит заказы нашему клиенту уже сейчас. Несмотря на то, что после запуска сайта прошло меньше месяца.