Родителям важно, чтобы здоровьем их детей занимались лучшие врачи, а медучреждение было оснащено современным оборудованием. Команда digital-агентства «Атвинта» рассказывает, как дизайн сайта помогает презентовать сильные стороны детской больницы и сформировать доверие к медицинскому учреждению.
В разработке мы сделали упор на минималистичный дизайн с анимированными иллюстрациями и структурированную подачу информации, которая нужна пациентам.
- Срок разработки: 5 месяцев.
- Стоимость: 780 тысяч рублей.
- Команда: проектировщик, 2 дизайнера, иллюстратор, моушн-дизайнер, 3 разработчика, менеджер проекта, аккаунт-менеджер, фотограф, копирайтер.
Заказчик
Детская областная многопрофильная больница объединяет в себе несколько больниц и поликлиник города, родильный дом, центр реабилитации. Ранее digital-агентство «Атвинта» разработало отдельный сайт для родильного дома этой больницы.
Проблема и задача
Сайт медучреждения не менялся многие годы. Главврач больницы хотел презентовать имидж больницы, как одной из самых высокотехнологичных, с сильным коллективом врачей всех направлений. Устаревший дизайн сайта не способствовал такому имиджу.
Нужен был сайт с новым стильным дизайном, ориентированный на пользователей — родителей с детьми из Кемерово и Кемеровской области.
Цель сайта — рассказать об услугах больницы, показать ее возможности и познакомить с врачами.
Аналитика
Для начала мы досконально разобрались в задачах, стоящих перед администрацией больницы, которые нужно решить с помощью корпоративного сайта.
Для этого мы проинтервьюировали главврача и ключевых сотрудников больницы, выяснили приоритеты в развитии медучреждения и обязательные требования к сайтам этой тематики.
Далее изучили потребности пациентов и их ожидания от сайта медучреждения, чтобы выбрать реализацию, которая поможет правильно подать информацию и позиционировать больницу.
Что важно заказчику
Цель заказчика — продвигать больницу в целом, познакомить со всеми поликлиниками, направлениями и врачами.
Кроме того у больницы есть приоритетные направления, на которые они хотят обратить особое внимание пациентов: родильный дом, детский центр реабилитации «Золотая рыбка» и молочная кухня с собственным производством продуктов для детского питания.
Что важно пользователям
Пользователи сайта — не сами пациенты, а их родители.
Пользователи хотят заранее узнать о больнице: какие врачи будут работать с их ребенком, какие условия пребывания в стационаре, возможности лечения и диагностики, сколько это может стоить. А еще хотят сразу записаться на прием или связаться с нужным отделением для консультации.
Что еще важно учесть
По закону на сайте государственного медучреждения обязательна общая информация о нем, лицензии, информационные памятки для разных групп лиц.
Это официальная информация, которую редко читают, хотя ряд документов полезен пациентам. При разработке сайта нужно не только формально соблюсти требования, но и так подать информацию, чтобы она была понятна и интересна.
Что нужно реализовать:
- Разработать дизайн-концепцию и визуальный контент, чтобы создать узнаваемый визуальный образ и позиционировать больницу в интернет-пространстве.
- Спроектировать структуру сайта, разработать текстовый контент и подготовить фотографии сотрудников. Это нужно, чтобы систематизировать информацию о больнице, подать ее в понятном виде и помочь посетителям сориентироваться в разделах сайта.
- Разработать внутренние страницы сайта, учитывая потребности аудитории — родителей с детьми.
- Реализовать функциональность сайта и интегрировать систему управления контентом. Это поможет администрации больницы самостоятельно добавлять информацию и расставлять акценты на наиболее важных услугах и направлениях работы.
Дизайн-концепция
Работу начали с создания дизайн-концепции. В концепции ушли от банальных идей, стоковых фотографий и изображений больницы на главной странице. Остановились на подаче через анимированные иллюстрации, минимализм, чистые цвета и акценты на важной для пациентов информации.
Основной визуальный образ
В качестве главного визуального образа использовали иллюстрации в минималистичном стиле. В них символически передаем ситуации общения пациентов с врачами.
Образ родился сразу. На собрании команды обсудили идею, а иллюстратор в тот же день показала первые наброски. После оцифровки мы презентовали идею иллюстраций главврачу и сразу же получили одобрение.
Минимализм всегда отлично дополняется анимацией. Поэтому, когда мы определились со стилистикой иллюстраций, сразу поняли, что нужно их «оживить».
Современные инструменты и правильно подобранные технологии позволили нам реализовать анимацию, которая просто интегрируется в верстку, практически без участия разработчиков.
Главная страница
Разработка главной страницы — фундамент дизайна. На ее примере мы показываем, как будет выглядеть сайт в результате работы и как он поможет решить задачу пользователей и заказчика.
Задача была сложная: нужно было структурировать большое количество информации таким образом, чтобы пользователи не запутались в ней. При этом важно соблюсти законодательство и разместить информацию, которая обязательно должна присутствовать на сайте государственного медучреждения.
Эту задачу мы решили так: основную информацию, которая полезна пациентам, показали сразу на главной странице. А нужные по требованию закона документы разместили в разделе «Полезное» внизу главной страницы.
Главная страница сформирована по принципу посадочной, где посетитель последовательно изучает информацию и принимает решение обратиться в медучреждение. Информация расположена по степени приоритетности для посетителя и на каждом шаге предлагает пользователю узнать больше о больнице.
Для начала выделили два сценария пользовательского поведения и развели их на первом экране сайта.
- Те, кто уже является пациентом хотят сразу получить контактную информацию и возможность записаться на прием. Для них мы дали возможность сразу перейти в нужный раздел по кнопке «Пациентам».
- Те, кто хочет больше узнать о больнице, ее услугах и врачах, чтобы принять решение обратиться туда. Для них на первом экране приглашение познакомиться с медучреждением — кнопка «Подробнее о больнице».
Сразу после первого экрана расположили контакты на случай неотложных ситуаций по профилю больницы: родильного дома, травмпункта и приемного отделения стационара.
Далее — информация об услугах и медперсонале. Отдельным блоком выделили направления, приоритетные для продвижения: роддом, реабилитационный центр «Золотая рыбка» и молочную кухню.
Смотрите видеопрезентацию главной страницы сайта:
Разработка контента
Как только утвердили дизайн-концепцию и главную страницу, приступили к подготовке контента для внутренних страниц.
Контент нужен был до этапа дизайна: сайт информационный, от количества и содержания текста, фотографий, изображений зависит, как будет выглядеть каждая страница. Чтобы понять, какой контент нужен, исходили из потребностей пользователей, паттернов восприятия информации и задач сайта.
Мы провели много персональных, интерьерных и репортажных фотосессий, подготовили текстовые описания услуг и подразделений для соответствующих страниц. Собрали информацию по каждому медицинскому специалисту для раздела о врачах.
Создание контента — объемный блок работы. Например, только врачей более 250 человек. И нужно договориться, чтобы провести фотосессию с каждым, собрать о каждом информацию.
Плюс нужен был текст и фотографии для каждого подразделения. Поэтому решили параллельно создавать контент и по мере его появления проектировать структуру каждой страницы, чтобы к началу дизайна у нас уже были фотографии и текст.
Дизайн внутренних страниц сайта
Внутренние страницы сайта дают пользователям информацию по интересующим вопросам: о конкретных врачах, услугах или направлениях деятельности больницы.
Страницы разрабатывали по принципу шаблона, чтобы в будущем представители больницы могли сами их конструировать из блоков. Сразу продумывали какие блоки будут обязательны для каждого типа страниц, а какие будут варьироваться в зависимости от наличия информации.
Программирование и функциональность
Управление сайтом и контентом
Такая большая медицинская структура меняется, появляются новые подразделения, новые сотрудники. А значит, в дальнейшем на сайте будет пополняться информация и разделы. Нужно было предусмотреть возможность создавать новые контентные страницы без привлечения разработчиков.
Для этого в панели управления контентом разработали блочные шаблоны для внутренних страницы сайта. Шаблоны продумали сразу на этапе проектирования: определили, какие блоки понадобятся, какие из них будут редактируемыми или взаимозаменяемыми, какие будут по умолчанию.
Сайт очень легко наполнять, потому что под каждую страницу есть шаблон с определенным набором блоков. Например, если нужно добавить отделение, в админке выбираем шаблон отделения и наполняем его.
Страничка составляется из независимых блоков, каждый из которых заполняются отдельно. Если какой-то информации нет, блок просто скрывается.
Поиск по сайту
Еще одна функция, которая важна для сайта с большим количеством информации, — поиск по всему ресурсу. Он позволяет найти врача, услугу, подразделение по ключевым словам и экономит время посетителей сайта. Не нужно ходить по всем страницам в поисках информации, если пользователь точно знает, что он хочет найти.
Запись на прием
Так как больница состоит из множества подразделений, запись на прием через форму на сайте потребовала бы изменений в процессах больницы: нужно интегрировать сайт с несколькими информационными системами разных поликлиник, в каждой — выделить отдельного человека, который будет отслеживать записи. Это могло усложнить и затянуть разработку.
Мы нашли выход в перелинковке с уже существующим сервисом онлайн-записи «Врач42», для которого мы ранее разрабатывали дизайн.
Благодаря такому решению снизилась нагрузка на регистратуру, а пользователи получили удобный способ записаться на прием онлайн.
Результат
В результате заказчик получил имиджевый сайт больницы, который презентует медучреждение в целом и все его структурные подразделения.
- У больницы появился узнаваемый образ в интернете.
- Нужная пациентам информация о больнице и ее подразделениях систематизирована и собрана в одном месте.
- Пациенты через сайт узнают об услугах, врачах, времени приема и записываются в онлайне или по телефону.
- Администрация больницы с помощью сайта продвигает приоритетные направления.
- Соблюдены обязательные требования к сайту медучреждения.
Я не очень понимаю, как это работает - но что, родители в Кемерове прям могут выбирать, где лечить детей? Это же не ТЦ какой-нибудь, который можно выбирать исходя из цвета логотипчика.
Ну во первых приятно, что больницы начали озабочиваться (так говорят вообще?) имиджем. Во вторых - ты сам выбираешь к какой больнице привязаться. В третьих - платные услуги в любом случае имеют место быть.
По закону житель любого города может выбрать больницу.
А еще у больницы есть несколько уникальных для города направлений. Например, детский центр реабилитации и собственное производство молочных продуктов для питания детей. И сайт в том числе продвигает эти направления.
Рили, рили. В русском языке слова склоняются: https://ilyabirman.ru/meanwhile/2006/11/12/1/
И с чего вы взяли, что это достоверный источник?
Даже если склоняются, но в данном случае звучит так что ухо режет, склоняйте тогда, когда звучит красиво...
В статье достаточно ссылок на источники. Обратите внимание на эпиграф: «Недаром помнит вся Россия про день Бородина!»
Блин, даже здесь эта вонь про то, что раньше название этого города не склонялось. Теперь склоняется, смиритесь.
Красивый и удобный сайт, молодцы! Но мне кажется, что лучше отключить анимацию иллюстраций, но возможно это вкусовщина. :)
О, приятный комментарий не о склонении топонимов, приписке детей к больницами и выяснению сколько распилили на проекте xD
забавно, что кнопка при клике не открывает меню в браузере safari.
и что домен не защищен ssl сертификатом (=
Стоимость 780к, а по декларации сколько? Сколько конкретно распилил заказчик из бюджета, интересно.
Зачем склонять название города так, чтобы звучало по уродски? Не ужели не написать "в КемеровО" Нормально же звучит..
"в КемеровЕ" блин ухо режет...
Кто-то сознательно над русским языком издевается. В Москве почти всех переучили: в Строгине, в Митине, в Люблине, в Марьине и т.д. Всю жизнь было в Строгино, Митино, Люблино, Марьино :) (старею, брюзжу уже)
Издеваются над русским языком и здравым смыслом те, кто исправляет грамотных людей.
Спасибо за ссылку! Кстати, там написано что 1980 года так и было принято, в Люблино, Митино... поэтому для меня в Митине, Люблине и кажется навязанным новоязом.
От анимации начинает слегка мутить, хотелось бы кнопку "откл", статичные картинки не так плохи как кажутся.
Хорошая работа и интересная статья, спасибо!
Удивляет, что это происходит в Кемерово.
Интересные svg рисунки, движение тоже в тему, мне нравится, как и весь сайт в целом. Оценивал только визуально.
В целом неплохо ) Но мне одному кажется, что изображение на первом экране настолько яркое и перетягивает на себя все внимание (особенно огромная красная стойка) и целевая кнопка полностью теряется, даже при наведении?
Спасибо) По поводу перетягивания внимания: сайт запустили недавно, для оценки надо через пару месяцев смотреть аналитику. Пока вроде проблем у пользователей с этим нет.
Вообще расписано конечно отлично, видно, что работает копирайтер. Но по факту, неужели на это надо 5 месяцев?
А кто такой аккаунт-менеджер?
Аккаунт-менеджер - сотрудник, который общается с представителем клиента на проекте. Он собирает все требования от заказчика, ведет переговоры, презентует работу, согласовывает.
Вот это колхоз за 700к., который столько багов имеет, js кривой.
Менталитет отечественного диджитал.
Комментарий удален
Комментарии