Разработка сайта для центра стоматологии Dentaplan

Главное о кейсе

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

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

Совместили элементы айдентики и сформированный стиль
с функциональностью сервиса с большим количеством контента:
– нестандартными точечными решениями, яркими акцентами, анимацией блоков при скролле (на главной почти каждый блок с уникальной анимацией).

Всего получилось — больше 30 уникальных страниц.

Команда проекта
2 руководителя проектов, 2 дизайн-лидера, дизайнер и 2 графических дизайнера, 2 контент-менеджера; fronted, full stack, QA.

Как проект изменил жизнь пользователей

Сайт еще в разработке, но мы с клиентом ожидаем следующие изменения:

– Пациенты будут чувствовать заботу и уверенность на каждом этапе благодаря продуманному клиентскому пути:
от знакомства с клиникой на главной до принятия решения в профилях врачей;

– Стоматология будет вызывать больше доверия еще на этапе взаимодействия с сайтом: от первичной анкеты пациента, состоящей из 5 этапов, до знакомства с врачами через видеовизитки;

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

После реализации сайта ожидаем рост лояльности пациентов (NPS) и снижение нагрузки на администраторов за счет притока информированных и мотивированных пациентов.

Бизнес-задача и ее решение

Задача

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

Мы превратили многолетнюю экспертизу врачей
в информативный и удобный сайт, где:
– Минимализм в дизайне и не классические для медицины цвета отражают технологичность стоматологии;
– Структура услуг логично раскрывает 8 ключевых направлений работы с детализацией до 10 процедур в каждом;
– Функциональность обеспечивает полный цикл взаимодействия с пациентами — от первичной анкеты о состоянии здоровья пациента до записи через продуманные CTA;

– Информационные разделы (отзывы с геосервисов, медицинских агрегаторов и сайта клиники, статьи, документы
и сертификаты) усиливают доверие и информированность пациентов.

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

Решение

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

Интерактивность сайта реализована через динамичные элементы и микроанимации с учетом SEO-требований:
– Появление текста и блоков при скролле;
– Сворачивающиеся и разворачивающиеся карточки на главной странице;
– Интерактивный блок «О нас» — фирменный графический элемент расширяется и запускает видео;
– 3D-иллюстрации — внедрены по запросу заказчика, включая объемную модель логотипа.

Эти элементы повышают вовлеченность и время взаимодействия с контентом, что положительно влияет
на естественное ранжирование (SEO-продвижение).

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

Процесс реализации:

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

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

Этапы:

1. Старт:
- Брифинг
- Планирование работ
- Исследование ниши и UX/UI исследование
- Подготовка и согласование мудбордов

2. Создание структуры проекта (более 30 уникальных страниц) – формирование иерархической схемы страниц
и их содержания.
- UX-анализ существующих прототипов с учетом контента старого сайта
- Разработка user flow;
- UX-прототипы — контентная и функциональная структура каждой страницы;
- Итеративное обсуждение вайрфреймов с заказчиком;
- Согласование контентной структуры и функционала.

3. UI-дизайн:
- Мудборды
- Параллельная работа над Desktop-адаптивом и Mobile-дизайн

4. Передача в разработку:
- Состояния и корнер-кейсы
- UI kit & style guide
- Документация для разработчиков и описание анимаций

Ключевые решения:

1. В карточки врачей добавили видеовизитки и портфолио для создания эффекта личного знакомства и доверия, которое особенно важно для новых пациентов.
2. Логичная система призывов к действию (CTA), которая закрывает маркетинговые потребности в дизайне, есть по всему сайту, чтобы стимулировать и подводить к целевому действию: на главной встречают сразу, на услугах помогают принять решение, в профиле врача подталкивают к записи.

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

3. Создали единые шаблоны для повторяемых модулей — документы, сертификаты, отзывы и продуманную систему админ-панелей. Благодаря этому не только работа с сайтом стала быстрой, но и масштабирование контента простым процессом.

4. Выстроили информационный контент в воронку: связанные услуги, FAQ, перелинковка — закрывает сразу несколько задач: польза пациентам стоматологии и комфортная работа SEO.

Крафт (мастерство), реализация, технические детали

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

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

– Швейцарский стиль и типографика
Применили принципы швейцарского стиля с крупной типографикой, которая сочеталась со стандартными
H2-заголовками. Это создало четкую иерархию контента.

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

– Сложная навигационная структура
Решили проблему многоуровневой иерархии услуг: направления содержат конечные услуги, при этом каждое направление может быть отдельной страницей со своими услугами.

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

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Основой для этого подхода стали:

– Единые шаблоны ключевых модулей (отзывы, сертификаты, документы), которые обеспечивают целостность восприятия и быстрый поиск информации.

– Продуманная система записи, снижающая тревожность: анкета первичного пациента готовит врача к приему,
а альтернативные каналы (Telegram, WhatsApp) дают свободу выбора.

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

Главное – стоматология заполучает доверие пациента еще до визита в клинику.

Скриншоты