Сайт Областной детской клинической больницы в Кемерове

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

В закладки
Аудио

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

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

Заказчик

Детская областная многопрофильная больница объединяет в себе несколько больниц и поликлиник города, родильный дом, центр реабилитации. Ранее digital-агентство «Атвинта» разработало отдельный сайт для родильного дома этой больницы.

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

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

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

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

Аналитика

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

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

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

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

Цель заказчика — продвигать больницу в целом, познакомить со всеми поликлиниками, направлениями и врачами.

Кроме того у больницы есть приоритетные направления, на которые они хотят обратить особое внимание пациентов: родильный дом, детский центр реабилитации «Золотая рыбка» и молочная кухня с собственным производством продуктов для детского питания.

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

Пользователи сайта — не сами пациенты, а их родители.

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

Что еще важно учесть

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

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

Что нужно реализовать:

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

Дизайн-концепция

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

Основной визуальный образ

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

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

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

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

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

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

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

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

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

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

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

Для начала выделили два сценария пользовательского поведения и развели их на первом экране сайта.

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

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

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

Смотрите видеопрезентацию главной страницы сайта:

Разработка контента

Как только утвердили дизайн-концепцию и главную страницу, приступили к подготовке контента для внутренних страниц.

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

Ежедневно в течение месяца проводили 2–3 часа, фотографируя врачей за работой

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

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

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

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

Дизайн внутренних страниц сайта

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

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

Программирование и функциональность

Управление сайтом и контентом

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

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

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

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

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

Поиск по сайту

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

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

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

Мы нашли выход в перелинковке с уже существующим сервисом онлайн-записи «Врач42», для которого мы ранее разрабатывали дизайн.

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

Результат

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": [], "comments": 38, "likes": 38, "favorites": 69, "is_advertisement": false, "subsite_label": "design", "id": 103824, "is_wide": true, "is_ugc": true, "date": "Wed, 29 Jan 2020 12:21:28 +0300", "is_special": false }
0
{ "id": 103824, "author_id": 108381, "diff_limit": 1000, "urls": {"diff":"\/comments\/103824\/get","add":"\/comments\/103824\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/103824"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
38 комментариев
Популярные
По порядку
Написать комментарий...
3

Я не очень понимаю, как это работает -  но что, родители в Кемерове прям могут выбирать, где лечить детей? Это же не ТЦ какой-нибудь, который можно выбирать исходя из цвета логотипчика.

Ответить
2

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

Ответить
0

По закону житель любого города может выбрать больницу.

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

Ответить
1

КемеровЕ? Рили?

Ответить
3

Рили, рили. В русском языке слова склоняются: https://ilyabirman.ru/meanwhile/2006/11/12/1/

Ответить
0

И с чего вы взяли, что это достоверный источник?

Даже если склоняются, но в данном случае звучит так что ухо режет, склоняйте тогда, когда звучит красиво...

Ответить
1

В статье достаточно ссылок на источники. Обратите внимание на эпиграф: «Недаром помнит вся Россия про день Бородина!»

Ответить
1

Давайте ещё "теперича не то что давеча" вспомним :)

Ответить
1

Блин, даже здесь эта вонь про то, что раньше название этого города не склонялось. Теперь склоняется, смиритесь.

Ответить
0

Именно в нём!

Ответить
2

Красивый и удобный сайт, молодцы! Но мне кажется, что лучше отключить анимацию иллюстраций, но возможно это вкусовщина. :)

Ответить
1

Это же не сервис, на который каждый день заходишь, а промостраничка

Ответить
2

Приятный стильный проект, молодцы 👏

Ответить
1

О, приятный комментарий не о склонении топонимов, приписке детей к больницами и выяснению сколько распилили на проекте xD

Ответить
2

забавно, что кнопка при клике не открывает меню в браузере safari. 
и что домен не защищен ssl сертификатом (=

Ответить
0

Странности. А какая у вас версия и устройство?

Ответить
0

Macbook Pro 2015, Safari 13.02

Ответить
0

Спасибо, разберемся :)

Ответить
2

Стоимость 780к, а по декларации сколько? Сколько конкретно распилил заказчик из бюджета, интересно.

Ответить
0

Зачем склонять название города так, чтобы звучало по уродски? Не ужели не написать "в КемеровО" Нормально же звучит..
"в КемеровЕ" блин ухо режет...

Ответить
1

Кто-то сознательно над русским языком издевается. В Москве почти всех переучили: в Строгине, в Митине, в Люблине, в Марьине и т.д. Всю жизнь было в Строгино, Митино, Люблино, Марьино :) (старею, брюзжу уже)

Ответить
2

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

http://gramota.ru/class/istiny/istiny_1_toponimy/

Ответить
2

Спасибо за ссылку! Кстати, там написано что 1980 года так и было принято, в Люблино, Митино... поэтому для меня в Митине, Люблине и кажется навязанным новоязом.

Ответить
0

Затем, что русский язык никто не отменял вместе с правилами.

Ответить
1

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

Ответить
0

Спасибо) По поводу перетягивания внимания: сайт запустили недавно, для оценки надо через пару месяцев смотреть аналитику. Пока вроде проблем у пользователей с этим нет.

Ответить
1

От анимации начинает слегка мутить, хотелось бы кнопку "откл", статичные картинки не так плохи как кажутся.

Ответить
0

На анимации "людей" шатает, как листья на ветру.

Ответить
1

Хорошая работа и интересная статья, спасибо!
Удивляет, что это происходит в Кемерово.

Ответить
0

В Кемерове))) 

Ответить
1

Интересные svg рисунки, движение тоже в тему, мне нравится, как и весь сайт в целом. Оценивал только визуально. 

Ответить
0

Вообще расписано конечно отлично, видно, что работает копирайтер. Но по факту, неужели на это надо 5 месяцев? 
А кто такой аккаунт-менеджер? 

Ответить
0

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

Ответить
0

Вот это колхоз за 700к., который столько багов имеет, js кривой.
Менталитет отечественного диджитал.

Ответить
0

с цветовым кодированием канеш беда. успокоить бы его) 

Ответить
0

Теперь родители могут выбирать?? Хм

Ответить

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

0

С текстами на сайте беда конечно

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }