Редизайн сайта стоматологической клиники: превратили сложный контент в удобный интерфейс

Dentaplan — клиника цифровой стоматологии премиального сегмента в Санкт-Петербурге.

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

Усложняла жизнь клиентов и неадаптивная вёрстка — сайт плохо отображался на разных устройствах.

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

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

Мы отобрали 20 самых популярных сайтов в нише стоматологии на рынке Санкт-Петербурга и России в целом. Изучили их объём трафика и показатели производительности. Дополнительно провели анализ надёжности по методологии E-E-A-T (Опыт, Экспертность, Авторитетность, Надежность) — это концепция Google для оценки качества и достоверности контента на сайте. Она помогает поисковой системе понять, можно ли доверять странице и стоит ли показывать её высоко в выдаче.

Отдельно уделили внимание структуре и дизайну сайтов конкурентов.

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

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

В процессе редизайна сайта предложили клиенту обновить айдентику. 

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

На удалось добиться премиальности без «медицинского синего» и вытащить из типичного стоматологического названия уникальность бренда.

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

Из самого интересного — нам сразу же пришло в голову созвучие «Дентаплана» с дельтапланом. Из него родился знак-образ: самолёт/улыбка/галочка. На этом построили весь язык графики с мягкими линиями, напоминающими след от самолёта. Они задают визуалу движение и обеспечивают узнаваемость с первого взгляда.

По запросу клиента добавили объёмные детали в форме улыбки — снова отсылка к линиям.

Оформили сетку так, чтобы она работала в любых коммуникациях: на печатных носителях, сайте, баннерах и соцсетях. 

Визуальный стиль и айдентику собрали за месяц и согласовали без правок (не считая точной настройки жёлтого). Дальше эта система легла на сайт и промо-материалы.

Чего добились таким подходом:

1. Узнаваемость без логотипа. Линия и форма считываются мгновенно, нетипичная гамма выделяет бренд в нише.

2. Тон доверия. С помощью визуала передаём спокойствие — у клиентов меньше тревоги по поводу того, что «в стоматологии сделают больно».

3. Высокая скорость производства. Единый визуальный код — меньше споров и согласований.

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

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

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

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

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

— на главной странице — знакомим пользователя с клиникой и её ценностями; 

— на страницах услуг — показали детальное описание процедур;

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

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

Поделили проект на MVP и расширенную версию сайта с дополнительными функциями. 

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

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

Редизайн завершили точно в срок без просрочки дедлайнов. Новая версия сайта уже работает, но заказчик ещё вносит изменения в проект.

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

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

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

Сделали резиновую вёрстку — теперь контент адаптивно смотрится на всех экранах.