1 етап
Формування структури і прототипування
Структура «старого» сайту перебувала в межах норми, за деякими винятками, які можна було виправити нескладними діями. Після детального аналізу ми приступили до проектування, в процесі якого потрібно було врахувати те, що вже було присутнє на модернізованих сторінках. Річ у тім, що на старому сайті були елементи, деякі з яких потрібно було повністю міняти, а в деяких додати лише деякі деталі. В результаті у нас вийшло шість прототипів основних сторінок сайту, а також 10 прототипів Лендінгів.
У підсумку, обговоривши всі деталі з керівництвом багатопрофільної клініки «СІТІ КЛІНІКА», ми прийшли до висновку, що потрібно повністю модернізувати такі сторінки:
- Головна;
- Розділ «Лікарі»;
- Відгуки;
- Сторінка контактів;
- Сторінка «Про клініку».
Крім того, необхідно було додати сторінку конкретного лікаря, яка на сайті була відсутня, взагалі.
2 етап
Відрисовка дизайну та програмування
Сайт для багатопрофільної клініки «СІТІ КЛІНІКА» виконаний у flat стилістиці (плоский дизайн), що відповідає основному тренду, прийнятому сьогодні в веб-дизайні.
Для кожного Лендінга ми підбирали свою унікальну фонову картинку, яка б відображала суть саме цієї сторінки.
Структура кожного Лендінга приблизно однакова, скрізь збережена певна послідовність блоків:
- Велика фонова картинка, із загальною інформацією, яка послуга пропонується, із зазначенням ціни за консультацію фахівця по даному напрямку.
- Текстовий блок, з відеоконтентом про дану послугу.
- Переваги багатопрофільної клініки «Сіті Клініки», виконані у вигляді великих яскравих іконок.
- Форма запису на прийом.
- Перелік того, що саме пропонують за цією послугою.
- Схема лікування, виконана у вигляді зрозумілої чітко структурованої таблиці.
- Ще одна кнопка з формою запису на прийом.
- Перерахування лікарів, які займаються даними захворюваннями. У рядку - по три картки, з можливістю пагінації.
- Відгуки пацієнтів.
- Невеликий блок з SEO-текстом.
- У футері сайту - карта проїзду.
Це було зроблено свідомо, так як в планах багатопрофільної клініки «СІТІ КЛІНІКА» - повна зміна сайту, на новому движку. А вже з готовими Лендінгами це зробити набагато простіше, та й дешевше. Саме тому ми спочатку робили такий дизайн, щоб потім, при розробці нового сайту вже не малювати його, а зберегти цей. Таким чином, клієнтові не доведеться платити двічі.
Головна сторінка
На сторінці є три великі блоки, в яких виділені основні напрямки клініки:
- Гінекологія і центр планування сім'ї.
- Хірургія одного дня.
- Клініка ендокринопатій.
Натиснувши на кнопку «Детальніше», відвідувач потрапляє на окрему сторінку для кожного з напрямків, де детально описується, які саме послуги надаються.
Також тут є один або два відеоролика на дану тему.
Внизу сторінки - красива картинка з фоновим відео.
Клікнувши на кнопку Play, виникне вікно pop-up, де можна переглянути відеоролик про клініку.
Про нас
Щоб не обтяжувати цю сторінку текстом, наші фахівці вирішили деякі дані представити у вигляді інфографіки, або ж іконками з короткими підписами.
Внизу сторінки представлена фотогалерея, спочатку в ній відображається по три фото, але потім, за допомогою пагінації можна переглянути й інші зображення.
Лікарі
Ця сторінка виконана у вигляді списку з карток кожного з лікарів. Спочатку відвідувач сайту може просто переглянути ім'я та прізвище лікаря, його посаду, кваліфікацію, а також стаж роботи. В одному рядку представлено по 4 картки.
Якщо людині хочеться прочитати більш докладно, він може натиснути відповідну кнопку, і перейти на сторінку кожного з лікарів.
На сторінці, яка присвячена конкретного лікаря, ви можете прочитати докладну біографію, а також, що входить до професійної компетенції даного фахівця. Нижче, в спеціальній формі, ви можете записатися на прийом, заповнивши наступні поля:
- Ім'я;
- Телефон;
- E-mail;
- Залишити повідомлення.
Після цього йде блок, де представлені інші лікарі клініки «СІТІ КЛІНІКА». В одному рядку - по три картки, також є можливість пагінації.
Ціни
Основні проблеми старої версії сторінки «Ціни»:
- Незрозуміла структура;
- Відсутність логіки;
- Перемішані різні напрямки послуг.
Перед нами стояло завдання - зробити зрозумілу логічну сторінку. Але так як це досить складно, враховуючи, що у багатопрофільної клініки «Сіті Клініка» не одне, а три основних напрямків, ми продумали дворівневе меню, при якому один список випадає з другого.Таким чином, ми впорядкували вартість на всі послуги, і зробили сторінку «Ціни» зрозумілою для користувачів.
Відгуки
На старому сайті було все намішано, перед нами стояло завдання - структурувати ті дані, які вже є. І дати можливість людям залишати нові відгуки.
Що ми змінили:
- Поміняли топ і футер на сайті, а так як вони наскрізні, тобто видно на всіх сторінках, то всі сторінки і розділи стали «їстівними».
- Прибрали слайдер, який був на всіх сторінках.
Якщо відвідувач хоче залишити відгук, у верхній частині сторінки є форма запису для цього, де присутні кілька полів:
Фото
У фотогалереї багатопрофільної клініки «СІТІ КЛІНІКА» представлені зображення на різну тематику. У кожному рядку йде по три картинки.
Натиснувши на фото, ви можете переглянути її більш детально у спливаючому вікні pop-up.
Всі роботи по верстці і програмування було вирішено делегувати компанії, яка розробляла сайт. Оскільки, як ми вже говорили вище, сайт був зроблений на власній розробці цієї веб-студії, і для того, щоб нам розібратися з кодом, треба було б дуже багато часу. Все це не підходило клієнту, і як наслідок відбилося б на ціні. Ми б зробили це в 2-3 рази дорожче, ніж студія, яка сама і написала цю CMS.
На жаль, програмування і верстку робили не ми, тому до цих пір знаходимо «баги»: щось правимо самостійно, щось - передаємо в ту веб-студію, яка робила CMS. З цих же причин у сайту відсутній мобільна версія. Все це буде враховуватися при розробці нового сайту.
3 етап
Підготовка контенту і наповнення
Після того, як практично вся робота була вже завершена, ми розробили ще 10 Лендінгів, за погодженням з керівництвом багатопрофільної клініки «СІТІ КЛІНІКА». І для цих нових сторінок ми також створили відео контент.
Копірайтери агентства «МедМаркетинг» писали всі тексти для Лендінга, з урахуванням подальшого SEO-просування. Завдяки тому, що у нас працює медичний редактор, весь текстовий контент написаний дійсно професійно, і зрозумілий не тільки пацієнтам, але і відповідає вимогливому смаку самих лікарів.
Крім того, фахівці агентства «МедМаркетинг» створювали відеоролики для кожного Лендінга. Всього у нас вийшло 10 роликів. Після розробки ще кількох Лендінгів, ми зробили ще близько десяти відео.
Результат
