Как мы перезапустили сайт для Банка Санкт-Петербург

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

Банк Санкт-Петербург не нуждается в представлении. Он входит в двадцатку крупнейших банков России по размеру активов и занимает особое место в наших сердцах, потому что головной офис MobileUp тоже находится в Петербурге.

У банка уже был сайт. Но его сложная архитектура не поддавалась масштабированию — требовалось несколько недель, чтобы новая страница увидела свет. А мобильная версия требовала отдельной поддержки.

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

Банк принес нам подробные исследования: описание целевой аудитории, анализ конкурентов, CJM. Помимо этого был проведен анализ поведения физических и юридических лиц. Артефактов было достаточно — мы изучили информацию, структурировали ее и сопоставили с бизнес-целями банка. Проектирование нового сервиса начали на основе этих данных.

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

Некоторые разделы стилизовали: они намеренно отличаются от главной страницы, но в то же время смотрятся консистентно.

А так сайт выглядит на экране мобильных устройств.

Чтобы наши решения смотрелись органично для бренда и его продуктов, мы плотно взаимодействовали с отделом дизайна банка. Ребята из дружественной команды Липтсофт проработали более 200 изображений и баннеров для проекта.

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

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

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

Подобрали технологический стек, который помог эффективно решить поставленную задачу. Node.js — быстрый, распространенный, легкий фреймворк. Strapi выбрали из-за легкой кастомизации. Chakra UI — из-за скорости, но шутим, что из-за названия.

Работали в четырех средах окружения: локальная, тестовая, preprod, prod. Заказчик уже использовал систему развертывания и поддержания работы серверов Kubernetes. Мы развернули у себя тестовый стенд на ней, чтоб унифицировать процесс поставки приложения на серверы. А также — исключить различия в трех окружениях: проходящем внутреннее тестирование в MobileUp, идущем на тестирование в банке, и уходящем в продакшн. Тестирование проходило в два этапа: наша приемка и тесты на стороне банка.

При разработке конструктора сайта сначала пошли по пути создания кастомных компонентов. Быстро поняли, что это не лучшее решение с точки зрения гибкости. Начали перевод компонентов в типы данных Strapi. Это решение выбрали из-за удобства. C одной стороны это готовая CMS, с другой — ее можно быстро кастомизировать и гибко подходить к верстке.

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

Новый сайт уже опубликован и доступен по адресу https://www.bspb.ru. Мы достигли поставленной цели — сделали его более динамичным и современным. Будем и дальше работать над развитием и поддержкой проекта.

Редактор: Елена Майорова