Редизайн сайта частной клиники

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

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

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

1. Аудит пути

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

2. Структура

   Пересборка навигации вокруг двух вопросов посетителя: «есть ли у вас мой профиль» и «когда можно прийти». Всё остальное ушло вглубь.

3. Дизайн-система

   Токены цвета, типографики и ритма; компоненты карточки врача, расписания и формы. Макеты собираются из готовых блоков, а не рисуются заново.

4. Вёрстка и перенос

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

5. Замер

   Аналитика на события до запуска и после, чтобы сравнивать одинаковые величины, а не ощущения.

• Strapi — расписание и карточки врачей редактирует администратор
• Медицинская информационная система — свободные окна подтягиваются автоматически
• Plausible — аналитика без персональных данных
• Яндекс.Карты — филиалы и маршруты

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

• Доступность по WCAG 2.1 AA: контраст, фокус с клавиатуры, разметка форм с подписями
• Расписание работает без JavaScript — это единственное, ради чего приходят
• Старые адреса сохранены редиректами 301, поисковый трафик не потерян
• Lighthouse на мобильном профиле держится выше 90 по всем четырём разделам
• Изображения в двух форматах с явными размерами — вёрстка не прыгает при загрузке
• Контент правит клиника: обновление цен не требует разработчика и не ломает раскладку

• ×3

  Записей через сайт

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

• 7 → 2

  Шагов до записи

  Переходов от входа на сайт до отправки формы по основному сценарию.

• −34%

  Отказы на мобильных

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

• 4.1 с → 1.2 с

  Загрузка первого экрана

  LCP на мобильном профиле Lighthouse, медиана по десяти прогонам.

• Аудит пути, структура и дизайн-система — лично
• Вёрстка и подключение CMS — лично
• Интеграция с медицинской системой — совместно с подрядчиком клиники
• Наполнение и перенос контента — администраторы клиники по подготовленной инструкции

• Next.js
• TypeScript
• CSS Modules
• Figma
• Strapi
• Plausible