Решение
Обе клиники используют городскую медицинскую информационную систему MEDICI, так что мы подключили оба сайта к ней через API. Собрали формы так, чтобы кастомизировать виджет онлайн-записи под фирменный стиль сайта.
Сейчас система записи:
- работает прямо на сайте, без перехода на внешние сервисы,
- адаптируется под визуальный стиль (цвета, шрифты, блоки),
- поддерживает три сценария: запись по врачу, по услуге и направлению,
- различает типы услуг — где нужна прямая запись, а где требуется консультация через форму обратной связи,
- позволяет выводить актуальную информацию по врачам, процедурам, времени и стоимости.
На старом сайте наблюдался еще ряд сложностей. Чтобы улучшить процессы, мы внесли технические изменения:
1. Подключили список врачей и связали их с системой через ID.
2. Удобно реализовали фильтрацию: по врачам, по услугам и по направлению.
3. Сделали сайт адаптивным под разные устройства.
4. Решили проблему отображения длинных названий и большого объёма данных.
На старом сайте наблюдался еще ряд сложностей. Чтобы улучшить процессы, мы внесли технические изменения:
Стек: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки Popper.js, Swiper
Дизайн сайтов
Проект отличается концептуальной подачей бизнесов. Нам важно было развести сайты визуально, объединив их общей логикой и оставив узнаваемость единого бренда.
Для работы нам предоставили гайдлайн, но по просьбе клиента многое пришлось адаптировать. Мы использовали его частично — основа осталась, но шрифты, цвета и элементы переработали. Главный фокус был на том, чтобы визуально разграничить сайты: по аудитории, ощущению, атмосфере.
Клиника врачебной косметологии
Мы реализовали имиджевый сайт, подходящий по духу обеспеченным активным женщинам, основной целевой аудитории проекта. В этом случае требовалась атмосфера роскоши, чтобы впечатлить, показать премиальность услуг и вызвать доверие.
Для страниц сайта мы использовали золотисто-коричневую палитру. Добавляли градиенты и элементы из брендбука. Использовали видео с эстетичными пространствами на главной странице. Оно добавляет сайту интерактивности и создает задуманную нами атмосферу.
Интересной получилась модульная сетка для главной страницы: она местами скрытая, но частично открытая. При этом всю страницу объединяют вертикальные линии. Композицию дополнили акцентные ховеры и параллакс-эффекты. Цвета и шрифты подобрали индивидуально под проект.
Медицинский центр
Этот сайт ориентирован на универсально широкую аудиторию: от молодёжи до пожилых людей, поэтому он должен быть универсальным и простым. Использовали мягкие зеленые оттенки, скруглённые кнопки, светлый фон. Такие приемы помогают выстраивать доверие клиента с первых кликов и не вызывать у пользователей отторжение.
Шрифт использовали тот же, что и на первом сайте. Но паттерны, сетку и палитру разработали свои. Позаботились о том, чтобы навигация на сайте была интуитивно понятной для любого клиента.
Результат работы
Оба сайта успешно приняты заказчиком и уже приносят клиентов на локальном рынке. Мы реализовали задумку бизнеса и создали два кардинально разных проекта. Они отличаются по подаче, но при этом ими удобно управлять в связке. Есть технические сходства, одинаковые формы записи и возможности для развития страниц. Администраторам сайтов будет удобно обновлять информацию и кастомизировать отдельные услуги, привлекая к ним внимание.
Больше всего по времени заняла работа по интеграции медицинских форм, но результат стоил усилий. Зато у клиента появилась удобная система онлайн-записи, не нарушающая стиль сайта. Обе площадки выглядят стильно и отражают ценности бизнеса.
