На «Агентство по страхованию вкладов» возложена очень важная миссия:  Агентство играет роль «подушки безопасности» на российском финансовом рынке, причём сразу для всех его участников. Вкладчикам «прогоревших» банков оно гарантирует возврат средств (в пределах страховой суммы), тем самым снижая для банков риск массового оттока вкладчиков в случае нестабильного положения финансового учреждения. 

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

Сайт у «Агентства по страхованию вкладов» был. Но, разработанный ещё в 2008-м году, он не только сильно устарел морально, но и с трудом справлялся со своими главными задачами. Активная работа Агентства приводила к появлению всё новых разделов, и навигация по сайту становилась всё более запутанной – структура меню включала в себя более 60-ти пунктов. В итоге потребность в новом, удобном и современном сайте стала для Агентства насущной необходимостью.

Начало

В январе 2012 года Proactivity Group победила в тендере на разработку нового сайта для АСВ. На момент начала работ предыдущая версия сайта АСВ выглядела так:

Было совершенно очевидно, что для сайта требуется:

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

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

• «Внутри» сайта функционирует ряд сервисов, критически важных для работы Агентства. Эти сервисы позволяют Агентству обмениваться данными с Центробанком и Министерством экономического развития, и их необходимо полностью сохранить, интегрировав в структуру нового сайта.
• Многие функции на старом сайте не были автоматизированы. Так, например, для отображения банков, имеющих разный статус, сотрудники вручную готовили и закачивали на сайт отдельные несвязанные между собой списки, при этом один и тот же банк мог находиться во всех них одновременно. Таким образом, требовалось провести большую работу по упрощению взаимодействия сотрудников с сайтом, автоматизировать всё, что только возможно.
• АСВ – организация единственная в своём роде, и многие поставленные задачи имели свою специфику. Поэтому традиционные решения, возможные для большинства других сайтов, здесь оказывались неприменимы. От нас как разработчиков требовался поиск новых решений и компромиссов.
• За время работы сайт накопил огромный архив материалов, причём далеко не всегда расположенных в соответствии с заданной структурой. Так, при анализе было обнаружено, что  некоторые файлы закачивались сотрудниками непосредственно  в корень сайта или в произвольно созданные подкаталоги. Тем не менее, всё это требовалось сохранить и корректно разместить в новой структуре. Забегая вперёд, скажем, что при переносе информации контент-менеджерам и программистам пришлось проанализировать  более 5000 файлов!
• Параллельно с созданием сайта Агентство переходило на новую систему электронного документооборота. Было необходимо обеспечить корректное взаимодействие новой системы документооборота  с несколькими разделами сайта.
• И, наконец, ещё одна огромная часть айсберга: в «закрытой» части старого сайта располагалось что-то вроде корпоративного портала (телефонный справочник, сервисы для работников, в том числе –  уникальные). На новом сайте требовалось создать аналогичный раздел, причём предусмотреть возможности для его дальнейшего развития. 
• Кроме этих крупных задач у представителей Агентства было ещё большое количество пожеланий к функциональности нового сайта. 

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

Работа

Предыдущая версия сайта АСВ была реализована на основе CMS «1C-Битрикс», поэтому вопрос  выбора «движка» отпадал сам собой. Новая версия сайта разрабатывалась на этой же платформе.

После предварительного анализа началась работа по подготовке техзаданий и разработке макетов страниц. Вопреки обычной практике, макетирование производилось на основе перечня функциональных элементов страницы, без предварительного прототипирования. Это стало следствием специфики заказчика – из-за большой иерархической структуры и целой «лесенки» согласований было нереально предварительно утвердить «голый» прототип, требовалась достаточно наглядная «картинка». Поэтому варианты готовились сразу в цвете, с оформительскими «излишествами». 

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

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

На этом работа над дизайном сайта не закончилась, в макет ещё вносились изменения и уточнения. В итоговой версии сайт получил лёгкую фоновую заливку и тени вокруг вкладок; нашли своё место памятка о получении страховки («Как мне получить страховку?») и блок для  обращения в Агентство («Направить в агентство…»). Несколько раз менялось место расположения «карусели» с иконками. В итоге, после долгих обсуждений, решили всё-таки поместить её внизу:  такой вариант позволяет избежать информационной перегрузки в верхней части сайта, делает страницу гармоничнее. И вот окончательный вариант: 

После согласования дизайна и основной структуры сайта началось макетирование внутренних страниц. Из-за большого разнообразия публикуемого контента большинство внутренних страниц пришлось макетировать индивидуально.

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

А вот так выглядит оформление на уже работающем сайте:

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

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

Пользователи сайта получили удобно структурированные списки банков:

А также возможность оформить подписку на новости любого банка:

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

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

И, наконец, скажем несколько слов о внутреннем сайте для работников агентства. В качестве платформы для его реализации был выбран продукт «1С-Битрикс: Корпоративный портал». Здесь работы велись в двух направлениях. С одной стороны, надо было отключить лишний функционал (примерно 80% возможностей продукта были невостребованы заказчиком), с другой – необходимо было  создать сервисы под задачи конкретной компании. Так, на внутреннем сайте был разработаны сервисы для мониторинга отраслевых СМИ, корпоративная библиотека,  функционал для организации фотоконкурсов среди сотрудников. 

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

Итоги

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

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

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