Редизайн для «Клиники медицины кожи»: сделали большой медицинский сайт лёгким и эстетичным

Глубинные интервью

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

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

Выяснили несколько важных вещей:

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

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

UX/UI-анализ конкурентов 

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

Дополнительно проанализировали сайт по методологии E-E-A-T: 

• Experience (опыт),
• Expertise (экспертность),
• Authoritativeness (авторитетность),
• Trustworthiness (надёжность). 

По этим критериям Google оценивает содержание страниц и определяет, насколько сайт можно считать достоверным источником.

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

Дизайн-решения 

Главный вывод UX/UI-анализа конкурентов, который повлиял на дальнейшую работу: клиентам клиники не хватает современного визуального образа.

«Клиника медицины кожи» совсем недавно обновили фирменный стиль, но мы увидели, что его можно развить:

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

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

Подробнее об айдентике рассказали в отдельном кейсе — он есть в нашем профиле на Workspace.

Мудборды

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

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

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

Дизайн сайта

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

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

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

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

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

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

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

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

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

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

1. онлайн-запись и история посещений;
2. онлайн-консультации и чат с врачом;
3. электронная анкета состояния здоровья, которую достаточно заполнить один раз;
4. справки для налоговой в фирменном стиле;
5. подарочные сертификаты;
6. избранное;
7. уведомления;
8. настройки профиля и другие разделы.

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

Дизайн-система. Разработали масштабируемую дизайн-систему, включающую UI-kit с основными типами контента: карточки, списки, алертные блоки и предупреждения. Это позволило значительно ускорить создание новых страниц, даже без участия дизайнеров.

Результат

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

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

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

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

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

Сейчас сайт в разработке внутренней командой заказчик. Ждём релиза, чтобы собрать метрики.

Планируете редизайн сайта, где много контента?

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