Кейс: Создание сайта для Профсоюза работников здравоохранения РФ

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

Разработка технического задания

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

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

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

Исследование

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

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

Что учитывалось при разработке архитектуры и функционала:

• Основные вопросы, которые возникают у членов и не членов профсоюза

• Цели посещения сайта

• Ожидания от посещения сайта

• Сценарии поведения на сайте

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

Разработка макетов

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

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

Дизайн сайта

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

Верстка

Верстка осуществлялась с использованием фреймворка Bootstrap, который на данный момент продолжает быть самым популярным CSS фреймворком. Почему? Во-первых, работа с адаптивом становится намного легче благодаря проработанной адаптивной сетке. Разработчик быстрее сможет проработать версию сайта для разных устройств, в том числе для нестандартных экранов. Во-вторых, фреймворки позволяют существенно сэкономить время, убирая рутинное написание кода с нуля “вот для этой кнопочки”, лучше его потратить на более сложные и уникальные задачи. Да и с разметкой страницы все становится куда проще и меньше шансов получить франкенштейна в конечном итоге.

Но Bootstrap появляется в нашей работе намного раньше - еще на моменте создания макетов и прототипов. Мы заранее задаем сетку и ориентируемся на нее, чтобы в дальнейшем не переправлять по сто раз и не заставлять верстальщиков страдать. Чем точнее итоговый дизайн, тем проще будет верстка и следовательно расход времени будет более предсказуемым и контролируемым.

Ввод в работу

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

Модуль для слабовидящих

Также на сайте реализована версия для слабовидящих. Согласно ГОСТ Р 52872-2019 информация должна быть доступна для широкого круга пользователей, в том числе и для людей с с инвалидностью и других лиц с ограничениями жизнедеятельности. Для этого был использован модуль «Мибок: Версия для слабовидящих», который также внесен в список отечественного ПО.

Интерактивная карта

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

Также есть альтернативный вывод регионов в виде списка при нажатии Смотреть все регионы.

Блок «Новости ФНПР» и «Новости Солидарности»

Помимо новостей организации и ее членских организаций на сайте представлены новостные ленты «Новости ФНПР» и «Новости Солидарности» через RSS.

Раздел «Документы»

В каких форматах можно загружать и скачивать документы: PDF, DOC, DOCX, RTF, XLS, XLSX, TXT, JPG, TIFF, PNG, PPT, PPTX

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

• название документа

• номер документа

• автора

• направления деятельности

• дату документа

А также может скрыть карточку документа с сайта или получить ссылку на размещение.

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