Кейс Флексис

1 этап
Формирование структуры и прототипирование

Для начала мы разработали структуру основного меню, куда вошли следующие страницы:

• О нас (статическая страница)
• Что мы лечим (с выпадающим одноуровневым меню)
• Комплексное лечение (с выпадающим одноуровневым меню)
• Врачи
• Цены
• Блог
• Флексис в спорте
• Отзывы
• Контакты

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

Помимо этих страниц, также необходимо было создать прототипы главной страницы, карточки врача и много другого. Для удобства посетителей сайта мы также предложили клинике «Флексис» вынести отдельно такие кнопки как:

• Обратный звонок
• Записаться на прием
• Связаться с нами
• Кнопки социальных сетей
• Поиск

2 этап
Отрисовка дизайна и программирование

Наши дизайнеры выбрали для данного сайта трендовый flat-стиль. Что касается цветовой гаммы, мы остановили свой выбор на синем, голубом и белом цвете, а также их оттенках.

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

На этой странице мы сразу видим небольшой текстовый блок, где кратко рассказывается о клинике, а также презентационное видео (при нажатии – воспроизводиться во всплывающем окне).

Затем мы решили отдельно выделить, помимо представленной страницы «Что мы лечим?» в основном меню, специализацию клиники «Флексис». И представить наглядно два направления лечения заболеваний – в виде таблицы, каждое поле которой отличается от предыдущего тоном и насыщенностью. Все названия кликабельны и ведут на отдельные страницы.

Отдельным блоком наши специалисты решили представить новости и акции медучреждения: отображаются первые три поста. Есть возможность пагинации, а также перейти на страницу новостей, нажав кнопку «Читать все новости».

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

• Имя;
• Фамилия;
• Номер телефона;
• e-mail;
• Дата (с выпадающим календарем);
• Комментарий.

О нас

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

Так как самое основное – это направления лечения, представленные в клинике «Флексис», мы решили на главной странице для этого создать оригинальную таблицу, с яркими картинками, и кликабельными названиями.

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

Ниже идет с представлением ведущих специалистов клиники ортопедии, неврологии и спортивной медицины «Флексис»: представлено четыре карточки в один ряд. Есть возможность пагинации, а также кнопка «Все специалисты клиники», нажав на которую, человек оказывается на странице «Врачи».

Также здесь есть три блока: с сертификатами и дипломами, фотогалерея и «Наши партнеры» – с возможностью нажатия на стрелки, чтобы просмотреть больше документов, изображений и логотипов соответственно.

Что мы лечим

Вкладка, при нажатии на которую – выпадает одноуровневое меню со списком услуг клиники. Кликнув на интересующее название, мы попадаем на страницу, выполненную как лендинг со следующими модулями:

• Общая информация о направлении лечения.

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

• Информация о приёме.

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

• Текстовый блок.

Интересной фишкой здесь является возможность развернуть текст, и свернуть, нажав на соответствующие кнопки.

• Основные заболевания.

Сделаны в виде маркированного списка, где маркеры имеют форму небольших ромбов с красной окантовкой.

• Этапы лечения.

Каждый этап (обычно их четыре, реже – три), имеет собственную фоновую картинку, в большом круге красного цвета указывается номер этапа, а под изображением – небольшой текст, который описывает, что именно происходит. На некоторых лендингах есть дополнительная кнопка «Читать далее», тогда текст разворачивается – это сделано для того, чтобы оптимизировать пространство на сайте, и сделать его гармоничным.

• Отзывы.

Отображаются по два отзыва в одном ряду – есть возможность пагинации, а также перейти на страницу «Отзывы», кликнув на кнопку «Читать все отзывы».

• Мини форма записи на прием.

Включает в себя имя, номер телефона и кнопку «Записаться на прием».

• Комплексные программы лечения.

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

Кроме того, специалисты нашего агентства разработали отдельный лендинг в рамках сайта, но со своим собственным доменом «Реабилитация на дому»

Интересно представлен блок «Методы реабилитации» – чем-то напоминает мини инфографику: с вертикальной линией, которая соединена небольшими красными кругами возле каждого пункта.

Для модуля «Наши специалисты» были подобраны уникальные иконки, каждая из которых отображает суть деятельности того или иного врача.

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

Комплексное лечение

При нажатии на эту кнопку – посетитель попадает на страницу, где дет краткое описание, зачем нужны комплексные программы лечения, после чего в виде списка (по три – в один ряд) размещены картинки и небольшой текст. Нажав на «Подробнее» – мы попадаем на страницу конкретной программы.

Такая страница также выполнена как landing page, и имеет следующие блоки:

• Картинка или видео;
• Текст;
• Этапы лечения;
• Стоимость программы лечения;
• Форма записи (с двумя полями);
• Преимущества программы перед моно-лечением (картинка в круге с небольшим текстовым сопровождением);
• Список заболеваний;
• Отзывы;
• Контакты.

Интересный модуль здесь – это цены, представленная четырьмя категориями:

• Базовая – подходит для пациентов на ранней стадии заболеваний и для профилактики;
• Расширенная – для хронических заболеваний;
• Расширенная плюс – предлагает еще больший спектр услуг;
• Всё включено – самый широкий перечень предлагаемых услуг.

При нажатии на какую-либо категорию, возникает одноуровневое выпадающее меню.

Врачи

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

Страница конкретного врача включает в себя:

• фото специалиста
• профессиональная биография
• специализация врача
• форма записи

Цены

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

Блог

Здесь представлены анонсы постов – в виде яркой картинки с кратким текстовым вступлением, а также кнопкой «Подробнее», при нажатии на которую – человек попадает непосредственно на страницу с новостью. Расположены по три – в одном ряду.

Флексис в спорте

Так как клиника ортопедии, неврологии и спортивной медицины «Флексис» выступает спонсором различных спортивных мероприятий, мы решили вынести посты об этом в отдельную вкладку. Выполнена она так же, как и «Блог», но внутри самого поста есть возможность добавления галереи (с пагинацией).

Отзывы

Мы представили в виде двух разных вкладок, между которыми очень легко переключаться:

• Отзывы
• Вопрос/ответ

Отзывы выполнены в виде текстовых блоков, каждый из которых можно развернуть, кликнув на кнопку «Читать полностью» – это сделано для оптимизации места на странице. Кроме того, есть возможность оставить собственный отзыв, заполнив соответствующую форму.

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

Сайт выполнен в трех версиях (для ПК, планшета и смартфона), и является адаптивным.

3 этап
Подготовка контента и наполнение

Клиент высылал тексты, некоторые из которых мы адаптировали для дальнейшего SEO продвижения. Также было сформировано сегментированное ядро. Наши специалисты занимались и внутренней оптимизацией страниц на сайте.

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

Кроме того, специалисты агентства «МедМаркетинг» создали канал для данного медучреждения, где размещены видео, которые делали ранее во «Флексис», а также новые ролики, созданные нашей командой:

• Мы проводили видеосъемку в клинике
• Монтировали ролик
• Делали цветокоррекцию
• Подбирали фоновую музыку
• Отрисовывали заставки и плашки

Результат