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

  • Web-сервисы

  • Финтех

Интро

Провели серию исследований, сделали редизайн и разработали новую версию сайта для банка

Дизайн-система для оптимизации запуска новых продуктов и услуг в действии

01

Интро

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

02

Задача

После создания единой системы, поддерживающей десктопную и мобильную версии сайта, мы продолжаем развивать сервис: переносим все данные на новую версию CMS Strapi ver. 4.2, создаем новые компоненты на сайте и проводим редизайн.

Первичная задача, которую поставил перед нами клиент – меньше чем за год спроектировать и разработать новую версию сайта.

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

  • обновить сайт, проработать пользовательский опыт и конверсии в заявку на сайте банка;

  • уменьшить время на запуск тестов и экспериментов, которые команда банка регулярно проводит;

  • сократить время загрузки нового сайта.

Заголовок

Одной из важнейших задач было разобраться с двумя сайтами банка из предыдущей серии — ведь поддерживать web и мобильную версию приходилось по отдельности. Нужно было собрать из двух половинок единый сервис и прийти к консистентности страниц

Марго Вырвич

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

03

Решение

Раньше Банку Санкт-Петербург требовалось несколько недель, чтобы страница увидела свет.

Мы предложили заложить в основу модель конструктора, чтобы банк мог в считанные часы запускать новые страницы, эксперименты, продукты

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

Так теперь выглядит сайт банка

04

Аналитика и дизайн

Изначально проект содержал 500 страниц сайта.

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

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

У вас есть похожая задача? Давайте обсудим!

Исследование

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

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

Заголовок

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

Тим Мостивенко

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

Дизайн-система

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

  • Библиотека компонентов

  • Стили шрифтов

  • Отступы

  • Размеры

  • Гайд по контенту

  • Гайд по подбору картинок

  • Гайд по наследованию элементов

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

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

Системный подход для систематизации системы

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

Шаблоны страниц

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

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

Кирпичики, из которых строятся страницы сайта – более шестидесяти компонентов

Стилизация разделов

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

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

Легким движением кода главная страница превращается в тематический раздел с сохранением визуальной структуры

05

Разработка

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

  • Strapi

    Гибкая и мощная headless CMS, которая позволяет разработчикам быстро создавать и управлять API для своих веб-приложений и сайтов. Имеет библиотеку готовых плагинов и является опенсорсной.

  • NextJS

    Отлично подходит для создания статических страниц на React и имеет много встроенных возможностей.

  • Chakra UI

    Современная библиотека компонентов для React. Мы выбрали ее из-за скорости, простоты и модульности, но шутим, что из-за названия.

  • Visual Studio Code

    Rросс-платформенный редактор на базе фреймворка Electron. Используем для программирования инфраструктуры сайта.

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

Окружение

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

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

  • Проходящее внутреннее тестирование в MobileUp

  • Идущее на тестирование в банке

  • Уходящее в продакшн

Здесь была схема попроще, но наш CTO настоял на достоверности

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

Конструктор и админка

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

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

Сайт так хорошо оптимизирован, что даже помещается в карман!

06

Тестирование

Используем микс видов тестирования, чтобы всё корректно работало

За год объём сайта вырос с 500 до 4000 страниц. В настоящее время продолжается активная публикация контента. И важно убедиться, что всё корректно отображается и работает. Для этого на проекте применяются сразу несколько видов тестирования:

  • по степени автоматизации — ручное;

  • по целям — функциональное и нефункциональное;

  • по позитивности сценария — позитивное и негативное;

  • по уровню тестирования — интеграционное, системное, операционное;

  • по хронологии — смоук и регрессионное.

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

07

Результаты

Благодаря нашей работе обновлять страницы теперь можно значительно быстрее: мы сократили Time-to-market в семь раз. До нашего подключения публикация страницы занимала до одной недели, сейчас – несколько часов. Мы продолжаем работать над развитием сайта и его поддержкой.

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

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

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

Заголовок

Даже при нашем опыте такие масштабные проекты вызывают чувство трепета.

А потом наступает день релиза, и ты не можешь поверить в пройденный путь

Александр Юдин

Арт-директор

08

Команда

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

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

    Маргарита Вырвич

  • Frontend-разработчики

    Юрий Войтеховский

    Владимир Рубан

  • Backend-разработчик

    Павел Фомин

  • QA инженер

    Антон Сухарев

  • СТО

    Евгений Валеев

Банк Санкт-Петербург

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

    София Гураль

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

    Мартынова Вера

  • QA инженеры

    Богатенков Александр

    Довгялло Наталия

  • DevOps инженеры

    Тругуб Александр

    Раздобудько Антон

  • Контент-менеджеры

    Гайко Ольга

    Пузанова Ксения

    Аносова Ольга

    Ефремова Анастасия

Липтсофт

  • Дизайнеры

    Худякова Юлия

    Усова Ольга

01

Похожие проекты

02

Сотрудничество

Контакты

Мы всегда рады сотрудничеству и новым проектам.

Опишите задачу, и мы с вами свяжемся.
Или напишите в Телеграм.

Давайте знакомиться!

ВыбратьОткуда вы о нас узнали
  • Рейтинги
  • Рекомендации
  • Конференции
  • Публикации
  • Соцсети
  • Другое

Нажимая «Отправить», вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Ваша заявка успешно отправлена

Мы все изучим и скоро выйдем на связь