Как региональному банку конкурировать с гигантами

В мае 2022 года к нам обратилась компания «Прио-Внешторгбанк» с задачей: провести редизайн личного кабинета «Приобанк Онлайн».

Клиент выявил и предоставил некоторые наработки по проблемным и слабым местам в текущем личном кабинете, а со стороны руководства банка выработаны новые бизнес-требования к функционированию системы.

Мы получили некий набор аналитических данных по действиям пользователей, набор желаемых новых фич и «болей» от банка. А также ряд требований со стороны сторонних систем.

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

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

Перед нами стояли непростые задачи, которые необходимо было совместить:

1. Реализовать новые фичи и полечить «боли»

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

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

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

Быстро собрали информацию, построили роад-мап, собрали banchmarket и moodboard, набор страниц и провели презентацию заказчику. Основные цвета взяли из брендбука, они использовались для прототипа первой страницы.

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

Макеты реализовывали параллельно несколько дизайнеров, что позволило ускорить сроки разработки.

Большая часть работы пришлась на аналитику существующего функционала, его осмысления и приведения к лучшему UI/UX. 

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

Учли мнение целевой аудитории и сделали функционал удобным для работы, как с большим количеством продуктов, так и с малым. Добавили на страницы call to action, реализовали удобную систему оповещений и напоминалок. 

Построили адаптивный дизайн, который ушел в кросс-платформ (с одного дизайна обновили как сайт, так и мобильное приложение).

Сократили количество действий для всех операций в 2-3 раза, а для операций из истории — до 2 кликов, повторить + подтвердить.

Шаблонизировали под удобную разработку на front-end функционал различных оплат (ЖКХ, дет. сады и т.д.) с учетом разных особенностей интеграций с данными системами.

Отрисовали возможность использования справочников и ранее введённых пользователем данных с подсказками на каждом шаге, начиная от оплаты связи и интернета, заканчивая поиском штрафов ГИБДД и платежами в бюджетные организации.

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

Редизайн отличается кросс-платформ респонсив в 5 разрешениях, mobile-first подходом с кучей UX/UI особенностей, удобной навигацией, приятным визуалом и анимациями.

В ходе работ реализовали более 350 макетов различных состояний, техническое описание для Front-end специалистов, собрали референсы анимаций и добавили новые фичи.