Райффайзен Банк / Редизайн страницы истории платежей

«Райффайзен Бизнес онлайн» - это современный интернет-банк для малого бизнеса: ИП и ООО.

‍

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

‍

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

‍

Работа осуществлялась в команде из 4 UX/UI-дизайнеров, я выполняла так же роль лида (распределяла задачи, ставила дедлайны, назначала встречи и «причесывала» конечный вариант работы для его презентации).

Ссылка на Behance

‍

Ссылка на Figma

Клиент

Яндекс Практикум

Вид работы

Продуктовый дизайн

Год

2023

Исследования

Прежде чем осуществлять редизайн страницы, наша команда UX/UI-дизайнеров начала глубинное изучение продукта, его конкурентов и пользователей, чтобы выявить боли и найти решения.

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

Более подробную информацию о проведенных UX-исследованиях (описание процесса, анализ и инсайты) можно найти в файле Figma.

Сохранили табличную форму

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

Добавили блоки со счетами

Мы добавили на страницу блоки с отображением остатков по каждому счёту пользователя. Наличие информации об остатке по счёту позволит избежать ошибок в работе пользователя при создании платёжных поручений (реализовано одним из участников команды).

Оптимизировали боковое меню

Сократили количество пунктов в боковом меню, объединив их в смысловые группы, чтобы ускорить поиск необходимого пользователю раздела (реализовано одним из участников команды).

Сделали единое поле поиска

Во время интервью один из респондентов обозначил единое поле поиска по разным параметрам (например, по контрагентам, по назначению платежа) как наиболее удобный функционал в разделе платежей, поэтому мы добавили данное поле над таблицей.

Реализовали быстрый выбор типа платежа при его создании

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

Оптимизировали таблицу

В моей зоне ответственности была работа с таблицей:

я реализовала цветовую индикацию у статусов платежей, чтобы облегчить работу пользователей с таблицей и восприятие информации;
предусмотрела возможность работы сразу с несколькими платежами, выбранными чекбоксами («Отправить», «Распечатать», «Подписать», «Скачать», «Удалить»);
добавила возможность раскрытия подробной информации о платеже с кнопками быстрых действий («Отправить», «Создать шаблон», «Распечатать», «Экспортировать») при нажатии на платёж в таблице;
чтобы создать больше пространства в таблице, убрала столбец «Сообщения от банка» (этот столбец занимал много место, но часто был незаполненным, так как сообщение от банка появлялось только в случае отклонения платежа, чтобы пользователь знал причину отклонения), сообщение от банка было перенесено в тултип (иконка рядом со статусом «Отклонено»);
объединила два взаимосвязанных столбца «Получатель» и «Счёт получателя» в один столбец «Контрагент»;
добавила пагинацию с информацией о количестве страниц и о том, на какой странице пользователь находится в данный момент.

Результат

На основании проведенных UX-исследований мы осуществили редизайн страницы учёта платежей в личном кабинете для юридических лиц, активно используя и дополняя существующую, но еще не везде реализованную, дизайн-систему Райффайзен Банка.

‍

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