(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/top.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-top'); if (container) { s.onload = function () { new window['BrandingTop']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: '', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0); (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(22537453, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(22537453, 'hit', window.location.href);

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

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

О проекте

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

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

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

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

  • Срок разработки: три месяца.
  • Стоимость: 630 тысяч рублей.
  • Команда: четыре дизайнера, два разработчика, менеджер проекта, аккаунт-менеджер, фотограф, редактор.

Заказчик

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

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

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

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

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

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

Аналитика

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

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

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

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

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

Марина Донцова, менеджер проектов digital-агентства Атвинта

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

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

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

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

Почему стоит обращаться:

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн

В дизайне корпоративного сайта важны две вещи:

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

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

Концепция

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

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

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

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

Точно, путь!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Елена Никулина, редактор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI-киты

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

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

Разработка

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

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

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

Алексей Нибо, арт-директор digital-агентства Атвинта

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

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

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

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

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

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

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

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

Результаты

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

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

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

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

(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/bottom.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-bottom'); if (container) { s.onload = function () { new window['BrandingBottom']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: 'cba9d7af-106a-5987-b37f-a9fcea6fbfbb', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0);
0
62 комментария
Написать комментарий...
Атвинта digital agency
Автор

А у вас воровали кейсы из портфолио? Мы с удивлением прочитали на VC, как о сайте, который делали мы, пишет какой-то Слава. Сейчас особенно смешно, потому что редакция VC перенесли кейс в нашу ветку, когда разобрались, кто автор работы на самом деле. 

Ответить
Развернуть ветку
Родион Гилязов

Нашел небольшой баг на странице: https://roddom.odkbko.ru/calculator/
При выборе Юлии, нет картинки в "корзине"

Ответить
Развернуть ветку
2 комментария
zulus

достойно, видно что потрудились
вышло очень в тему )

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо! А проект этот делали мы. Предыдущий "автор" не имеет и никогда не имел никакого отношения к нашему агентству и этому проекту, а просто скопировал статью с нашего сайта.

https://atwinta.ru/material/projects/odkb

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Nikita Zuborev

Достойно, даже самому родить захотелось :D

Ответить
Развернуть ветку
Aloha Nik

Красиво и минималистично вышло. А главное дёшево. Любят дизайнеры над фронтенд-разработчиками поиздеваться)))

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо) У нас наоборот не издеваются, а советуются или предлагают варианты решения, что и описано в статье.

Кстати да, этот сайт делали мы, а Слава Викжанович просто скопировал  материал о разработке для роддома с нашего сайта. 

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр Пакшин

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Вася Михеев

В КемеровО, блядь! В КемеровО! Вы же не про город Кемеров пишите.
А сайт, да, хороший получился.

Ответить
Развернуть ветку
Ilya Vlasov
Ответить
Развернуть ветку
3 комментария
Ilya Karbyshev

Наверное Слава не знает, как это пишется, потому что не имеет отношения ни к сайту, ни к городу нашему. Сайт мы делали, и это мы из Кемерово - агентство Атвинта. А кто такой этот Слава и почему пишет на vc о нашей работе, непонятно.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Marina Yakushina

Ого! Здорово получилось 😊 приятно смотреть! Я как представитель целевой аудитории оценила 😀👍

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Оксана Коломбет

симпотично

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Andrew Simon

Статья то для чего? Кому то надо обосновать, за что уплачены 630 тыр, или откуда они взялись у клиники в Кемерово при известной средней зарплате врача?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Александр Пакшин

Роддом на пеленки в месяц больше тратит.

Ответить
Развернуть ветку
Nadiyah Baltacheva

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Maxim Belozorov
Ответить
Развернуть ветку
Артем Богданов

Хм...

Ответить
Развернуть ветку
Александр Анищенко

Мне понравилось! Отлично сделано, видно, что качественная работа!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Иван Дубышкин

Симпатичный сайт, молодцы. Маленькое замечание - вы привозите фотографа, выставляете свет, потом обтравливаете и обрабатываете фотографии, и после всех хлопот вы неоптимизированные картинки публикуете на сайте. tinyjpg.com вам в помощь, фото врачей полегчают на минус 70% без потери качества, сайт будет быстрее открываться. 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо! Верное замечание про оптимизацию. Проект в процессе доработок, все это будет исправлено.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Александр Гордеев

Очень круто! Молодцы!
Но есть пара комментариев:
1. При открытии сайта с телефона в браузере Safari в разделе "Стоимость" знак рубля не отображается(квадратик).
2. В том же разделе сначала есть качельки выбора и все вроде более менее понятно, но ниже (начиная с лимузина) не понятно, выбрал ли ты услугу или нет. То что выбранные услуги отображаются только в самом низу не совсем удобно.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Doco4ka

Большенство не тестят на мобилках свою вёрстку. Не редко вижу на сайтах квадратик заместо ₽..

Ответить
Развернуть ветку
Kirill Ceban

А почему у вас стрелочки и иконки в png, хотя анимированные объекты в svg? В 2019 году можно использовать векторную графику уже совершенно свободно вообще везде, что добавило бы резкости на мобильных устройствах.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо за замечание, все это будет заменено в ближайшее время

Ответить
Развернуть ветку
Lena

Первое, что бросилось в глаза.

Ответить
Развернуть ветку
Кирилл Сухов

Лeверт Екатерина disabled

Ответить
Развернуть ветку
Андрей Епанчинцев

630/3=210 тыс в месяц бюджет на команду из 10 человек, т.е. 21 тыс на рыло. Чуваки, да вы в глубоком минусе. И это я не считаю налоги, амортизацию, софт печеньки и прочий менеджмент/уборшиц. Долго еще планируете сайтами заниматься?))

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
3 комментария
Vl Al

"т.е. 21 тыс на рыло."

Ты как-то странно считаешь.

Вбелую - около "10 круб на рыло".

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
59 комментариев
Раскрывать всегда