1 етап
Формування структури і прототипування
Після з'ясування всіх бізнес-цілей і завдань, агентство «МедМаркетинг» розробило 8-9 прототипів основних сторінок:
- Головна
- Про лікаря
- Результати операцій
- Відповіді на питання та інші
Фахівці інтернет-маркетингового агентства «МедМаркетинг»:
- Провели ретельний аналіз, завдяки якому виявили, що сайт займає хороші SEO-позиції. Тому перед нами стояло непросте завдання - зберегти всі url - адреси сайту, щоб позиції не просіли.
- На старому сайті не було деяких корисних розділів, які ми вирішили додати. Наприклад, опис і фото, як виглядав пацієнт до і після операції.
- Ми працювали з готовим фірмовим стилем. Хоча наш арт-директор запропонував для сайту свій шрифт - Futura.
Він був підібраний, з урахуванням загальної стилістики сайту, а також гармонійно поєднувався з новим логотипом доктора Гришина.
Так як прототипи створювалися для внутрішнього користування, ми їх не малювали в спеціалізованій програмі Balsasmiq, а робили їх просто від руки.
2 етап
Відрисовка дизайну та програмування
Сайт виконано у flat-стилістиці, тобто, використано так званий плоский дизайн. Така стилістика найкраще підходить для сайтів подібної тематики, так як вона проста, і дає можливість створити зрозумілу логічну структуру.
Основні посадочні сторінки - це все послуги. Всього їх представлено 8 - за основними напрямками роботи доктора Гришина.Для кожної сторінки фахівці агентства «МедМаркетинг» довго вибирали необхідну картинку: велику, яскраву, соковиту. Завдяки їй відбувається безпосередній вплив на психоемоційний фон. Людина бачить красиву картинку, і розуміє, що його проблема буде вирішена, і він буде виглядати так само, якщо не краще!
Для того, щоб відразу при заході на сайт, користувач бачив, що доктор Гришин - досвідчений фахівець, ми створили фонове відео, яке показується вгорі сайту, де лікар показаний в роботі. Причому кадри були взяті з різних операцій, щоб ще раз підкреслити універсальність даного пластичного хірурга.
Так як це сайт однієї людини, на головній сторінці ми поставили велику фото лікаря. До того ж, Гришин має приємну зовнішність, а це психологічно комфортно для його цільової аудиторії - жінок, які хочуть змінити свою зовнішність.
Головна сторінка
На цій сторінці відразу ж йде фонове відео, щоб привернути увагу відвідувача до того, як працює доктор Гришин. Адміністративне меню розташовано зліва. Ми свідомо не включали туди розділ з послугами, і вивели їх в окремий блок, який знаходиться нижче. Назва кожної послуги написано під ромбом. Геометричні фігури - невеликі іконки, дивлячись на які відвідувач відразу розуміє, про що мова. Адже не всі люди, які заходять вперше сайт пластичного хірурга, знають назву тієї чи іншої операції. Для цього дизайнери агентства «МедМаркетинг» і підібрали відповідні іконки.
На цій же сторінці розміщено велике фото доктора Гришина, і перераховуються сім фактів про нього, як про професіонала. Для цільової аудиторії сайту це дуже важливо - пояснити, чому можна довіряти цьому фахівцеві.
Сторінки послуг
Так як саме ці сторінки є найбільш важливими на сайті, кожна з них являє собою окремий Лендінг. Тут представлені:
- Текстовий блок, в якому мова йде про те, що собою представляє та чи інша методика.
- Детальний опис, як саме проходить операція.
- Відео.
- Коротка інформація, де розповідається, чому саме доктор Гришин може допомогти впоратися з цією проблемою.
- Коротка форма запису на прийом.
- Приклади виконаних операцій (кожен з яких можна переглянути більш докладно, клікнувши на відповідну кнопку).
Також на кожній з цих сторінок є перерахування переваг саме доктора Гришина, яке наші дизайнери оформили у вигляді невеликого блоку з іконками і коротким описом.
На всіх сторінках послуг є форма запису на прийом. Ми свідомо зробили її невеликою, з урахуванням специфіки звернень, так як всі первинні переговори веде сам лікар. Форма запису складається всього з двох полів:
- Ім'я.
- Телефон.
- і кнопка «Надіслати».
Про лікаря
Фахівці «МедМаркетинг» довго вибирали фото для цієї сторінки. Нарешті, після погодження з клієнтом, і прийшовши до консенсусу - все затвердили. Зліва від фотографії вказується 7 основних фактів, чому варто звертатися саме до цього фахівця, які дублюють ті, що були на головній сторінці. Відмінності - в кольоровій гамі, а також у фотографії доктора Гришина.
Для даної сторінки був написаний хороший інформативний текст, де розповідається біографія лікаря, а також вказуються його професійні досягнення. Нижче ви можете переглянути дипломи і сертифікати доктора Гришина.
Потім йде блок з Відеовідгуками його пацієнтів. Відео можна переглянути, клікнувши на кнопку і викликавши спливаюче вікно pop-up.
Для зареєстрованих акаунтів на youtube, є можливість поділитися відео. І стандартно: переглянути його на цьому відеохостингу, змінити якість відтворення, збільшити віконце на весь екран.
У футері розташований логотип доктора Гришина, контактні дані, а також кнопки груп в соц. мережах. В цілому, вся сторінка виконана в єдиному стилі, а також колірній гамі. Всі елементи логічно доповнюють один одного.
Станиця «Вартість»
Ціни на послуги представлені у вигляді списку. Виконано в чотирьох кольорах:
- білий;
- світло сірий;
- темно-сірий;
- бірюзовий.
Завдяки тому, що кожна графа виділена різними кольорами, відвідувачеві набагато легше орієнтуватися на даній сторінці.
Сторінка «Питання-відповідь»
На старому сайті ця сторінка була представлена дуже незручно, до того ж вона виглядала застаріло.
Агентство «МедМаркетинг» розробило цю сторінку, з урахуванням простоти і логіки навігації. Крім того, ми зробили фільтрацію за напрямками послуг.
Так як питань доктору Гришина задається багато, внизу сторінки є пагінація для зручності відвідувачів. Також є можливість вибрати тему питання за видом послуг.
Крім того, якщо відвідувач сайту не знайшов відповідь на своє питання, є спеціальна форма, де він може задати його. Так як послуги пластичного хірурга - тема вельми конфіденційна, крім основних граф для заповнення, ми також зробили додаткову, де потрібно ввести код. У цій же формі є наступні поля для заповнення:
- Ім'я;
- Вік;
- e-mail;
- безпосередньо графа, де задається питання.
В топі сайту розташовані три наскрізні кнопки, які видно на будь-якій сторінці сайту:
- Питання відповідь.
- Запис на прийом.
- Зворотній дзвінок.
Ми свідомо зробили так, щоб їх було видно всюди, так як саме через них потенційний клієнт може напряму зв'язатися з лікарем.
З кнопки «Питання / відповідь» йде посилання на відповідну сторінку.
Коли відвідувач натискає на кнопку «Запис на прийом», перед ним з'являється форма з наступними полями:
- Ім'я;
- Телефон;
- e-mail;
- Випадаючий список послуг;
- а також можливість завантажити своє фото.
При кліці на кнопку «Зворотній дзвінок», випадає акуратне віконце, де на темному фоні білим кольором виділено всього дві графи:
- Ім'я;
- Номер телефону.
Сайт доктора Гришини був виконаний на CMS под названием Drupal. Вона є однією з найпопулярніших в світі системою управління контенту, до того ж проста в управлінні.
Окремо хотілося б сказати про ромби. Саме ця геометрична фігура була обрана, щоб в ній підносити різну графічну і текстову інформацію. Ця геометрична фігура була вибрана не просто так. Згідно асоціативної психології, ромб - потужний прямолінійний знак. Його люблять ті, хто не боїться висловлювати свою точку зору. Якщо кути ромба промальовані дуже гостро, це говорить про явну схильність до агресії. Тому всі ромби на даному сайті мають плавні лінії. Таким чином, за допомогою ромбів різної величини і кольорової палітри, дизайн сайту мимоволі наштовхує відвідувача, що доктор Гришин - сильна потужна фігура. Такому фахівцеві точно можна довіритися.
Де на сайті присутні ромби:
- Перед назвами всіх розділів в робочому меню також йдуть ромби.
- На головній сторінці біля кожної послуги зліва стоїть невеликий ромб.
- Вони логічно «перетікають» в фотографії операцій, де картинки до і після розташовані всередині таких же ромбів.
- Сертифікати та дипломи, представлені на сторінці «Про лікаря», спочатку видно в таких ромбах.
- На сторінці «Результати операцій» фотографії до і після також розміщені в ромб. Така форма дозволяє додатково зосередити увагу відвідувачів сайту на середині картинки.
- Відео в ромбах.
- Маркери, поруч з якими зображені невеликі ромби та інші.
Також наші дизайнери розробляли дизайн для соціальних мереж, щоб вони виглядали в єдиній стилістиці з оновленим сайтом.
3 етап
Підготовка контенту і наповнення
Копірайтери нашого агентства написали тексти для сайту доктора Гришина, враховуючи SEO-запити з даної тематики. Такий підхід дозволить в подальшому вивести сайт в ТОП пошукових систем.
Оператор агентства «МедМаркетинг» знімав відеоролики, які згодом ми розмістили на сторінках послуг. У блоці бірюзового кольору з текстом, внизу в уже «звичному» ромбі, знаходиться відео. Виглядає така форма, всередині якої є всім відомий значок play - дуже гармонійно, і підкреслює загальну стилістику дизайну сайту.
Клікнувши на нього, спливає вікно pop-up, і відвідувач сайту може переглянути відеоролик.
Хотілося б також відзначити, що наші фахівці виконали титанічну працю по обробці всіх зображень на сайті. Особливо це стосується фото до і після операцій. Так як всі зображення були надіслані самими пацієнтами доктора Гришина, вони мали різні розміри, формати, колір, яскравість і насиченість. Крім того, деякі з них були виконані горизонтально, інші ж - вертикально. Фон зображень також був різним. Наші фахівці ретельно опрацювали кожне фото. Відцентрували кожне зображення, прибрали «негарний» фон. Виконали величезний обсяг роботи, щоб на сайті всі фотографії виглядали доречно, правильно і симетрично.
