Розробка UX/UI інтерфейсу інтернет-банкінгу Креді Агриколь
UI/UX дизайн інтерфейсів
Клієнт
ПАТ «КРЕДІ АГРІКОЛЬ БАНК» — універсальний банк, власником якого є одна з найбільших фінансових груп Європи – Credit Agricole Group (Франція). Банк працює на фінансовому ринку України з 1993 року та надає повний спектр сучасних банківських послуг корпоративним і приватним клієнтам. Регіональна мережа банку охоплює всі регіони України та налічує близько 170 точок продажу.
CREDIT AGRICOLE також є партнером об’єднаної банкоматної мережі «АТМоСфера», що включає близько 2 000 банкоматів провідних банків України, а власна мережа банку налічує близько 300 АТМ.
Цілі розробки дизайну
Діджитал-агентство artARTERY (Київ) розробило сучасний дизайн інтернет-банкінгу «Креді Агриколь Банк» із урахуванням трендів: адаптивний UX/UI, інтеграція фінтех-сервісів, мультиканальний доступ, AI-помічник та безпека на рівні кіберзахисту. Розроблено понад 120 динамічних екранів користувацького інтерфейсу, 90 шаблонів дизайну, 112 унікальних іконок меню та адаптований email-шаблон. Підготовлено рекомендації для подальшої технічної підтримки і розвитку системи i-Bank для корпоративних та приватних клієнтів з онлайн-кредитами, депозитами та інтерактивною аналітикою.
Цілі та завдання проекту:
- Аналіз системи інтернет-банкінгу та потреб користувачів.
- Розробка дизайн-концепції з урахуванням корпоративного стилю.
- Проектування інтерфейсу з адаптивним UX/UI для всіх пристроїв.
- Створення шаблонів сторінок та унікальних іконок меню.
- Розробка email-шаблонів для банківських повідомлень.
- Тестування дизайну та html-верстки, забезпечення безперебійної роботи.
- Підготовка рекомендацій для подальшого розвитку і технічної підтримки i-Bank.
Ітог роботи та що отримав клієнт
Спеціалісти digital-агентства artARTERY у Києві провели комплексний аналіз та індивідуальну розробку системи дистанційного обслуговування клієнтів для банку «Креді Агриколь Банк». Результатом створення інтернет-банкінгу під ключ стала розробка великої кількості функціональних модулів майбутнього інтерфейсу з урахуванням сучасних трендів фінансових технологій. Завдяки цьому банківська платформа дозволяє користувачам здійснювати різноманітні операції онлайн: від проведення платежів та їх налаштувань (автоплатежі, календар та історія операцій, push-нагадування) до підключення депозитів, кредитів та інвестиційних продуктів. Розробка банківського сервісу передбачала повну адаптивність під усі пристрої: комп'ютери, планшети, смартфони з підтримкою біометричної автентифікації.
На основі детального UX/UI-дизайну для digital-продуктів кожного елемента інтернет-банкінгу наші дизайнери спроектували зручний та інтуїтивний інтерфейс з урахуванням принципів доступності (WCAG) та сучасних patterns взаємодії.
В обсязі індивідуальної розробки дизайну — понад 120 користувацьких екранів і 90 дизайн-екранів з інтерактивними елементами, мікроанімаціями та адаптивними компонентами. Далі була реалізована адаптивна HTML-верстка всіх сторінок з використанням progressive enhancement підходу, яка підлаштовується під різні розміри екрану та забезпечує коректне відображення контенту навіть при повільному інтернет-з'єднанні.
Особливу увагу при створенні банківського інтерфейсу під ключ приділено деталям та консистентності: розроблено понад 110 унікальних SVG-іконок для меню («Мої платежі», «Повідомлення», «Календар», «Інвестиції», «Аналітика витрат» тощо) та єдиний адаптивний шаблон для email-розсилок банку з персоналізованими повідомленнями про операції, що враховує dark mode та accessibility стандарти.
Після завершення front-end розробки наша команда підготувала детальний технічний пакет документації для роботи з інтерфейсом системи, що охоплює компонентну архітектуру HTML, CSS, JavaScript з детальним описом кожної створеної сторінки та UI-компонента. Це спрощує подальшу технічну підтримку, масштабування та модернізацію функціоналу інтернет-банкінгу програмістами та розробниками клієнта без втрати якості та консистентності дизайн-системи.
Що клієнт отримав після створення інтернет-банкінгу:
- Повністю адаптивний інтерфейс інтернет-банкінгу «i-Bank» з підтримкою PWA;
- Індивідуальну розробку понад 120 користувацьких екранів і 90 дизайн-екранів;
- Професійну HTML-верстку всіх сторінок та адаптивний email-шаблон;
- Більше 110 унікальних SVG-іконок для навігаційного меню;
- Технічну документацію та рекомендації для підтримки і розвитку системи;
- Зручний інтерфейс для корпоративних і приватних клієнтів з онлайн-підключенням послуг;
- Інтелектуальні нагадування, календар історії операцій, онлайн-шаблони платежів;
- Біометрична автентифікація (Face ID, Touch ID) для швидкого та безпечного доступу;
- Можливість інтеграції AI-асистентів та персоналізованих фінансових рекомендацій.
Обсяг виконаних робіт:
- Проектування UX/UI – понад 120 екранів;
- Розробка дизайну – понад 90 екранів;
- Адаптивна HTML-верстка – понад 90 сторінок;
- Email-шаблон – 1 адаптивний лист;
- Масштабовані SVG-іконки – близько 112 шт.;
- Компонентна UI-бібліотека для консистентності;
- Технічна документація для підтримки і розвитку системи.
Відео огляд інтернет-банкінгу
ИКОНКИ ДЛЯ БАНКИНГА
всего было придумано и отрисовано 112 иконок для интернет-банкинга
