Сайт родильного дома в Кемерове

О проекте

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

Главная страница — это подобие Customer Journey Map, карты пути пользователя. Сайт родильного дома последовательно приглашает женщин на экскурсию, в школу мам и в итоге — на роды именно у них.

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

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

Срок разработки: 3 месяца
Стоимость: 630’000 рублей
Команда: 4 дизайнера, 2 разработчика, менеджер проекта, аккаунт-менеджер, фотограф, редактор.

Заказчик

Областная детская клиническая больница в Кемерове решила обновить сайт родильного дома №5, находящегося в ее структуре.

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

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

Проблема и задача

У роддома был только раздел на сайте Детской областной клинической больницы, к которой он относится.

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

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

Аналитика

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

Как обычно делают сайты для больниц

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

Сайты были похожи друг на друга по дизайну, структуре, в текстах. На главной странице — стоковые фотографии детей или семей, разделы сайта не дают ответы на вопросы пациентов, а в описаниях услуг — непонятные медицинские термины.

Что важно заказчику сайта

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

Почему обращаются сейчас:

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

Получается, сейчас обращение пациентов в этот родильный дом — дело случая. И лишь небольшая часть осознанно выбирает рожать здесь.

Что нужно пользователям сайта

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

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

Родильный дом они выбирают по таким критериям:

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

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

Структура контента на сайте для роддома

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

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

Дизайн

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

Концепция

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

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

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

Нужно было что-то именно про путь, который проходит женщина от новости о беременности до встречи с ребенком.

Точно, путь!

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

Оставалось добавить изюминку. Мы стали перебирать варианты, какие моменты в течение беременности самые запоминающиеся. Одна из дизайнеров вспомнила о трогательном моменте, когда она впервые увидела будущего малыша на УЗИ.

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

Концепция была принята с первого раза.

Слайдер-презентация врачей

После разработки концепции перешли к внутренним разделам.

На этапе аналитики мы выяснили и от самого заказчика, и от опрошенных женщин, что врачи больницы — основной повод обратиться именно сюда. Значит, этому разделу нужно уделить особое внимание. На этой странице решили сделать слайдер с фотографиями врачей, рассказать про их образование и опыт. И добавить душевности: возле каждой фотографии написать что-то личное про врача, какую-то именно его фразу.

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

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

Но оказалось, что у кого-то из врачей просто нет фотографий в подходящем качестве, а те, что есть, сложно вписать в нужный формат и размер. А в 60 анкетах получили практически одинаковые и формальные ответы на все вопросы.

Решили: надо фотографировать и проводить интервью с врачами самим.

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

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

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

Информационные страницы

Разделы «О роддоме», «Экскурсии» и «Школа мам» — это разделы, где пользователи в первую очередь хотят получить ответы на свои вопросы. В дизайне таких страниц главное — контент и его подача.

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

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

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

В «Школе мам» мы рассказали, как проходят занятия, как записаться, показали зал для уроков. Добавили описание уроков, как в настоящей школе.

В разделе «Экскурсии» для подачи информации снова обратились к метафоре пути, которую использовали на главной странице. Рассказали, что посетители узнают на экскурсии. Добавили кнопку «Запись по телефону», чтобы посетителям было удобно записаться на экскурсию с этой страницы.

Календарь беременности и калькулятор родов

Это интерактивные страницы, которые сообщают информацию в ответ на действия пользователя.

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

«Калькулятор родов» — это раздел «Стоимость» в главном меню.

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

Для этого раздела разработали 3D-иконки для визуального обозначения каждой услуги.

UI-киты

Продуманный и уникальный дизайн мало просто нарисовать. Его нужно еще и правильно сверстать, не упустив ни единой мелочи. А это невозможно без подготовки UI-кита и командной работы дизайнеров и frontend-разработчиков.

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

Разработка

Самое сложное при разработке сайта — точно реализовать все задумки дизайнеров и оптимизировать, чтобы сайт быстро открывался на разных устройствах.

Уже на этапе создания макетов дизайнеры проверяли каждый элемент на возможность реализации.

*CodePen — интернет-сообщество, в котором разработчики со всего мира делятся элементами кода на основе HTML, CSS и JavaScript.

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

Frontend-разработчики и дизайнеры совместно выверяли анимацию по кадрам.

Вот пример неудачного дубля:

А вот такого результата добились в процессе кропотливой работы.

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

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

В административной панели сайта настроили возможность менять контент на страницах. Например, добавить нового сотрудника в раздел о врачах, изменить информацию в разделах «Экскурсии» или «Школа мам», добавить или убрать услуги в разделе «Стоимость».

Результаты

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

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

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

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