Резюме: о переходе банка на новую платформу с полным переносом контента.

Бизнес-контекст

Заказчик — региональный универсальный банк ПАО «Томскпромстройбанк». 

ТпсБанк один из старейших в Сибири, он основан в 1992 году. Работает на территории Томской области: в Томске, Северске, Асино, Колпашево, Стрежевом, в селе Каргасок.

У банка работал официальный сайт с 2010 года на собственной CMS. Адаптации под мобильные устройства у сайта не было. 

Задачи 

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

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

Проектирование

Информационное проектирование — первый шаг, который помогает грамотно перебросить мостик между старым сайтом и новым. 

Для построения навигационной структуры мы получили первичные данные:

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

На основе этих данных для нового сайта банка:

• разработали silo-структуру и систему URL;
• определили семантические кластеры и то, как будем группировать контент;
• подготовили рабочие схемы с приоритезацией навигации для дизайнера под десктоп и мобильные устройства;
• сформулировали требования к парсингу данных со старого сайта для автоматической заливки на новый сайт.

Парсинг контента

Одна из задач — перенести старые данные, чтобы максимально исключить работу «руками». Это новости, статьи, отчеты банка по МСФО за 10 лет. Под выполнение такой работы были написаны скрипты, которые «разобрали» данные в новую базу.

Функциональный дизайн сайта

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

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

• функциональный дизайн;
• дизайн-макеты, которые пошли в верстку.

Все макеты выполнялись в Figma.

Главная страница прошла более 15 модификаций:

Функциональные особенности

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

Сейчас у сайта:

• 22 модуля;
• 8 справочников;
• калькуляторы;
• конструктор форм.

Принципиальная особенность — контент сайта обновляется сотрудниками отдела маркетинга банка без привлечения программистов. Около 90% потребностей по обновлению контента сайта не требуют никаких знаний, кроме умения работать в текстовом редакторе.

Гибкая навигационная структура

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

• навигационная структура задается отдельно
  • для шапки сайта
  • для подвала
    • для мобильной версии
    • для десктопа
    • для планшета

Любая внутренняя или внешняя страница может выводиться в навигации.

Подробнее о том, как работает этот подход, мы написали в руководстве adxCMS.

Группы продуктов и калькуляторы

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

• валюта вклада;
• срок размещения вклада;
• сумма вклада от/до;
• ставка;
• капитализация;
• условия пополнения;
• условия пролонгации.

Вклады и кредиты объединяются в группы и включаются в калькуляторы. Например, калькулятор по вкладам выглядит для посетителя сайта так:

Калькулятор кредитов выглядит так:

Маркетинговые модули

У маркетологов банка есть простые инструменты для публикации разных типов информации:

• рекламные баннеры для Главной страницы
• баннеры объявлений
  • баннер для Главной страницы
  • сквозной баннер на все страницы
• новости и статьи
• отзывы

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

Заключение

• календарные сроки разработки: 7 месяцев
• на проект подключалось 9 узких специалистов