Редизайн сайта «Клиники медицины кожи»: баланс между медициной, красотой и SEO

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

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

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

Перед нами стояли четыре ключевые задачи:

1. Соблюсти в визуале баланс между медициной и эстетикой. Дизайн должен вызывать доверие к серьёзной клинике, но при этом ассоциироваться с красотой и заботой о себе.

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

3. Структурировать огромный объём контента для поисковой оптимизации и роста органического трафика.

4. Сделать редизайн, который повысит конверсию в запись и UX в целом.  

На старте требовалось понять, почему текущие клиенты выбирают именно «Клинику медицины кожи». Выявить факторы удовлетворённости и неудовлетворённости аудитории: сервис, персонал, цены, удобство использования сайта, записи и так далее. Узнать все эти вещи можно единственным способом — пообщаться с аудиторией лично.

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

Ключевые выводы:

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

2. Бронировать услуги по телефону неудобно — людям не нравится делать это в метро или на работе, в общем, при людях. Респонденты упоминали, что хотели бы «приложение для записей» или «онлайн-платформу», чтобы видеть расписание в реальном времени.

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

4. Клинику любят за уют, чистоту и заботливый персонал.

Параллельно провели UX/UI 20 сайтов конкурентов. Отобрали самые популярные ресурсы в нише косметологии и дерматологии на рынке России и Санкт-Петербурга. Обращали внимание на объём трафика, метрики и показатели производительности, чтобы выявить наиболее эффективных конкурентов. 

Дополнительно сделали анализ сайта по методологии E-E-A-T: Experience (Опыт), Expertise (Экспертность), Authoritativeness (Авторитетность) и Trustworthiness (Надежность). По этой концепции Google изучает контент страниц и определяет, является ли сайт достоверным источником.

На основе всех данных мы сформировали структуру нового сайта «Клиники медицины кожа» и подготовили прототипы всех страниц.

Главный вывод из исследований, который повлиял на проект: пациентам не хватает современного образа клиники. 

У компании уже был недавно обновлённый фирменный стиль, но его можно было доработать: 

— уйти от «классической» зелёной цветовой гаммы, которую часто используют в медицинском секторе из-за ассоциаций со здоровьем. Найти что-то более интересное.  

— сделать типографику более выразительной и тем самым упростить сканирование сайта и визуальных коммуникаций.

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

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

Далее мы поддержали эту идею через тексты на сайты. Например, использовали такие формулировки: «Быть настоящим внутри и снаружи», «Красота и здоровье без фильтров», «Пройдите диагностику и будьте спокойны».

У клиники большое количество услуг и главная сложность — огромное количество текста должно выглядеть легко и эстетично. Расскажем, как добивались этого.

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

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

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

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

Адаптировали призывы к действию под сценарии. На каждой странице — свой call-to-action: на главной предлагаем познакомиться с клиникой, на страницах услуг — помочь с выбором, в профилях врача — сразу записаться на приём.

Фирменный зелёный блок «Записаться» встречается каждые 3–4 экрана и в конце страницы. Так человек всегда поймёт, куда нажать, когда созреет для бронирования.

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

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

Спроектировали личный кабинет, который стал полноценным хабом для пациента. В нём более 15 разделов:

— онлайн-запись на приём и история посещений;

— онлайн-консультации и чат с врачом;

— электронная анкета состояния здоровья (заполняется один раз и хранится в системе);

— справки для налоговой (можно скачать в фирменном стиле);

— подарочные сертификаты;

— избранное;

— уведомления;

— настройки профиля и многое другое.

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

Создали масштабируемую дизайн-систему с UI-kit. Заложили все основные типы оформления контента: карточки, списки, алертные блоки, предупреждения. Благодаря этому новые страницы сайта можно собирать намного быстрее, в том числе без участия дизайнеров.

Мы провели полный редизайн сайта и передали проект клиенту для самостоятельной разработки. Пока что новая версия проекта ещё не запущена.

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

Новая версия сайта даст пользователям всю необходимую информацию для выбора врача и принятия решения о визите:

1. На главной — знакомство с клиникой и её ценностями.

2. На страницах услуг — детальное описание процедур.

3. В профилях врачей — видеовизитки: они помогают увидеть специалиста «вживую», снижают страх перед лечением и располагают к сотрудничеству.

4. Анкета первичного приёма из 5 этапов заранее собирает данные о пациенте, чтобы врач мог подготовиться к встрече.

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

После разработки ожидаем рост конверсии в онлайн-запись. 

Также ожидаем повышение LTV. Когда «забота видна клиентам до и после визита, повторные обращения — только вопрос времени.