Кейс Флексис

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

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

• Про нас (статична сторінка)
• Що ми лікуємо (з випадаючим однорівневим меню)
• Комплексне лікування (з випадаючим однорівневим меню)
• Лікарі
• Ціни
• Блог
• Флексис у спорті
• Відгуки
• Контакти

Також ми намалювали прототипи для окремих програм, методів лікування і симптомів.

Крім цих сторінок, також необхідно було створити прототипи головної сторінки, картки лікаря і багато іншого. Для зручності відвідувачів сайту ми також запропонували клініці “Флексис” винести окремо такі кнопки як:

• Звертальний дзвінок
• Записатися на прийом
• Зв’язатися з нами
• Кнопки соціальних мереж
• Пошук

2 етап Намалювання дизайну та програмування

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

Головна сторінка

На цій сторінці ми одразу бачимо невеликий текстовий блок, де коротко розповідається про клініку, а також презентаційне відео (при натисканні – відтворюватиметься у спливаючому вікні).

Потім ми вирішили окремо виділити, крім представленої сторінки “Що ми лікуємо?” в основному меню, спеціалізацію клініки “Флексіс”. І представити наочно два напрямки лікування захворювань – у вигляді таблиці, кожне поле якої відрізняється від попереднього тоном і насиченістю. Усі назви клікабельні та ведуть на окремі сторінки.

Окремим блоком наші фахівці вирішили представити новини та акції медустанови: відображаються перші три пости. Є можливість пагінації, а також перейти на сторінку новин, натиснувши кнопку “Читати всі новини”.

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

• Ім’я;
• Памія;
• Номер телефону;
• e-mail;
• Дата (з календарем, який випадає);
• Комментар.

Про нас

Насамперед ми бачимо великий яскравий слайдер, з автоматичною і мануальною пагінацією.

Оскільки найголовніше – це напрямки лікування, представлені в клініці “Флексіс”, ми вирішили на головній сторінці для цього створити оригінальну таблицю, з яскравими картинками і клікабельними назвами.

Окремим блоком ми виділили ті напрямки роботи клініки, які наразі активно розвиваються. Ми представили їх у вигляді круглих картинок відповідної тематики, з назвою, і кнопкою “Детальніше”, натиснувши на яку відвідувач потрапляє на сторінку даної послуги.

Нижче йде з представленням провідних фахівців клініки ортопедії, неврології та спортивної медицини “Флексіс”: представлено чотири картки в один ряд. Є можливість пагінації, а також кнопка “Всі фахівці клініки”, натиснувши на яку, людина опиняється на сторінці “Лікарі”.

Також тут є три блоки: із сертифікатами та дипломами, фотогалерея та “Наші партнери” – з можливістю натискання на стрілки, щоб переглянути більше документів, зображень та логотипів відповідно.

Що ми лікуємо

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

• Загальна інформація про напрямок лікування.

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

• Інформація про прийом.

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

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

Цікавою фішкою тут є можливість розгорнути текст, та згорнути, натиснувши на відповідні кнопки.

• Основні захворювання.

Зроблено у вигляді маркованого списку, де маркери мають форму невеличких ромбів з червоною окантовкою.

• Етапи лікування.

Кожен етап (зазвичай їх чотири, рідше – три), має власну фонову картинку, у великому колі червоного кольору зазначається номер етапу, а під зображенням – невеличкий текст, який описує, що саме відбувається. На деяких лендінгах є додаткова кнопка “Читати далі”, тоді текст розгортається – це зроблено для того, щоб оптимізувати простір на сайті, і зробити його гармонійним.

• Відгуки.

Відображаються по два відгуки в одному ряду – є можливість пагінації, а також перейти на сторінку “Відгуки”, клікнувши на кнопку “Читати всі відгуки”.

• Міні-форма запису на прийом.

Містить у собі ім’я, номер телефону та кнопку “Записатися на прийом”.

• Комплексні програми лікування.

Тут представлено три програми, з яскравими картинками та невеликим текстовим описом. При натисканні на кнопку “Детальніше”, відвідувач потрапляє на окрему сторінку, створену під кожну програму.

Крім того, фахівці нашої агенції розробили окремий лендінг в рамках сайту, але зі своїм власним доменом “Реабілітація на дому”

Цікаво представлений блок “Методи реабілітації” – чимось нагадує міні-інфографіку: з вертикальною лінією, що з’єднана невеликими червоними колами біля кожного пункту.

Для модуля “Наші фахівці” було підібрано унікальні іконки, кожна з яких відображає суть діяльності того чи іншого лікаря.

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

Комплексне лікування

При натисканні на цю кнопку – відвідувач потрапляє на сторінку, де є стислий опис, навіщо потрібні комплексні програми лікування, після чого у вигляді списку (по три – в один ряд) розміщені картинки і невеликий текст. Натиснувши на “Детальніше” – ми потрапляємо на сторінку конкретної програми.

Така сторінка також виконана як landing page, і має такі блоки:

• Картинка або відео;
• Текст;
• Етапи лікування;
• Вартість програми лікування;
• Форма запису (з двома полями);
• Переваги програми перед моно-лікуванням (картинка в колі з невеликим текстовим супроводом);
• Список захворювань;
• Відгуки;
• Контакти.

Найцікавіший модуль тут – це ціни, представлена чотирма категоріями:

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

Під час натискання на будь-яку категорію виникає одно-рівневе випадаюче меню.

Лікарі

Сторінку представлено у вигляді списку лікарів з фотографіями та коротким описом кожного. В одному ряду розташовано по чотири картки, щоб додати динаміки – білий фон самої картки чергується з синім.

Сторінка конкретного лікаря містить у собі:

• фото фахівця
• професійну біографію
• спеціалізацію лікаря
• форму запису

Ціни

Щоб переглянути вартість маніпуляцій для кожної послуги, потрібно натиснути кнопку “Переглянути прайс” – випаде меню з цінами. Якщо воно не потрібне, натискаємо на слово “згорнути”, і воно повертається у вихідне положення.

Блог

Тут представлені анонси постів – у вигляді яскравої картинки з коротким текстовим вступом, а також кнопкою “Детальніше”, при натисканні на яку – людина потрапляє безпосередньо на сторінку з новиною. Розташовані по три – в одному ряду.

Флексис у спорті

Оскільки клініка ортопедії, неврології та спортивної медицини “Флексіс” виступає спонсором різних спортивних заходів, ми вирішили винести пости про це в окрему вкладку. Виконана вона так само, як і “Блог”, але всередині самого поста є можливість додавання галереї (з пагінацією).

Відгуки

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

• Відгуки
• Запитання/відповідь

Відгуки виконані у вигляді текстових блоків, кожен з яких можна розгорнути, клікнувши на кнопку “Читати повністю” – це зроблено для оптимізації місця на сторінці. Крім того, є можливість залишити власний відгук, заповнивши відповідну форму.

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

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

3 етап

Підготовка контенту та наповнення

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

Крім створення сайту, ми також створили дизайн для групи у Facebook, яку вели на самому початку співпраці. Навчивши представника клініки “Флексіс”, ведення пабліка перейшло в руки замовника. Проводили кілька рекламних кампаній у соцмережі Facebook.

Крім того, фахівці агентства “МедМаркетинг” створили канал для цієї медустанови, де розміщено відео, які робили раніше у “Флексіс”, а також нові ролики, створені нашою командою:

• Ми проводили відеозйомку в клініці
• Монтували ролик
• Розробляли кольорокорекцію
• Підбирали фонову музику
• Отрісовивали заставки та плашки

Результат