Редизайн личного кабинета интернет-банка МКБ

Разработали прототипы и новый дизайн для цифрового банкинга

Мы создали для банка МКБ обновленный дизайн личного кабинета. Теперь клиенты могут легко управлять банковскими продуктами, заказывать новые услуги и осуществлять банковские операции.

Понятный интерфейс

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

Мы сохранили стиль, но улучшили юзабилити.

Простая навигация

Привели к единой логике структуру личного кабинета. За счет этого удалось разработать новую, более продуманную и удобную навигацию без лишних действий для пользователя.

Серьезный и понятный дизайн

Даже кредит в МКБ выглядит не пугающе, а напротив, — красиво.

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

Новое меню

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

Было/Стало

Новый интерфейс стал удобным, понятным и простым в использовании.

Лаконичные тексты

Чтобы сфокусировать внимание пользователей на продуктах, мы убрали лишний текст — оставили главное, сделали заголовки крупнее и подчеркнули цветами важные детали.

Наш подход к созданию интерфейсов

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

Поэтому мы:

Изучили потребности пользователей.
Сформировали гипотезы.
Провели исследование на основе данных и пользовательского опыта.

За несколько месяцев команда UX-дизайнеров разработала 306 прототипов десктопа со 169 сценариями с конца июня по начало октября. Проектировщики провели внутреннее и внешнее ревью со всеми стейкхолдерами, внесли изменения и утвердили результат работ.

Дмитрий Подлужный

Руководитель направления проектирования интерфейсов

Добавили блочную структуру

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

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

Собрали банковские продукты в одном месте

На любой странице сайта можно развернуть блок, выбрать нужный продукт и соответствующую операцию:

оплатить кредит или страховку;
проверить вклад;
подписаться на рассылку вакансий и информационных материалов;
выбрать карту;
выбрать счета.

Структурировали отчет по периодам и типам операций

Сделали быстрый и удобный доступ к продуктам банка

Получить быстрый доступ к необходимому разделу может как клиент МКБ, так и менеджер сайта. Такого эффекта мы достигли за счет модульной системы и упрощения интерфейса.

Достигли сбалансированной композиции элементов

Внешний вид стал проще и визуально приятнее. На странице представлена только та информация, которая действительно важна клиенту банка.

Создали адаптивную версию

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

Дизайн-система

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

Для этого мы переработали и расширили дизайн-систему, которая позволяет взаимозаменять элементы и блоки, использовать уже готовую базу стилей и компонентов с variants и auto layout для быстрого редактирования и адаптации макетов под разные разрешения экранов.

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

Удобная и современная дизайн-система, которая легко передается в другие руки, ей удобно пользоваться, а также современные UX и UI, которые ставят новый кабинет банка на новый уровень. Команду можно похвалить как раз за то, что она была командой, за внутреннее взаимодействие, за построение сложной системы.