Разработка сайтов для медицинского центра и клиники врачебной косметологии «Нарцисс»

Разработка сайтов для медицинского центра и клиники врачебной косметологии «Нарцисс»

О клиенте

К WeJET обратился частный бизнес в сфере медицины. Две клиники под брендом «Нарцисс» находятся в Новокузнецке по соседству: одна специализируется на врачебной косметологии, вторая — работает, как медицинский центр широкого профиля. У каждой из них отличаются задачи, целевая аудитория и позиционирование.

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

Медицинский центр — классическая семейная клиника с доступными ценами и услугами для всей семьи.

Задача

С чем пришел клиент

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

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


Ситуация на старте

Мы поделились с клиентом концепцией сайта косметологической клиники. Первоначально это был лендинг. Наши наработки понравились, и мы приступили к работе над проектом.

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

Решение

Обе клиники используют городскую медицинскую информационную систему MEDICI, так что мы подключили оба сайта к ней через API. Собрали формы так, чтобы кастомизировать виджет онлайн-записи под фирменный стиль сайта.

Сейчас система записи:

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

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

    1. Подключили список врачей и связали их с системой через ID.

    2. Удобно реализовали фильтрацию: по врачам, по услугам и по направлению.

    3. Сделали сайт адаптивным под разные устройства.

    4. Решили проблему отображения длинных названий и большого объёма данных.

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

Стек: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки Popper.js, Swiper



Дизайн сайтов

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

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

Клиника врачебной косметологии

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

Для страниц сайта мы использовали золотисто-коричневую палитру. Добавляли градиенты и элементы из брендбука. Использовали видео с эстетичными пространствами на главной странице. Оно добавляет сайту интерактивности и создает задуманную нами атмосферу.

Интересной получилась модульная сетка для главной страницы: она местами скрытая, но частично открытая. При этом всю страницу объединяют вертикальные линии. Композицию дополнили акцентные ховеры и параллакс-эффекты. Цвета и шрифты подобрали индивидуально под проект.

Медицинский центр

Этот сайт ориентирован на универсально широкую аудиторию: от молодёжи до пожилых людей, поэтому он должен быть универсальным и простым. Использовали мягкие зеленые оттенки, скруглённые кнопки, светлый фон. Такие приемы помогают выстраивать доверие клиента с первых кликов и не вызывать у пользователей отторжение.

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



Результат работы

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

Больше всего по времени заняла работа по интеграции медицинских форм, но результат стоил усилий. Зато у клиента появилась удобная система онлайн-записи, не нарушающая стиль сайта. Обе площадки выглядят стильно и отражают ценности бизнеса.

У вас есть вопросы?

Мы с радостью ответим вам на них!