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

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

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

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

Заказчик

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

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

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

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

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

Аналитика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Макс Шлыков

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Андрей Негодяев

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

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

Да :)

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

Именно в нём!

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

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

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

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

Ответить
Развернуть ветку
Артем Пасько

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

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

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

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

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

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

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

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

Macbook Pro 2015, Safari 13.02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Андрей Негодяев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Развернуть ветку
S.Z

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

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