Перезапуск сайта для Банка Санкт-Петербург, в основе – модель конструктора

Главное о кейсе

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

Как проект изменил жизнь пользователей

тест

Бизнес-задача и ее решение

ИСХОДНАЯ ТОЧКА

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

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

Ключевые моменты:

- Обновить сайт
- Проработать пользовательский опыт и конверсии в заявку на сайте банка
- Уменьшить время на запуск тестов и экспериментов, которые команда банка регулярно проводит
- Сократить время загрузки нового сайта

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

ПУНКТ А: ВНЕШНИЙ ВИД

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

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

ПУНКТ В: ДИЗАЙН-СИСТЕМА

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

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

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

ПУНКТ С: РАЗРАБОТКА

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

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

Пункт D: КОНСТРУКТОР И АДМИНКА

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

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

Прочая информация о кейсе

Спроектировали и разработали сайт для Банка Санкт-Петербург. Провели серию исследований, сделали редизайн и разработали новую версию сайта для банка.

У банка уже был сайт. Он обладал рядом характеристик, которые хотелось исправить: архитектура не поддавалась масштабированию; мобильная версия требовала отдельной поддержки. Было принято решение усилить команду банка и привлечь MobileUp.

A new website for the Bank Saint Petersburg: design and development. We conducted a series of studies, provided a redesign, and developed a new version of the bank’s website. The bank had its website before. But some features needed to be fixed: the architecture was not scalable; the mobile version required separate maintenance. So, It was decided to empower the bank’s workforce and involve the MobileUp team.

It was necessary to design and develop a new version of the website in less than a year. The other task was to integrate into the team and optimize the launch of new products and services.

Some technical tasks:
- to update the website, work out the UX, and the request form conversions on the bank website
- to reduce the time to run tests and experiments that the bank team regularly conducts to reduce the load time of a new website.

We have reached the goal to make the site more dynamic and modern. The main task of the site updating was to reduce the time for creating new pages so that they remain in the design vocabulary of the bank.

Now you can refresh pages much faster thanks to our work. We are going to continue to work on the website development and its maintenance.

Скриншоты