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

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

Банк принес нам достаточно подробные исследования: описание целевой аудитории, анализ конкурентов, CJM.

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

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

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

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

Продумали шаблон, который ускорил процесс дизайна. Объем сайта банка большой, около 500 страниц.

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

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

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

Ниже примеры, как дизайн-система подстроилась под разделы «Private Banking» и «Ярко».

Работали в четырех средах окружения: локальная, тестовая, препрод, прод. Заказчик уже использовал Kubernetes, систему развертывания и поддержания работы серверов.

Мы развернули у себя тестовый стенд на Kubernetes, чтоб унифицировать процесс поставки приложения на серверы и исключить различия в трех окружениях:

Тестирование проходило в два этапа: наша приемка и тесты на стороне банка.

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

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

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