Мы создали для банка МКБ обновленный дизайн личного кабинета. Теперь клиенты могут легко управлять банковскими продуктами, заказывать новые услуги и осуществлять банковские операции.
Понятный интерфейс
Мы сохранили стиль, но улучшили юзабилити.
![Превью проекта](/upload/medialibrary/e7c/e7c7f4bde716c2336e25e65d5cf1bd82.png)
Простая навигация
![Превью проекта](/upload/landing/597/59769f0342c6ab3887de33d0b5b51965.png)
Серьезный и понятный дизайн
Все платежи прописаны по месяцам с детальной информацией и конкретными цифрами. Мы выделили несколькими цветами суммы за квартиру и %, а для наглядности показываем динамику на прозрачном фоне, который не отвлекает внимание, но показывает полную картину.
![Превью проекта](/upload/landing/3fb/3fbbcc7374d3f827ab2a744a5009dfca.png)
Новое меню
Проанализировали потребности пользователей и добавили в шапку кнопки, к которым нужен постоянный доступ. Это модуль с основной информацией о клиенте (главная), модуль оплаты, систему привилегий, оформление услуг FAQ.
![Превью проекта](/upload/medialibrary/3ab/3ab76e5449ec72223f81bba4831fe027.png)
Было/Стало
![Изображение до](/local/markup/build/assets/projects/landing_page/image/before@1x.jpg)
![Изображение после](/local/markup/build/assets/projects/landing_page/image/after@1x.jpg)
![Изображение до](/local/markup/build/assets/projects/landing_page/image/mobile-1@1x.jpg)
![Изображение после](/local/markup/build/assets/projects/landing_page/image/mobile-2@1x.jpg)
Лаконичные тексты
![Превью проекта](/upload/medialibrary/d6a/d6a1d8d5bc60df63cdcd47dd3fc9b3ef.png)
Наш подход к созданию интерфейсов
Поэтому мы:
- Изучили потребности пользователей.
- Сформировали гипотезы.
- Провели исследование на основе данных и пользовательского опыта.
![Превью проекта](/upload/landing/77f/77f88d2af95c765520e6e875d6c9c150.png)
За несколько месяцев команда UX-дизайнеров разработала 306 прототипов десктопа со 169 сценариями с конца июня по начало октября. Проектировщики провели внутреннее и внешнее ревью со всеми стейкхолдерами, внесли изменения и утвердили результат работ.
![Логотип компании](/upload/landing/f67/f676d4687c16e116b9f9460249ce7d32.png)
Добавили блочную структуру
А также на главной можно увидеть график расходов и поступлений, который обновляется динамически, после каждой транзакции.
![Превью проекта](/upload/medialibrary/2e0/2e054d91e2d9907ce963abcdcfe0c84c.png)
Собрали банковские продукты в одном месте
- оплатить кредит или страховку;
- проверить вклад;
- подписаться на рассылку вакансий и информационных материалов;
- выбрать карту;
- выбрать счета.
![Превью проекта](/upload/landing/750/7504bf828a88a97f83c44e6b49771090.png)
Структурировали отчет по периодам и типам операций
![Превью проекта](/upload/medialibrary/974/9744541d82e11f7c94018b8b406f4f04.png)
Сделали быстрый и удобный доступ к продуктам банка
![Превью проекта](/upload/medialibrary/e34/e346ce986f9c3c5c6512b1d0ac1fb31f.png)
Достигли сбалансированной композиции элементов
![Превью проекта](/upload/medialibrary/515/515b50106a2264c0e1600ceb2f1e34fb.png)
Создали адаптивную версию
![Превью проекта](/upload/medialibrary/0b7/0b78c568ba75c86c624d6ccd5ec58788.png)
Дизайн-система
Для этого мы переработали и расширили дизайн-систему, которая позволяет взаимозаменять элементы и блоки, использовать уже готовую базу стилей и компонентов с variants и auto layout для быстрого редактирования и адаптации макетов под разные разрешения экранов.
То есть мы построили систему, которую бизнес-заказчик сможет легко развивать и дополнять без особых проблем своими силами и без привлечения сторонних дизайнеров.
![Превью проекта](/upload/landing/043/043e81b16248fa105c6111beaf7130b2.png)
Удобная и современная дизайн-система, которая легко передается в другие руки, ей удобно пользоваться, а также современные UX и UI, которые ставят новый кабинет банка на новый уровень. Команду можно похвалить как раз за то, что она была командой, за внутреннее взаимодействие, за построение сложной системы.
![Логотип компании](/upload/landing/a56/a56b41b04138f832cc176be8ce94af92.png)
Команда проекта
![Превью проекта](/upload/landing/91e/91e31b790f78a967836a1120120717b6.png)
для пользователей. Чтобы вы могли без проблем использовать банковские продукты онлайн и не тратить лишнее время.
![Превью проекта](/upload/landing/dc2/dc2f5c8999de31101a5a2b565df1eb93.png)
Команда AGIMA
-
Марина Дорохова
Ведущий системный аналитик
-
Дмитрий Подлужный
Руководитель направления проектирования интерфейсов
-
Наталья Шарова
Дизайнер
-
Михаил Дырма
Руководитель проектного офиса
-
Анна Романова
UX-дизайнер
-
Константин Кислейко
Руководитель отдела дизайна
-
Алена Лагойкина
Дизайнер
-
Дмитрий Царев
Руководитель проекта
-
Валерий Передистый
UX-дизайнер
-
Дмитрий Кожевников
Арт-директор
-
Александр Бароненков
Руководитель проекта
-
Артем Гриценко
Руководитель отдела проектирования информационных систем