Разработали новую версию сайта для банка «Санкт-Петербург» и ускорили запуск новых страниц в 7 раз

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

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

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

У банка был сайт, но его архитектура не поддавалась масштабированию, а мобильная версия требовала отдельной поддержки. Чтобы исправить эти характеристики, было принято решение привлечь команду MobileUp.
Мы достигли главной цели — сделали сайт более динамичным и современным. А также сократили время на сборку новых страниц — они по-прежнему остаются в дизайн-системе банка, но если раньше на их создание уходила неделя, теперь всё можно сделать за один день.
Благодаря нашей работе обновлять страницы стало значительно проще. Но мы не останавливаемся на достигнутом и дальше работаем над развитием сайта и его поддержкой.

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

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

ПРОВЕЛИ ИССЛЕДОВАНИЕ
Банк принёс нам достаточно подробные исследования: описание целевой аудитории, анализ конкурентов, CJM. Помимо этого был проведён анализ поведения физических и юридических лиц. Артефактов было достаточно — мы изучили информацию, структурировали её и сопоставили с бизнес-целями банка. Проектирование нового сервиса начали на основе этих данных.

ПРОДУМАЛИ ДИЗАЙН-СИСТЕМУ
Сделали дизайн-систему, которая помогла и продолжит помогать масштабировать решение. В неё вошли все необходимые для создания страниц элементы: библиотека компонентов, стили шрифтов, отступы, размеры, гайд по контенту, гайд по подбору картинок, гайд по наследованию элементов.
Очень плотно работали с отделом дизайна банка, чтобы наши решения смотрелись органично для бренда и продуктов банка.

СОЗДАЛИ ШАБЛОНЫ СТРАНИЦ
Продумали шаблон, который ускорил процесс дизайна. Объем сайта банка большой, около 500 страниц. При таком объеме очень важно продумать логику элементов и страниц, чтобы с одной стороны была единая система, а с другой — возможность проявить индивидуальность и акцентировать внимание пользователя.
Не забыли про контент-менеджеров, которым предстоит заполнять и актуализировать информацию. Контент разнообразный, но страницы похожи по структуре.

ПОДОБРАЛИ ТЕХНОЛОГИЧЕСКИЙ СТЕК
И он помог эффективно решить поставленную задачу. Chakra UI мы выбрали из-за скорости. Strapi — за удобство. C одной стороны это готовая CMS, с другой её — можно быстро кастомизировать и гибко подходить к верстке. Node.js — потому что это быстрый и распространённый фреймворк.

СОЗДАЛИ КОНСТРУКТОР И АДМИНКУ
Выполнили перевод компонентов в типы данных Strapi. На старом сайте было две административных панели: для основной и мобильной версии. На новом мы решили использовать коробочное решение — сделали одну админку, чтобы править всеми.

ИТОГ
Достигли поставленной цели — сделали сайт более динамичным и современным. Сократили время на сборку новых страниц, чтобы при этом они оставались в дизайн-системе банка.

Крафт (мастерство), реализация, технические детали

Помимо того, что мы внедрили Strapi — удобную систему, которая позволила собирать страницы сайта как конструктор. Мы выстроили работу в четырёх средах окружения: локальной, тестовой, препроде и проде. Заказчик уже использовал Kubernetes, систему развёртывания и поддержания работы серверов.
Мы развернули у себя тестовый стенд на Kubernetes, чтоб унифицировать процесс поставки приложения на серверы и исключить различия в трех окружениях: проходящем внутреннее тестирование в MobileUp, идущем на тестирование в банке, уходящем в продакшн.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Скриншоты