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

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

В 2020 году банк обновил свой визуальный стиль и пришёл к нам за разработкой современного сайта. Старый сайт банка не обновлялся с 2013 года, и устарел как морально, так и технически.

Важным требованием тендера был запуск нового сайта в начале апреля. То есть выполнить основные работы нужно было за 3 месяца — разработать дизайн, подготовить адаптивные шаблоны, подключить Битрикс и наполнить порядка 40 разделов, включая финансовую отчетность.

Собираем структуру

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

Второй аспект — найти самый объёмный раздел по содержанию и начать работу с него. В нашем случае самый объёмный раздел это «О банке». Это 12+ разделов с десятком подразделов, без которых сайт банка не может существовать, так как это требования национального банка.

Положительный момент, что данный раздел на 90% состоит из статических или псевдостатических страниц. Задача понятна, формируем дорожную карту проекта.

Планируем дорожную карту

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

1-й этап

Подготовка HTML-шаблонов, готовим все для статики

1-я неделя

2-й этап

Создание структуры «О банке», подключаем контент-менеджера

2-я неделя

3-й этап

Параллельно начинаем собирать страницы депозитов и кредитов

2-я и 3-я недели

4-й этап

Страницы банкоматов и отделений, курсы, главная страница сайта

4-я и 5-я недели

5-й этап

Сопутствующие скрипты, формы, интеграция с CRM, калькуляторы

Оставшиеся 3 недели

В плане не показан этап разработки дизайна, на него выделили весь январь, а дальше он шёл параллельно с разработкой.

Разрабатываем концепт

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

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

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

Некоторые вещи, как, например, этот блок, прорабатывались на концепте, но на сайт не пошли из-за ограничений контента.

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

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

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

Таблицы

Закладки

Стили формы

Заголовки разных уровней

Ссылки

Кнопки

Поднавигацию

Нумерованные и ненумерованные списки

Коллапс-заголовки

Сборка базового шаблона

Требования на сборку

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

Общие гайды для Битрикс

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

Собираем статичные страницы

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

Собираем продуктовые страницы

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

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

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

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

Последний этап: доработка оставшегося функционала

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

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

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

Разработка публичного API

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

Требовалось реализовать не только методы передачи данных по банкоматам и отделениям, но и методы для получения данных с калькуляторов сайта.

Описание методов API

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

Публичные веб-сервисы банка

Курсы валют

Калькулятор кредита для юр. лиц

Контакты

Калькулятор РКО

Конвертер курсов валют

Калькулятор кредитов для частных клиентов

JSON-фид для RoketData

Калькулятор депозита для частных клиентов

Команда проекта

Руководитель проекта

Дима Хоружко

Верстка

Павел Кряквин

Команда клиента

Андрей Малашевич

Маргарита Стемпень

Анна Панаева

Светлана Садникова

Бизнес-аналитик

Павел Бокач

PHP разработчики

Стас Вовк

Денис Иванов

Женя Маспанов

Павел Копытов

Дима Хоружко

Дизайн

Леша Синкевич

МТС

Посмотрите, что у нас ещё есть

VW шестое поколение