

Веб
Финтех
Провели серию исследований, сделали редизайн и разработали новую версию сайта для банка
Дизайн-система для оптимизации запуска новых продуктов и услуг в действии
И несколько технических задач:
Обновить сайт, проработать пользовательский опыт и конверсии в заявку на сайте банка
Уменьшить время на запуск тестов и экспериментов, которые команда банка регулярно проводит
Сократить время загрузки нового сайта
Одной из важнейших задач было
разобраться с двумя сайтами банка
из предыдущей серии — ведь
поддерживать web и мобильную
версию приходилось по отдельности. Нужно было собрать из двух половинок единый сервис и прийти к консистентности страниц
Раньше Банку Санкт-Петербург требовалось несколько недель, чтобы страница увидела свет.
Освежили и актуализировали текущий сайт, опираясь на визуальную концепцию банка. Вместе с банком решили, что первую версию не нужно радикально менять. Стремились к эволюционному переходу, а не к революции.
Так теперь выглядит сайт банка
Важно было держать в голове, что текущий контент будет переезжать в новую реальность. Трансформироваться в нашу новую визуальную концепцию
и жить в ней.
Банк принес нам достаточно подробные исследования: описание целевой аудитории, анализ конкурентов, CJM.
Помимо этого был проведен анализ поведения физических и юридических лиц. Артефактов было достаточно — мы изучили информацию, структурировали ее и сопоставили с бизнес-целями банка. Проектирование нового сервиса начали на основе этих данных.
Бережно перенесли логику
калькулятора кредитов и вкладов
на новый интерфейс с учетом всех возможных фильтров и параметров, которые мог выбрать пользователь
Сделали дизайн-систему, которая помогла и продолжит помогать масштабировать решение. В нее вошли все необходимые элементы для создания страниц:
Библиотека компонентов
Стили шрифтов
Отступы
Размеры
Гайд по контенту
Гайд по подбору картинок
Гайд по наследованию элементов
Библиотеку формировали итеративно: первый блок важных компонентов сделали — отдали клиенту. Ребята из банка наполняют, а мы параллельно работаем над новым блоком.
Очень плотно работали с отделом дизайна банка, чтобы наши решения смотрелись органично для бренда и продуктов банка. Ребята из дизайн‑команды Липтсофт проработали более 200 изображений и баннеров для проекта.
Системный подход для систематизации системы
Продумали шаблон, который ускорил процесс дизайна. Объем сайта банка большой, около 500 страниц.
При таком объеме очень важно продумать логику элементов и страниц в целом, чтобы с одной стороны была единая система, а с другой — возможность проявить индивидуальность и акцентировать внимание пользователя.
Не забыли про контент-менеджеров, которым предстоит заполнять и актуализировать информацию. Контент разнообразный, но страницы похожи по структуре.
Кирпичики, из которых строятся страницы сайта
Некоторые разделы сайта намеренно отличаются от главной страницы, но в то же время они выполнены в дизайн-концепции банка, смотрятся консистентно.
Ниже примеры, как дизайн-система подстроилась под разделы
«Private Banking» и «Ярко».
Легким движением кода главная страница превращается в тематический раздел с сохранением визуальной структуры
Chakra UI — выбрали из-за скорости,
но шутим, что из-за названия
Единый язык
и легкая кастомизация
Быстрый, распространенный,
легкий фреймворк
Работали в четырех средах окружения: локальная, тестовая, препрод, прод. Заказчик уже использовал Kubernetes, систему развертывания и поддержания работы серверов.
Мы развернули у себя тестовый стенд на Kubernetes, чтоб унифицировать процесс поставки приложения на серверы и исключить различия в трех окружениях:
Проходящее внутреннее тестирование в MobileUp
Идущее на тестирование в банке
Уходящее в продакшн
Тестирование проходило в два этапа: наша приемка и тесты на стороне банка.
Здесь была схема попроще, но наш CTO настоял на достоверности
При разработке конструктора сайта сначала пошли по пути создания кастомных компонентов. Быстро поняли, что это не лучшее решение с точки зрения гибкости.
Начали перевод компонентов в типы данных Strapi. Это решение выбрали
из-за удобства. C одной стороны это готовая CMS, с другой ее — можно быстро кастомизировать и гибко подходить к верстке.
На старом сайте было две административных панели: для основной и мобильной версии. На новом мы решили использовать коробочное решение — сделали одну админку, чтобы править всеми.
Сайт так хорошо оптимизирован, что даже помещается в карман!
Мы достигли поставленной цели – сделали сайт более динамичным и современным. Главной задачей обновления сайта было сократить время на сборку новых страниц, чтобы при этом они оставались в дизайн-системе банка
Благодаря нашей работе обновлять страницы теперь можно значительно быстрее. Будем и дальше работать над развитием сайта и его поддержкой.
Даже при нашем опыте такие
масштабные проекты вызывают
чувство трепета.
А потом наступает день релиза, и ты не можешь поверить
в пройденный путь
Тим Мостивенко
Саша Юдин, Аня Матвеева, Тёма Тютин, Эмилия Бикметова, Ваня Андреев
Женя Валеев
Юрий Войтеховский, Андрей Куделко, Вова Рубан, Дима Комаров, Даня Грушкин, Паша Фомин, Саша Чуркин
Максим Шаров, Женя Лозовская, Даша Куркина
Найки Еременко
Ира Казьбан
Кирилл Малышев
Платон Культин, Марго Вырвич
Роман Бурангулов
Лена Мелль
Анатолий Синцов
Рен Шехтель
Евгений Чистяков
София Гураль
Илья Солохненко
Илья Базиян
Настя Овсянникова
Окраинская Анна
Худякова Юлия
Эл. почта
hello@mobileup.ruМы всегда рады сотрудничеству и новым проектам.
Опишите задачу, и мы с вами свяжемся.
Или напишите в Телеграм.
Мы все изучим и скоро выйдем на связь