UX/UI дизайн веб- і мобільного додатку, редизайн і розробка сайту для необанку

Emerald24 — це британський діджитал-банк, який обслуговує клієнтів із Європи, покриваючи як щоденні фінансові операції, так і мультивалютні транзакції.

UX вебзастосунку та мобільного додатка був розсинхронізований

Досвід використання онлайн-банкінгу на мобільних та веб-застосунках був застарілим і незручним. Користувачі відчували труднощі з онлайн-платежами, управлінням транзакціями та переходом між пристроями.

Незважаючи на технічну стабільність фінтех-платформи, її архітектура не встигала за зростанням Emerald24 як цифрового банку. UX-сценарії були заплутаними: нові клієнти з трудом розбиралися з початком роботи, а щоденні дії відчувалися монотонними та повторюваними. Перехід між веб-версією та мобільним застосунком був асинхронним і лише ускладнював процес.

Застарілий дизайн сайту і айдентика, вже не відповідали розвитку продукту

Клієнт зазначив, що поточний вебсайт Emerald24 не повністю відображав можливості та позиціонування продукту.

Його візуальний стиль, структура та навігація були застарілими й не підкреслювали ключові функції, як-от мультивалютні рахунки та розширені платежі.

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

UX/UI дизайн веб- та мобільного банківського застосунку

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

• Для кінцевих користувачів платформа мала спростити щоденні завдання — онбординг, підтвердження платежів і управління рахунками — як у вебверсії, так і в мобільному застосунку.
• Для внутрішніх команд було важливо зберегти прозорість комплаєнсу, водночас зменшивши кількість рутинних операцій.
• Для бізнес-партнерів і корпоративних клієнтів віртуальний банкінг мав масштабуватися без ускладнення, забезпечуючи швидкі операції, 24/7 доступ до фінансів і високий рівень безпеки.

Це допомогло нам втримати фокус на реальних потребах продукту й ухвалювати зважені рішення протягом усього процесу дизайну продукту.

Новий онбординг в онлайн-банкінгу

Попередній UX-дизайн онбордингу об'єднував верифікацію особи, подачу документів і їхню перевірку в єдиний процес. Ми розбили його на менші кроки, кожен із яких зосереджений на одній конкретній дії. 

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

Онбординг став простішим і менш стресовим для нових юзерів,
а час до етапу перевірки скоротився з 40–60 до 20–30 хвилин.

Покрокове створення банківської заявки

Ми структурували стан розгляду банківської заявки у вигляді чітких і відокремлених етапів із наочним відображенням прогресу. На кожному кроці користувач бачить лише ту інформацію, яка потрібна
саме зараз — це зберігає фокус протягом усього процесу.

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

Ключові документи запитуються на ранніх етапах, щоб уникнути затримок надалі. У будь-який момент користувач може повернутися назад, переглянути та оновити свої дані — не порушуючи загального флоу.

Синхронізація дій юзерів між пристроями

Клієнти Emerald24 нерідко починають дії у вебзастосунку, а завершують їх у смартфоні. Ми спроєктували флоу, яке підтримує таку поведінку, зберігаючи при цьому наявну систему авторизації — SMS OTP і пароль.

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

Пріоритизація функцій
для різних ролей клієнта

Emerald24 обслуговує різні категорії користувачів — фінансових менеджерів, власників бізнесу та операційних спеціалістів, кожен із яких має свої потреби й очікування.

Ми розподілили функції банківського застосунку на три рівні: обов'язкові, бажані та додаткові. Потім зіставили
їх із частотою використання — щоденною, щотижневою або епізодичною.

Це зробило ключові фінансові дії легкодоступними, тоді як менш уживані інструменти винесено глибше в інтерфейс — у розділи «Налаштування», «Профіль» або «Розширені можливості».

Редизайн бренд-айдентики
без перебудови бренду

Нова айдентика поєднала скляну стилістику, зелений градієнт та ілюстрації в гласморфізм-підході. Ми поступово інтегрували ці елементи, щоб уникнути перевантаженого або надмірно складного інтерфейсу.

Градієнт став ключовим візуальним елементом дизайн-системи, тоді як 3D-іконки у скляному стилі використовувалися лише в окремих контекстах. 

