Будучи єдиним дизайнером на продукті, розробити з нуля мобільний банківський застосунок для фаз MVP і MMP з урахуванням потреб локального ринку Узбекистану, особливостей законодавства та поведінкових патернів користувачів.
Figma
2024-2025 (1 рік)
Нижче — детально розписано, скільки етапів, завдань, рішень і комунікацій стояли за цим продуктом. Усе було зроблено поетапно — від дослідження ринку до виходу в прод.
Дослідження та стратегія запуску
Ціль — зануритися в контекст ринку, зрозуміти користувача, визначити напрям продукту.
• Аналіз ринку Узбекистану, вивчення культурного контексту
• Проведення інтерв’ю з місцевими користувачами
• Аналіз 20+ локальних банківських та просто популярних застосунків
• Визначення ключових платформ (95% Android, 5% iOS)
• Формування загального бачення функціоналу та структури застосунку
• Планування фаз MVP та MMP, розподіл фіч
Побудова основи продукту
Ціль — створити фундамент для подальшої розробки.
• Побудова навігації, юзер-флоу та логіки роботи інтерфейсу
• Створення дизайн-системи з нуля (на базі Material 3)
• Адаптація бренд-буку для інтерфейсного використання
• Визначення пріоритетів у фічах для запуску
• Вибір платформених патернів з урахуванням Android/iOS
• Підготовка технічного ТЗ для ілюстрацій, персонажа, UI-графіки
UX/UI-дизайн застосунку
Ціль — реалізувати всі заплановані функції в зручному інтерфейсі.
• Тісна комунікація з розробниками: узгодження рішень, технічні можливості
• Дизайн головного екрана з балансами та віджетами
• Стрічка транзакцій, деталі, нотифікації
• Профіль, налаштування, вибір мови
• Додавання карток, управління ними, сортування
• Система кешбеку, бонусів, рефералів
• Екран і логіка кредитної картки: налаштування, блокування, ПІН-код
• Адаптація під темну і світлу теми
• Збереження нативності для Android і iOS
• Оптимізація функціоналу для збереження дедлайнів
• Адаптація до обмежень банку та законодавства
Впровадження, оптимізація та прод
Ціль — довести продукт до готовності та забезпечити його стабільний запуск.
• Робота з аналітиками та тестувальниками: перевірка відповідності UX та UI
• Проведення дизайн-рев’ю на кожному етапі
• Підготовка застосунку до публічного релізу
Онбординг у цьому проєкті став справжнім викликом — потрібно було створити швидкий та зручний флоу реєстрації, дотримуючись при цьому жорстких юридичних вимог Узбекистану. Завдяки глибокому аналізу я змогла оптимізувати процес і побудувати логіку, яка виглядає простою для користувача, хоча під капотом усе набагато складніше. Це один із тих кейсів, де продуманість UX напряму вплинула на швидкість входу в продукт.
Виклики
Найбільший виклик — законодавство Узбекистану та особливості державної системи верифікації. Необхідно було врахувати обмеження банку, ручні перевірки, і водночас зберегти зручний UX. Що я зробила?:
Логіка флоу
Основні кроки: номер телефону → OTP → фото документа → селфі → пароль → фінальний етап (ручна перевірка банком). Окремо: флоу «Забув пароль» із повторною верифікацією.
Додатково по частині дизайну:
Адаптація Welcome Guide під різні екрани та обидві платформи. Анімації фону, гайдлайни з поведінкою, станами, підказками. Для всіх нестандартних екранів — окремі описи для розробників.
Опрацьовано два варіанти отримання картки: у відділенні або з доставкою курʼєром. У країні, де немає стабільної пошти, а курʼєрська доставка доступна лише в окремих містах, потрібно було створити простий і зрозумілий флоу отримання картки.
Виклики
Головна складність — обмежена доступність доставки в Узбекистані. Відділення банку є майже всюди, кур’єр працює лише в кількох містах, поштових сервісів як альтернативи немає. Також карти часто відображають адреси некоректно, особливо поза столицею — це ускладнювало процес вибору локації доставки.
Тому, якщо користувач починає з кур’єрської доставки, але місто не підтримується — його мʼяко перенаправляє на самовивіз із відділення. Для вибору місця — спочатку пропонується точка на мапі, а не адреса, бо це надійніше у випадку Узбекістана.
Додатково у флоу доставки можна змінити адресу й номер після оформлення, реалізовано відстеження курʼєра в день доставки, продумані сценарії, якщо доставити не вдалось або користувач не забрав картку.
На головному екрані відображається список усіх карток. Додати нову можна через введення вручну або сканування. Система автоматично підставляє термін дії та надсилає код підтвердження. Передбачено сценарії повторного додавання картки, помилок сканування та некоректних даних, кожен із них має своє рішення й пояснення.
Адаптація під різні екрани та платформи
Створення гайдлайнів
Розділ, де користувач може керувати основними параметрами: змінити пін-код, заблокувати картку, налаштувати безпеку, скопіювати номер, замовити перевипуск віртуальної чи фізичної картки.
Детальніше про флоу самого кредиту далі.
Кредитна картка — складний продукт із багатьма сценаріями, статусами та залежностями. Щоб зробити все максимально зрозумілим для команди, я виокремила 7 основних кейсів, які можуть виникнути в користувача: від повного погашення до часткової або повної несплати.
Для наочності я створила візуальний календар, де на прикладі умовного клієнта показано розвиток подій:
1 числа — він отримав ліміт,
5 числа — скористався ним,
а далі — кілька варіантів флоу: погасив, не погасив, частково сплатив, зробив мінімальний платіж тощо.
Цей підхід дозволив буквально прожити з клієнтом його кредитну історію, що зробило процес зрозумілим для продактів, девелоперів і банку.
Також я передбачила всі можливі статуси картки, пуші, нотифікації й навіть флоу відмови від кредитного ліміту.
Ключова ідея — це не просто UX-флоу, а жива історія користувача, яка пояснює продукт на всіх рівнях.
У профілі користувач може змінити пін-код, мову, тему, аватарку та керувати іншими базовими налаштуваннями.
Було також розроблено систему нотифікацій із візуальною градацією повідомлень — від нейтральних до критичних.
Стрічка транзакцій — одна з найбільш обʼємних частин застосунку: з деталізацією по категоріях, типах карток і великою кількістю варіантів взаємодії. Тож про цю частину розповім детальніше.
Стрічка транзакцій у застосунку поділялася на дві частини:
– транзакції з власної картки банку (Visa),
– транзакції з прив’язаних карток інших банків.
Це розділення було важливим, оскільки по прив’язаних картках оновлення можуть приходити із затримкою, а рівень деталізації — нижчий. Тому в деталях транзакції користувач бачить різний набір інформації залежно від типу картки.
У самих деталях транзакції були реалізовані:
– статуси операцій: успішна, повернення, відмова, обробка
– залишок по балансу після транзакції
– комісії (включно з валютними операціями)
– кешбек, якщо він застосовується
– коментар до операції (наприклад, при переказі на картку)
– функції: повторити платіж, зберегти картку, отримати квитанцію, поділити рахунок, підтримка, тощо
Окрім самих екранів, я створила унікальний дизайн для категорій транзакцій, який включає:
– близько 30 іконок категорій
– кольорову ідентифікацію кожної категорії (один колір на бекенді)
– гайди для логотипів мерчантів, якщо вони належать до певної категорії
І все це універсально для обох тем.
Іконки були розроблені так, щоб одна SVG-іконка масштабувалась у різні розміри: 24х24, 32х32, 40х40, 80х80 — і скейлилась в залежності від контексту: бейдж, кешбек, стрічка тощо.
Було створено окремі гайди для фронта і бекенда з чіткими інструкціями:
– де який колір застосовується
– які іконки де використовуються
– як працює масштабування
– як категорії повторно використовуються, наприклад, у флоу кешбеку
Цей підхід зробив підтримку інтерфейсу дуже простою: всі візуальні ефекти — це UI-обробка однієї іконки й одного кольору, а не сотні окремих ресурсів.
У цьому флоу користувач може переказувати між своїми рахунками, прив’язаними картками, картками контактів і навіть на відскановану карту. Шаблони, підказки, підтвердження, швидкий доступ, додаткові підказки на випадки, коли щось іде не за планом: комісії, кредитні ліміти, ліміти переказів.
Було реалізовано:
Перекази охоплюють одразу кілька сценаріїв: між власними картками банку, привʼязаними картками інших банків, картками контактів, а також на нові картки за номером.
Кнопка «Розділити оплату» зʼявляється в деталях будь-якої оплати що відповідає мінимальній суммі та категорії для цієї фічі. Користувач обирає контактів і ділить суму — порівну або вручну. Отримувачі оплачують у один клік через повідомлення.
Я, як завжди, детально пропрацьовую схему флоу: структуровано відображаю процес, підписую всі кейси та групую їх за логікою сценаріїв. До кожного флоу додаю пояснення важливих нюансів, які допомагають команді глибше зрозуміти продукт. Також від себе фіксую критичні моменти, пов’язані з логікою — наприклад, як саме підраховуються копійки або як розподіляється сума між учасниками так, щоб вона не перевищувала загальну суму транзакції та ін.
Копійки автоматично додаються ініціатору, щоб інші не витрачали час на введення дрібних значень. Враховуючи великі суми в узбекській валюті, копійки вводити необов’язково. До запиту можна додати фото чека й коментар, а також відстежувати, хто вже сплатив свою частину. Є функція нагадування про оплату.
У застосунку створено окремий розділ «Бонуси» — це бонусний рахунок, з якого користувач вивести кошти на свою картку. Бонуси нараховуються за кешбеком та за реферальною програмою. Було розроблено окремі флоу для активації кешбеку, відстеження бонусів та запрошення друзів.
Аби трошки гейміфікувати UI, аби бонуси були не просто цифрою в інтерфейсі, а відчутною винагородою, я довго шукала, що саме могло б бути нагородою для нашого котика-маскота. Було багато ідей, але перемогла рибка. Її можна цікаво обіграти в іконках, 3D-графіці й анімаціях. Так з’явився милий, впізнаваний дует котика з рибкою.
Було створено продуманий до деталей флоу кешбеку — з фокусом на зручність клієнта та оптимальність для бекенду. Головний екран розділу «Бонуси» одразу показує поточний баланс бонусів та статус кешбеку — з закликом до активації, якщо кешбек ще не підключено. Це зроблено, щоб користувач міг швидко діяти без зайвих кроків.
Щоб не навантажувати бек, історія кешбеку винесена на окремий екран, а на головному — лише ключові дані. Якщо свайпнути поточний баланс, відкривається маркетинговий елемент — загальна накопичена сума бонусів, щоб підсилити ефект і заохотити до частішого користування фічею.
На екрані також показано:
підказки, статуси та обробка всіх можливих кейсів: від вимкнених конфігів до технічних помилок.
Застосунок нарешті побачив світ. Ми пройшли довгий шлях — від перших вайрфреймів до релізу MVP. І хоч цей огляд добігає кінця, для продукту все тільки починається. Попереду — найцікавіший етап: спостерігати, як користувачі взаємодіють із нашим застосунком, збирати дані, аналізувати поведінку, знаходити слабкі місця й робити продукт кращим щодня.
Для мене це особливий момент. Я з великою любов’ю вкладалася в кожен флоу, кожен продукт, кожен піксель. І зараз із нетерпінням чекаю на нові відкриття, інсайти та вдосконалення. Бо найцікавіше — ще попереду.
