ПАО «Томскпромстройбанк»

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

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

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

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

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

Задачи 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Тип работ:

Платформа:

Технологии:

PHP, CSS
100 лет ТЭМЗ
Сайт-буклет под ключ к юбилею Томского электромеханического завода.
Сайт медицинского центра Шаг вперед
Переход с платформы 1С Битрикс на adxCMS: изменение дизайна, разработка навигации и структуры, SEO оптимизация.
Как попасть в топ-10 за короткий срок
Как работа на полном доверии Заказчика привела к результату топ-10 в выдаче в Яндексе и Google.