Индивидуальный проект сайта стоматологии
31 август 2015

Индивидуальный проект сайта стоматологии

Многие хотят попасть на первую страницу результатов поиска, а мест всего 10...

Кейс стоматология.

Заказчик обратился с потребностью продвижения сайта стоматологический клиники, выглядел он на тот момент вот так.
Данный сайт собран в Adobe Muse, как видно на скорую руку неизвестным фрилансером. Хотя как говорил заказчик, сайт этот продавал услуги и приводил пациентов, правда не из поиска а с контекстной рекламы.

Разумеется такого качества одностраничный сайт да еще и на рф домене продвигать не имело никакого смысла.

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

Дизайн

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

После чего были разработаны эскизы страниц, на основе которых дизайнер создал уже готовые макеты будущего сайта.

Основная структура блоков сохранена, переработана верхняя часть - шапка сайта. Так как черный фон, скорее отпугивает потенциальных пациентов, чем завлекает...

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

Макет страницы в техническом задании дизайнеру


Было рассмотрено несколько вариантов оформления

Еще один:

Еще один:

И остановились на таком:

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

Дальше началась работа с внутренними страницами

Они также как и главная были проработаны сначала в эскизах, и переданы дизайнеру в работу. 

Рассматривался вариант с левым вертикальным меню, но этот вариант был исключен.

Максимально возможное пространство страницы отведено под контентную часть (текст + фото). И верстка дополнительно меню в адаптивном варианте доставила бы лишней головной боли.

Эскиз формы заявки на прием:

Затем главная и все внутренние страницы были переработаны в уменьшенный размер.

Внутренняя страница:

 

Запись на прием:

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

Меню навигации:

  

Все это нужно, что бы сделать верстку сайта адаптивной, то есть одинаково удобно просматривалась на любых устройствах с разрешением экрана, шириной от 1980px до 300px.

Так как по статистике медицинские сайты посещают именно с мобильных устройств:

Статистика взята из открытого источника- Liveitnernet и этот аргумент никак нельхя было упускать, в разработке данного проекта.

И так, по эскизам были оформлены страницы мобильной версии сайта.

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

 

Внутренняя страница:

Меню навигации по сайту:

Форма заявки на прием:

  

Все нарисованное в Photoshop хозяйство было передано программисту-вертальщику, для превращения статичной красоты в динамичную.

Пока программист трудился над адаптивной версткой данного проекта, велась работа по составлению технического задания программисту, который с использованием фреймвока Yii2 и будущей верстки страниц, сделает собственно сам сайт.

Что представляло из себя ТЗ по данному проекту?

Задание на программную часть составило 15 страниц документа Word, с полным изложением того, каким образом должно быть реализовано управление настройками сайта и его контентом. С подробными эскизами каждой страницы административной части сайта. Пример оформления главной страницы админ. части:

Пример оформления раздела управления пользователями:

Форма редактора пользователей в системе управления сайтом с комментариями для разработчика:

Форма редактора пользователей в системе управления сайтом:

Сайт состоит из двух частей

Грубо можно разделить именно так. Первая это сам сайт, его внешняя часть для посетителей, внутренняя часть, административная для управления контентом и наполнением.

Вторая часть это встроенная CRM система, которая позволяет вести полный учет пациентов, докторов клиники и процесса лечения со всей внутренней служебной информацией. То есть, с внешней формы заявки пациент оставляет обращение - запись на прием. Администратор клиники связывается с обратившимся, подтверждает полученную заявку и назначает пациенту доктора, доктор принимает заявку и после приема пациента ставит отметку, что кому когда и где лечил.

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

Это если очень коротко. А в самой системе получилось много нюансов, каждый элемент и функцию системы управления по работе с пациентами нужно было описывать максимально подробно и точно, что бы исключить ошибки и разногласия в правах доступа, передачи заявок между докторами и пациентами, и всех внутренних  данных.

Может возникнуть резонный вопрос,

нафига все так сложно?

1. Клиент поставил четкую задачу, с пониманием того, что он получит на выходе.

2. Готовых решений аналогичного уровня не имеется (Битрикс Медклиника не в счет).

3. Нужен автономный продукт, не зависящий от всяких лицензий, и закодированных движков.

4. Возможность расширения, масштабирования и доработок с развитием сети стоматологий.

5. И наконец, это на самом деле интересный проект, где нужно было всем тщательно поработать мозгами и руками!

Конечно же, как и положено долгостроям, данный проект еще не закончен, но он уже работает на заказчика, и приводит пациентов в клинику, из органического поиска. По мере проведения работ с данным сайтом, информация будет дополнена в этом обзоре.

Комментарии

Сергей 18 июля 2016 в 10:54
Всё здорово, но обилие ошибок удручает...
Ответить
dmitry 20 июля 2016 в 07:19
Благодарю за замечание
Текст был оформлен наспех, так как времени на свой блог крайне мало уделяется, а делиться опытом и практическими реализациями для клиентов нужно, поэтому вышло так, что проверил на ошибки после составления. Благодаря вашему комментарию исправил все найденные на странице ошибки.
Ответить

ОтменитьДобавить комментарий