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

Задача:

- обновить дизайн сайта, перенести сайт с WordPress на 1C-Битрикс, сохраняя и оптимизируя SEO

- привести в порядок структуру сайта, сделать её более понятной и логичной

- сделать удобный поиск по услугам клиники

- улучшить отображение сайта на разных устройствах

Перечислим наши основные этапы работы:

• Разработали структуру нового сайта

• Собрали прототипы всех ключевых страниц

• Разработали дизайн-концепции входного экрана

• Сделали дизайн-макеты всех страниц

• Выполнили Frontend-разработку и анимации

• Реализовали Backend-разработку на 1С-Битрикс

• Приступили к заполнение услуг по различным направлениям

• Выполнили SEO-оптимизацию, сохраняя большинство URL-адресов старого сайта и заполняя метаданные новых страниц согласно подготовленной семантике.

• Настроили загрузку цен из csv-файлов (выгрузка из МИС «Инфоклиника», которую клиент использует в работе клиники)

• Занимались тестированием и отладкой, выгрузили результат

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

Техническое планирование:

Задокументировали требования к хостингу, настройке CMS на базе 1С-Битрикс и к интеграциям необходимых модулей и функционалу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2) При наведении на шапку сайта появлялся второй уровень с навигацией по страницам сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Информация для пациентов

- О нас

- Вакансии

- Новости

- Акции

- Контакты

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

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