Мобільний банкінг

Проблема

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

Задача

Ціль — запропонувати нові UI-рішення: створити сучасну та цілісну візуальну мову, яка покращує користувацький досвід і робить продукт конкурентнішим на ринку. Паралельно — запропонувати покращення UX.

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

Конкурентний аналіз

Порівняла рішення провідних банків і фінтех-застосунків — Revolut, Wise, Monzo, Monobank, N26, Privat24, Ощад24, Chime.

Ключові зони інтерфейсу, які порівнювала

• Основні дії під карткою.
• Історія операцій на головному екрані та фільтри.
• Персональні пропозиції.
• Структура таб-бару.

UX-рев'ю поточних флоу

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

Головний екран

• Перевантаження зверху: аватар, привітання, велика картка та іконки борються за увагу — немає чіткого фокусу.
• Картка як основний об'єкт взаємодії розташована поза зоною комфортного дотягування великим пальцем.
• Поганий масштаб для 5+ карт: багато свайпів, немає індикатора, скільки карт і де ти зараз.
• Не вистачає кнопки «Переглянути усі картки».
• Деталі картки: неправильна пріоритизація — номер картки, IBAN і термін дії заховані за додатковими кліками, хоча користувач шукає саме їх.
• Піктограми не уніфіковані: різна візуальна вага й масштаб ускладнюють навігацію.

Дослідження користувачів

Запустила опитування про мобільний застосунок: головний екран, платежі, налаштування та частота використання продуктів банку. Участь узяли 120 респондентів.

Деякі висновки після дослідження

• Виявилось, що користувачам важливо самостійно керувати головним екраном: 65 % хотіли б самі обирати, які блоки на ньому відображаються.
• Виявилось, що найчастіші платежі — переказ на картку, переказ за реквізитами / IBAN, поповнення мобільного та комунальні платежі.
• Виявилось, що 42 % користувачів не розуміють, як оформити кредит, у чому різниця між продуктами і як правильно та вигідно відкрити депозит.

Summary — основні інсайти

Презентувала PM рішення на основі проведених досліджень та UX-рев'ю й обговорили подальші кроки. Ці інсайти лягли в основу концепту — кожен сформульований так, щоб мати не лише користувацьку, а й бізнес-цінність.

• Перенести часті платежі у «Швидкі дії» з кастомізацією — прискорить ключові транзакційні сценарії (більше операцій — більше комісій), підвищить відчуття контролю й знизить навантаження на підтримку.
• Єдиний флоу створення платежу (IBAN / картка / телефон) — підвищить конверсію в завершений платіж, зменшить кинуті сценарії та створить базу для нових платіжних сервісів без зміни UX.
• Кнопка «Усі рахунки» в ненав'язливому форматі — зменшить когнітивне навантаження; при великій кількості карток покращує конверсію в платежі та дає простір для пріоритезації прибуткових продуктів.
• Stories як формат персональних пропозицій — звичний і ненав'язливий формат із високим CTR; персоналізація підвищує конверсію в продукти банку.
• Налаштовувані блоки на головному екрані (баланс, історія, кешбек, кредити) — банк може пріоритезувати маржинальні продукти, а головний екран стає маркетинговим інструментом, а не просто дашбордом.

Гіпотези для юзабіліті-тесту(на майбутнє)

Частину рішень треба перевірити на користувачах — зафіксувала, що саме вимірювати.

• «Швидкі дії» з кастомізацією — чи зрозумілий і простий функціонал у використанні та скільки часу займає виконання дії.
• Єдиний флоу створення платежу — кількість кинутих сценаріїв і швидкість виконання дії.

Прототипи нових флоу

Зібрала нові флоу платежів: відкритий пошук отримувача за ЄДРПОУ, IBAN або назвою — щоб створити й виконати платіж за наявними даними в один клік. Додала нещодавні платежі, розділення на категорії «Перекази / Платежі / Сервіси» та явну кнопку «Створити платіж».

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

Зібрала візуальну основу майбутньої дизайн-системи: кольорові токени, типографіку, іконки та компоненти — з підтримкою чотирьох тем: Light, Dark, Contrast-Light і Contrast-Dark.

Контрастні теми тут — не питання смаку, а вимога відповідності: у банкінгу доступність регламентована, тому кольорові пари перевіряла за WCAG рівня AAA (контраст від 7:1 для основного тексту).