Обновил дизайн сайта медицинского центра, пациенты стали чаще записываться на приём
Клиент
Медицинский центр «ОДОНТ» — сеть частных медицинских клиник в Санкт-Петербурге и Ленинградской области. С 1998 года оказывает амбулаторные, стоматологические и косметологические услуги. В центре 40 направлений услуг, 13 физических отделений и около 200 сотрудников. Выручка компании за 2022 год: 258 млн рублей.
Проблема
Старый сайт компании морально устарел, по нему сложно ориентироваться, многие важные функции вроде поиска услуг работали плохо. Визуально сайт создавал впечатление «бедной» клиники. Клиенту хотелось улучшить имидж своего бизнеса.
В студию, где я работал дизайнером, клиент обратился по одному из прошлых кейсов — сайту для стоматологической клиники. Запрос был «Хотим так же».
Задачи
проанализировать конкурентов
привести в порядок структуру сайта, сделать её более понятной и логичной
сделать черновые прототипы
продумать дизайн-концепцию
подготовить Hi-Fi макеты
собрать UI-кит и передать в разработку
Результат
Новый сайт был выпущен через 6 месяцев работы. Через 1-2 месяца начала поступать положительная обратная связь от пользователей, сайтом стало удобнее пользоваться и искать нужную информацию. Люди стали чаще записываться на приём к специалистам.
Моя роль в проекте
На этом проекте я отвечал за структуру сайта и весь дизайн. Моя работа над этим проектом длилась около 3 месяцев с учётом длительного ожидания обратной связи от клиента. Ниже опишу все этапы, над которыми я работал на проекте.
Анализ конкурентов и старого сайта
Сперва я изучил, как устроен старый сайт, выявил проблемные места и наоборот моменты, которые мы оставим в новом сайте. После этого я изучил конкурентов, чтобы узнать, как подобную задачу решали другие и возможно перенять некоторые из лучших практик.
Информационная архитектура
Новый дизайн требовал изменений в иерархии страниц и улучшении подачи информации. Все эти изменения я постарался отразить в схеме информационной архитектуры нового сайта.
Прототипирование
Я собрал детализированный прототип сайта, где был показан примерный контент, порядок блоков и уже фактически были заложены даже стилистические приёмы и внешний вид компонентов, оставалось только всё это раскрасить в цвет.
Сейчас я понимаю, что это было слишком избыточно для прототипа.
Дизайн-концепция
От заказчика был особый акцент на входной экран. Клиент хотел «вау-эффект» при попадании на сайт. Основная идея входного экрана — показать многопрофильность сети клиник и удержать пользователя необычным и современным дизайном.
Было решено сделать входной экран обособленной частью главной страницы. То есть из него можно либо пойти по разделам навигации, либо скроллить вниз, чтобы перейти к основной части главной страницы.
Я подготовил 2 дизайн-концепции данного решения. Вот первая:
Заказчик очень хотел использовать образ слона при попадании на сайт, и мы с арт-директором проработали креативное решение, которое смотрелось «дорого» или как минимум необычно. Образ забавного слоника из логотипа мы преобразовали в солидную фигуру слона, намекая сходством на многочисленные статуи и монументы Санкт-Петербурга, на которой разметили три подразделения клиники: амбулатория, стоматология и косметология.
Однако заказчик засомневался в решении и попросил реализовать другую концепцию, где действующий логотип клиники станет основой всей композиции и сохранится цветовая гамма старого сайта.
Вторая дизайн-концепция, которую согласовал клиент:
Изначально мы с командой не хотели делать акцент на логотипе, так как на наш взгляд требовался ребрендинг, но у заказчика давно зарегистрированная торговая марке, и он не собирался ничего менять.
Вторую дизайн-концепцию мы обыграли через круг — он же буква из наименования «О» (Одонт). Круг разделён на три части — главные подразделения клиники, а по центру находится логотип клиники.
Чтобы композиция выглядела интереснее, был добавлен анимированный фон из шестиугольников, в некоторые из них вписаны тематические иконки. Этот элемент стиля в дальнейшем распространился почти на весь сайт.
Дизайн главной страницы
За входным экраном скрывалась главная страница, которая была выполнена в стиле согласованной дизайн-концепции.
Большое внимание было уделено навигации по сайту, продумана двухуровневая шапка сайта:
Первый уровень содержал логотип, поиск, номера телефонов, кнопки «Адреса клиник», «Личный кабинет» и кнопку записи на приём.
При наведении на шапку сайта появлялся второй уровень с навигацией по страницам сайта.
При скролле шапка фиксируется сверху, чтобы пользователь, находясь в любом месте сайта, мог позвонить, оставить заявку или перейти в интересующий его раздел. В начале главной страницы предусмотрена баннерная область для различных акций и предложений. Сразу под этой областью находится поиск услуг, т.к. фокус на услугах был одним из приоритетов.
Дальше идёт акцент на направлениях услуг. Каждому направлению присвоена своя собственная иконка. И это прослеживается на всех уровнях сайта.
После направлений на главной странице расположились адреса клиник с отсылкой на карту, небольшой блок о медицинском центре, слайдер с отзывами пациентов, блок с последними новостями и партнёрами.
В футере продублированы основные разделы навигации по сайту, указаны контактные данные и необходимые ссылки.
Дизайн главной страницы и её адаптивные версии под разные устройства:
UI-кит
Когда стилистика окончательно была ясна и согласована, я собрал UI-кит из ключевых компонентов сайта в разных состояниях, а также цветовых и шрифтовых стилей.
Дизайн внутренних страниц
Так выглядит страница направления — здесь отражён перечень контентных страниц с услугами, список цен на все услуги и врачей направления, а также адреса клиник, в которых оказываются данные услуги.
На страницу услуги сразу подтягиваются соответствующие цены, далее идёт описание услуги, перечень врачей, оказывающих услугу, и адреса клиник, в которых её могут оказать.
Прайс-лист услуг представляет собой множество разворачиваемых списков, сгруппированных по направлениям.
На странице с врачами предусмотрена фильтрация по трём подразделениям клиники, а также по адресам, где принимают специалисты. Можно быстро найти нужного врача по имени или фамилии.
В карточке врача указана основная информация о специалисте, а также связь с оказываемыми услугами и клиниками, в которых принимает специалист.
Пациент может записаться на приём через кнопку в шапке сайта. Для этого достаточно указать имя и номер телефона. Тут же можно выбрать интересующее направление и оставить комментарий. При незаполненных полях или ошибках в вводе пользователь увидит сообщение об этом, а поля с ошибкой подсветятся.
Кроме того, предусмотрена возможность записи к конкретному специалисту. Записаться можно, перейдя на страницу интересующего врача. Здесь пациент может указать наиболее удобное время для звонка. При успешной отправке заявки пользователь увидит сообщение.
Также были проработаны следующие страницы:
Информация для пациентов
О нас
Вакансии
Новости
Акции
Контакты
Итого
Что я сделал на проекте:
проанализировал конкурентов;
разработал информационную архитектуру нового сайта;
собрал интерактивный прототип сайта;
предложил 2 дизайн-концепции входного экрана;
подготовил дизайн-макеты всех страниц и UI-кит.
Мои коллеги сделали всё остальное:
Frontend;
Backend;
перенос с Wordpress на 1С-Битрикс;
заполнение услуг;
SEO-оптимизация;
синхронизация цен с CSV-файлами;
тестирование, запуск и поддержка.