Це дозволило зберегти інтерфейс професійним, чітким і зручним у використанні, водночас додавши сучасного візуального характеру, якого клієнт прагнув із самого початку.

Ми переробили дизайн головного екрана застосунку, щоб підтримати досвідчених юзерів і водночас не перевантажувати інших користувачів.

Вкладка Home мала показувати кілька гаманців у різних валютах і бізнес-рахунки, створюючи високу щільність даних. Інтерфейс залишався чистим завдяки чіткій пріоритизації — ми протестували різні лейаути, щоб збалансувати обсяг і читабельність.

На десктопі запровадили модульну структуру з поділом на сайдбар і робочу область та визначили п’ять універсальних патернів для узгодженості під великим навантаженням.

Ключовою складністю було розділення ролей: бухгалтерів і власників бізнесу. 

Перші потребували швидкого доступу до великих обсягів даних, другі — зрозумілого інтерфейсу.

Ми додали опцію «Показати все»
з розширеними переглядами для бухгалтерів — без перевантаження базового досвіду.

Редизайн застарілої форми
онлайн-платежів

Старі платіжні форми Emerald24 були занадто довгими та складними для заповнення.
Ми спростили їх, використавши покроковий підхід, який часто застосовується
в e-commerce-сценаріях.

Замість однієї великої форми ми розбили процес на менші кроки, кожен з яких зосереджений на одній темі. Користувачі завжди можуть переглянути та редагувати попередньо введені дані у простому, компактному вигляді.

Це дозволяє зосередитися на поточному кроці, зберігаючи при цьому повний контроль над усім процесом.

Опція пакетного підписання під час підтвердження платежів

Чимало клієнтів Emerald24 заходять у систему саме для того, щоб схвалити кілька платежів. Раніше кожен платіж потребував окремого підтвердження. Ми впровадили пакетне підписання: тепер користувачі можуть вибрати кілька транзакцій і підтвердити їх за один крок.

Ключові дії — підтвердити, відхилити та переглянути деталі — залишаються доступними протягом усього процесу. Це скоротило кількість рутинних операцій і пришвидшило щоденну фінансову роботу.

Оновлена система клієнтської підтримки

Раніше клієнтська підтримка спиралася на довгі ланцюжки повідомлень, у яких змішувалися різні теми. Ми реорганізували саппорт навколо реальних звернень. Кожен запит відкриває окремий тред, тоді як внутрішня логіка обробки скарг залишається незмінною.

Тепер користувачі можуть відстежувати статус кожного окремого запиту, не гортаючи довгу історію листування. Для внутрішніх команд така структура покращує простежуваність і пришвидшує вирішення питань.

Абсолютно нові інтерфейси,
що втілюють елегантність та технологічний дух необанку

Ми переосмислили структуру сайту, щоб відобразити всі сервіси та продукти Emerald24

Навігацію та контент спростили, щоб користувачі могли швидко зрозуміти складні фінансові продукти. Сторінки продуктів оновили з урахуванням потреб бізнесу, партнерів і фінтех-аудиторії. Тепер сайт відповідає продукту та робить взаємодію зрозумілішою.

Бренд айдентика і типографіка узгоджена з UI застосунку та сайту

Спеціальні сторінки для регіональних користувачів

Нові сторінки продуктів і послуг, які чітко пояснюють наявні банківські інструменти
для фінтех-аудиторії.

Нова головна сторінка сайту та розділ облікового запису у додатку

Результат

Emerald24 тепер працює як єдина банківська екосистема з інтуїтивним UX/UI на веб та мобільних пристроях.

Користувачам стало простіше реєструватися та керувати своїми акаунтами — менше кроків і зайвих дій. Внутрішні процеси також стали простішими та прозорішими.

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

Goodface — UX/UI дизайн-агенція для онлайн-банкінгу

Ми допомагаємо фінтех-компаніям, платіжним платформам і діджитал-банкам покращувати інтерфейси та користувацький досвід. Оновлюємо бренд-айдентику, редизайнимо застосунки та створюємо маркетингові сайти, які генерують попит і передають цінність бренду.

Наша експертиза у фінтеху охоплює UX/UI, дизайн бренд-айдентики та веб-розробку — щоб запускати цілісні, узгоджені продукти, готові до масштабування.