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

  • Веб

  • Финтех

Скрытый заголовок

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

Скрин сайта банка Санкт-Петербург

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

01

Интро

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

02

Задача

Меньше чем за год спроектировать и разработать новую версию сайта. Интегрироваться в команду банка и оптимизировать запуск новых продуктов и услуг

И несколько технических задач:

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

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

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

Заголовок

Фотография члена команды

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

Фотография члена команды

Марго Вырвич

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

03

Решение

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

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

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

Скрин сайта банка Санкт-Петербург

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

04

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

500 страниц менее чем за год — большой объем работы, с какой стороны ни посмотри

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

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

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

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

Заголовок

Фотография члена команды

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

Фотография члена команды

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

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

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

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

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

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

  • Отступы

  • Размеры

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

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

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

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

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

Скрин элементов сайта

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

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

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

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

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

Скрин элементов сайта

Кирпичики, из которых строятся страницы сайта

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

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

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

Скрин сайта на мобильном

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

05

Разработка

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

  • Иконка инструмента

    React

    Chakra UI — выбрали из-за скорости,
    но шутим, что из-за названия

  • Иконка инструмента

    Strapi

    Единый язык
    и легкая кастомизация

  • Иконка инструмента

    Node.js

    Быстрый, распространенный,
    легкий фреймворк

Окружение

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

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

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

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

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

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

Схема

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

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

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

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

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

Скрин сайта на мобильном

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

06

Развитие

Скрытый заголовок

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

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

Заголовок

Фотография члена команды

Даже при нашем опыте такие
масштабные проекты вызывают
чувство трепета.
А потом наступает день релиза, и ты не можешь поверить
в пройденный путь

Фотография члена команды

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

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

07

Команда

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

  • Аналитик

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

  • Дизайнеры

    Саша Юдин, Аня Матвеева, Тёма Тютин, Эмилия Бикметова, Ваня Андреев

  • Технический директор

    Женя Валеев

  • Разработчики

    Юрий Войтеховский, Андрей Куделко, Вова Рубан, Дима Комаров, Даня Грушкин, Паша Фомин, Саша Чуркин

  • Тестировщики

    Максим Шаров, Женя Лозовская, Даша Куркина

  • Бизнес-партнер

    Найки Еременко

  • Специалист по работе
    с партнерами

    Ира Казьбан

  • Контент

    Кирилл Малышев

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

    Платон Культин, Марго Вырвич

Команда со стороны банка

  • Системный аналитик

    Роман Бурангулов

  • Специалист по контенту

    Лена Мель

  • DevOps

    Анатолий Синцов

  • Архитектор

    Рен Шехтель

  • Тестировщик

    Евгений Чистяков

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

    Илья Базиян

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

    София Гураль

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

    Илья Солохненко

Команда Липтсофт

  • Старший дизайнер

    Настя Овсянникова

  • Старший графический дизайнер

    Окраинская Анна

  • Графический дизайнер

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

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

08

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

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

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

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

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

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

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