Чтобы сделать это, мы отправились в офис «Эс-Би-Ай Банка», где проработали четыре месяца с командой клиента — продукт-оунерами, аналитиками и командой разработки. За время разработки было проанализировано множество путей пользователей, технические возможности системы для MVP и нюансы использования ДБО предпринимателями и бухгалтерами.

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

Контентная область содержит в себе самые популярные разделы — вкладки с выпиской аналитики и календарем платежей. Все это доступно в один клик прямо с главного экрана. 

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

Чтобы сохранить паттерн, мы сделали страницу отдельного платежа по аналогии с главным экраном. Сюда также выводится аналитика движения средств по текущему месяцу.

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

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

Раздел выписки позволяет просматривать платежи в другом формате, более удобном для бухгалтера. А также выгружать и заказывать справки в электронном и бумажном виде.

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

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