Аналитика и исследования
Сперва изучаем старый банкинг клиента и выявляем проблемы.
Запутанная навигация
В структуре множество уровней вложенности и неочевидных связей — трудно найти нужное.
Устаревшее визуальное решение
Много графического шума. Интерфейс сложно читать, от него устаешь при ежедневной работе.
Все процессы решены через одну шаблонную страницу
Формы длинные и их сложно заполнять. В справочниках, списках документов и выписках трудно ориентироваться. Они не помещаются в экран и перегружены второстепенной информацией.
Банкинг стоит отдельно от корпоративного сайта
Клиент не подключает новые услуги, потому что не видит их. Окончательно убеждаемся, что банкинг следует интегрировать прямо в корпоративный сайт. Формируем единую экосистему БПС-Сбербанка.
Вывод: таким банкингом сложно пользоваться. На трудности жалуются даже опытные пользователи, а для новых клиентов такая система не привлекательна, они скорее пойдут в другой банк.
Решение
Упростить структуру, навигацию и пересобрать процессы. Строим новый банкинг на базе разработанной нами экосистемы и дизайн-системы БПС-Сбербанка.
Интегрируем банкинг в сайт
На корпоративном сайте нажимаем кнопку «Войти», выбираем «Бизнес» и вводим пароль. При входе, в меню сайта добавляются новые разделы — это и есть кабинет клиента. Остальные разделы сайта по-прежнему доступны: витрина продуктов и услуг всегда на виду.
Если у клиента несколько организаций, то между их кабинетами можно быстро переключаться. Добавляем аватарки, которые помогают ничего не перепутать. А чтобы ничего не пропустить, выделяем уведомления и сообщения для каждой компании.
Выделяем главное
Превращаем стартовую страницу в функциональную панель управления организацией. Собираем на ней важнейшие показатели и частотный функционал.
Упрощаем
Среди клиентов есть крупные предприятия: для них важно упростить работу с масштабным документооборотом.
Для упрощения поиска прорабатываем фильтры с ключевыми данными. По клику на строку с документом показываем подробную информацию и предлагаем частотные операции.
Делаем процессы понятными
Длинные формы разбиваем на шаги, а бюрократические формулировки упрощаем везде, где это не противоречит закону. Клиент сразу видит этапы работы и перестает бояться.
На каждом шаге выделены смысловые блоки, например, «Плательщик», «Получатель», «Детали платежа», чтобы во всем этом разобрался человек без бухгалтерского опыта. Так боремся с переусложненностью — одной из главных проблем финансовых систем.
Справочники
Бухгалтеру постоянно требуется искать в больших списках нужных контрагентов, сотрудников и банки. Перерабатываем справочники, добавляем поиск, фильтры и редактирование. Названия контрагентов, назначения платежек, имена сотрудников, реквизиты банков, БИКи и прочие справочники упорядочены и наглядно сверстаны.
Если справочник требуется во время какого-либо процесса, например, при выплате зарплаты, открываем его во всплывающем окне, без перезагрузки страницы. Так пользователь не теряет контекст и всегда понимает, где находится.
Цветовое кодирование
Чтобы списки читались лучше, выделяем статусы цветом. Проблемные документы сразу заметны. При ежедневной работе в банкинге не надо вчитываться в текст, чтобы понять, в каком состоянии документ.
Наглядные образы
Клиенты привыкли к тому, как выглядят карты, потому что пользуются ими каждый день. Поэтому в интерфейсах используем реалистичные изображения.
Шаблоны и спецификации
Мы выделили типовые страницы и оформили шаблоны. Их можно использовать в будущем по мере расширения функционала банкинга.
Функционал типовых конструкций подробно описываем:
Компоненты дизайн-системы
Для ускорения и удешевления разработки банкинг строится на дизайн-системе БПС-Сбербанка и использует ее компоненты: кнопки, поля, чекбоксы, переключатели, меню, иконки, графику и другие. Рассказали о дизайн-системе в отдельном кейсе.
Итог
Даже сложный финансовый кабинет можно сделать понятным и доступным, без урезания функционала.
