Спроектировали и разработали
сайт
для Банка Санкт-Петербург
-
Веб
-
Финтех
Скрытый заголовок
Провели серию исследований, сделали редизайн и разработали новую версию сайта для банка
Дизайн-система для оптимизации запуска новых продуктов и услуг в действии
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
Сотрудничество
Эл. почта
hello@mobileup.ruМы всегда рады сотрудничеству и новым проектам.
Опишите задачу, и мы с вами свяжемся.
Или напишите в Телеграм.
Давайте знакомиться!
Ваша заявка успешно отправлена
Мы все изучим и скоро выйдем на связь