Сайт современного банка

Сеть "Паритетбанка" — это 49 точек присутствия по всей территории Республики Беларусь. В банке трудоустроено более 500 сотрудников. С 2020 года в банке произошли кардинальные изменения, и требовалось обновление всей веб-платформы.

Запустили проект с базовых разделов

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

В обязательный минимум вошли страницы, требуемые регулятором, и продуктовые разделы. Самым объёмным оказался раздел «О банке» — более 12 разделов и десятки подразделов, обязательных по требованиям «Национального банка».

Плюсом стало то, что около 90% этого раздела — статические или псевдостатические страницы, что позволило быстро сформировать дорожную карту проекта.  

Так как сроки очень сжатые, стратегия выстраивается сама собой — сдаём разделы сайта короткими этапами, и сразу начинаем наполнять их. Через неделю после начала разработки мы уже начали наполнение «Квартальных отчетов».

1. Подготовка HTML-шаблонов, готовим все для статики — 1-я неделя.
2. Создание структуры «О банке», подключаем контент-менеджера — 2-я неделя.
3. Параллельно начинаем собирать страницы депозитов и кредитов — 2-я и 3-я недели.
4. Страницы банкоматов и отделений, курсы, главная страница сайта — 4-я и 5-я недели.
5. Сопутствующие скрипты, формы, интеграция с CRM, калькуляторы — оставшиеся 3 недели.

Разработку концепта всегда начинаем с прототипов. Обозначаем шрифты, размеры элементов, первичную сетку. Таким прототипом удобно прощупать клиента — если направление неверное, переделать прототип проще, чем готовый концепт.

Новый визуальный акцент среди «синих» банков

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

Утверждённый прототип проработали в цвете, сохранив сетку и относительные размеры элементов для преемственности дизайна.  

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

Текстовая страница как основа дизайн-системы

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

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

Базовый шаблон и наполнение

Этап сборки шаблона стандартизирован для всех проектов: хедер, футер, подключение шаблонов разметки и настройка админки сайта.

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

После подготовки базового шаблона можно собирать статичные страницы: финансовую отчётность, информацию о банке, данные об учредителях. На этом этапе становится доступно наполнение примерно 75% страниц сайта.  

Версия для слабовидящих

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

Выбрали второй вариант — модуль «Мибок: версия сайта для слабовидящих», который уже успешно применялся на проекте МТС. Он предоставляет расширенные настройки отображения и функцию озвучивания текста.  

Финальная сборка возможностей

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

По итогу данный этап оказался самым объёмным, потому что сделана тысяча мелочей.

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

Open API вместо устаревших XML

Старая система передачи данных через XML-файлы морально устарела, поэтому разработали новое публичное API в соответствии со стандартом «Доступ к финансовой инфраструктуре банков Беларуси через Open API».

API включило не только методы передачи данных по банкоматам и отделениям, но и доступ к данным сервисов сайта. Для внешних систем стали доступны:

• сайт банка и публичные веб-сервисы
• курсы валют и конвертер
• контакты
• калькуляторы (кредиты для юрлиц и физлиц, депозиты, РКО)
• JSON-фид для RoketData