Главная Портфолио Сайт медицинского центра «Одонт»

Сайт медицинского центра «Одонт»

Обновили старый сайт, улучшили структуру, юзабилити и визуальную подачу информации

Клиент

ООО «МЦ ОДОНТ»

Отрасль

Медицина

Тип проекта

Корпоративный сайт

Сроки проекта

80 рабочих дней

Услуги

Дизайн Разработка Контент Обслуживание

Год запуска

2023

Ссылка на сайт

odont.ru

Вводные

О клиенте

Медицинский центр «ОДОНТ» — сеть многопрофильных медицинских клиник в Санкт-Петербурге и Ленинградской области. В клиниках оказываются амбулаторные, стоматологические и косметологические услуги.

Задача

Обновить дизайн сайта, перенести сайт с WordPress на 1C-Битрикс, сохранив и оптимизировав SEO
Привести в порядок структуру сайта, сделать её более понятной и логичной
Сделать удобный поиск по услугам клиники
Улучшить отображение сайта на разных устройствах

Что мы сделали

Разработали структуру нового сайта, собрали прототипы ключевых страниц, разработали дизайн, реализовали Frontend и Backend, прикрутили 1С-Битрикс, наполнили сайт контентом, выполнили SEO-оптимизацию, настроили загрузку цен из CSV-файлов, тестировали и обслуживали сайт.

Структура

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

Прототипирование

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

Дизайн-концепция

От заказчика был особый акцент на входной экран. Клиент хотел «вау-эффект» при попадании на сайт.

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

Было решено сделать входной экран обособленной частью главной страницы. То есть из него можно либо пойти по разделам навигации, либо скроллить вниз, чтобы перейти к основной части главной страницы.

Мы представили 2 дизайн-концепции для данной идеи.

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

Сзади фон Петербурга — в этом городе находится сеть клиник. Здесь была пара вариантов: более считываемая панорама города и более абстрактная — из линий, которые одновременно напоминали график ЭКГ.

Также мы сделали концепцию анимации появления этого экрана

Однако заказчик засомневался и попросил реализовать иную концепцию, где действующий логотип клиники станет основой всей композиции и сохранится цветовая гамма старого сайта.

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

Вторую дизайн-концепцию мы обыграли через круг — он же буква из наименования «О» (Одонт). Круг мы разделили на три части - главные подразделения клиники, а по центру находится логотип клиники.

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

Итоговые варианты дизайн-концепций

Главная страница

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

Большое внимание уделили навигации по сайту, продумали двухуровневую шапку сайта:

Первый уровень содержал логотип, поиск, номера телефонов, кнопки «Адреса клиник», «Личный кабинет» и кнопку записи на приём.
При наведении на шапку сайта появлялся второй уровень с навигацией по страницам сайта.

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

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

Дальше мы сделали акцент на направлениях услуг. Каждому направлению была присвоена своя собственная иконка.

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

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

Дизайн главной страницы и её адаптивные версии под разные устройства

Внутренние страницы

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

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

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

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

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

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

Также мы проработали перечень стандартных страниц:

Информация для пациентов
О нас
Вакансии
Новости
Акции
Контакты

Интеграция 1С-Битрикс

Перенесли сайт с данными старого сайта с WordPress на 1C-Битрикс. Получилось много новых макетов страниц и переработанных компонентов, которые мы интегрировали на сайт. Например услуги, цены, врачи и адреса клиник взаимосвязаны между собой и потребовали дополнительных трудозатрат при наполнении. Также была интегрирована возможность оплаты некоторых ключевых услуг прямо на сайте. При разработке учитывали безопасность и скорость работы решения.

Результат

Сравнение результата работы по дизайну на примере главной страницы.

Комментарий студии

Новый сайт медицинского центра «ОДОНТ» — современный и масштабируемый.

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

Также мы интегрировали актуальные цены из прайса клиники (которые заказчик размещает внутри своей МИС), чтобы пациенты всегда имели доступ к актуальным расценкам услуг.

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