Приклади дизайну фінтех-застосунків: платежі, інвестиції, кредитування і банкінг
Основні типи фінтеху — платежі, інвестиції, кредитування і банкінг, часто п’ятим називають страхування. Офіційного переліку немає: дослідження 2021 року у Future Studies Research Journal пропонує дев’ять категорій. Нижче — приклади дизайну фінтех-застосунків для кожного типу на екранах, які thelegacy зробила для Solid, Banxe, BANKEX і dEquity.
Кожен тип ставить на перший екран інше число, і цей вибір визначає решту дизайну фінтех-застосунку. Яке саме — у таблиці.
Які основні типи фінтеху і приклади?
Для дизайну продукту чотири типи покривають більшість застосунків, якими користуються люди: платежі, інвестиції, кредитування і банкінг. Таксономія 2021 року (Caciatori Jr. і Cherobim) ділить сферу дрібніше: платежі й перекази, обмін, кредитування, страхування, інвестиції, консультування, B2B, цифрові банки та інше. Реальні продукти часто потрапляють у кілька категорій одразу.
| Тип | Перше питання користувача | Що показує перший екран | Приклад з наших кейсів |
|---|---|---|---|
| Платежі й перекази | Дійшло? Скільки коштувало? | Баланс, отримувач, сума, мережа або комісія до підтвердження | Гаманець BANKEX, P2P у Banxe |
| Інвестиції | Скільки це коштує і скільки приносить? | Активи з ціною, дохідністю, зміною; окрема панель заявки | dEquity |
| Кредитування | Скільки можна позичити і скільки я винен? | Доступна сума, залишок боргу, дата наступного платежу | Опублікованого кейсу немає |
| Банкінг | Де всі мої гроші? | Рахунки з балансами, історія по місяцях, картки | Solid |
Що має показувати платіжний застосунок?
Платіжний екран показує, хто отримає гроші, скільки і яким шляхом, — усе до кнопки підтвердження, а потім квитанцію, яка це повторює. Усе, що людина дізнається після списання, сприймається як пастка.
Криптогаманець BANKEX, який ми спроєктували у 2019 році, дає надіслати токени на адресу, контакту, на нікнейм у Telegram або через QR-код. Кожен шлях закінчується тим самим екраном Transaction Confirmation: сума великим шрифтом на синій шапці, далі From і To з фото контакту, далі одна кнопка Confirm Transaction. Екран інформації про транзакцію після цього показує відправника, хеш, дату і статус Success, Pending або Failed.
Banxe, платформа, що поєднує фіатні та криптосервіси, показує складніший випадок — P2P-угоду між незнайомими людьми. Степер із чотирьох кроків веде угоду, таймер показує, коли пропозиція скасується сама, а поруч панель контрагента: дата реєстрації, кількість транзакцій, рейтинг і рівень верифікації, плюс кнопка Chat. Перевірка довіри відбувається, не виходячи з заявки.
Що має показувати інвестиційний застосунок?
Інвестиційний екран показує активи так, як це робить брокер: ціна, дохідність і рух за останній час в одному рядку, а купівля — на окремій панелі. Рішення і дія розділені навмисно.
dEquity перетворює дохідні будівлі на NFT і дає інвесторам торгувати частками на власній DEX. Таблиця Top offers to invest показує будівлі як акції: тип об’єкта і місто, дохідність зеленим, ціна, спарклайн, тікер, загальна емісія і кнопка Details. Сторінка об’єкта ділиться на вкладки Information і Trading, тож факти про будівлю не змішуються з ринком, а Trading поєднує графік ціни з панеллю заявки і зеленою кнопкою Place Buy Order.
Рішення дизайнера тут таке: сайт для нових інвесторів світлий, білий і блідо-блакитний, а торговий інтерфейс — його темний двійник з тих самих компонентів. Ті, хто роздивляється, і ті, хто торгує, отримують різні поверхні, не вивчаючи два продукти.
Що має показувати кредитний застосунок?
Кредитний екран відповідає на три питання в одному вигляді: скільки доступно, скільки ще винен і коли наступний платіж. Ставка і повна вартість мають бути видні до того, як людина прийме пропозицію, а не в документі за посиланням на останньому кроці.
Опублікованого кредитного кейсу в нас немає, тож ось чек-лист, який ми застосували б, — з тих самих патернів, що вище:
- Доступна сума і залишок боргу — два найбільші числа на екрані
- Сума і дата наступного платежу на головному екрані, а не в меню
- Повна вартість пропозиції до кнопки згоди — так само, як комісія до підтвердження в платежах
- Історія погашень, яку можна прочитати, не відкриваючи кожен рядок, як банківську виписку
- Колір лише зі змістом: прострочене червоним, сплачене зеленим, решта нейтральна
Що має показувати банківський застосунок?
Банківський застосунок спочатку показує всі рахунки з балансами, потім історію, яку можна прочитати одним поглядом. Коли одна людина веде особисті й корпоративні гроші, вони мають виглядати окремо.
Solid дає бізнесу розрахункові рахунки, дебетові картки Visa і платежі ACH, wire, карткою і чеком через банк-спонсор. У застосунку Wallet рахунки згруповано за власником — людиною чи компанією — з проміжним підсумком на групу. Історія поділена по місяцях, кожен рядок має кольоровий тег платіжного каналу, а колір з’являється лише там, де щось означає: зелений для надходжень, червоний для списань.
Більше спільних для всіх чотирьох типів патернів, від квитанцій до комісії до підтвердження, — у нашому гайді UX-дизайн фінтех-продуктів. Як ми працюємо з фінтех- і криптозастосунками, показано на сторінці дизайн мобільних застосунків.
Головне
- Кожен тип фінтеху ставить на перший екран своє число: платежі — суму й отримувача, інвестиції — дохідність, кредит — борг і дату платежу, банкінг — баланси рахунків.
- Усе, що стосується вартості, має бути видно до кнопки підтвердження: людина, яка дізналася про комісію після списання, перестає довіряти.
- Рішення і дія — на різних панелях: у dEquity факти про будівлю на вкладці Information, а заявка на купівлю — на вкладці Trading.
Часті запитання
Які основні типи фінтеху і приклади?
Найчастіше називають чотири: платежі й перекази, інвестиції, кредитування і цифровий банкінг, іноді п’ятим — страхування. Приклади з наших кейсів: криптогаманець BANKEX для платежів, dEquity для інвестицій у токенізовану нерухомість, Solid для бізнес-банкінгу.
Що таке чотири стовпи фінтеху?
Так зазвичай називають ті самі чотири напрями: платежі, інвестиції, кредитування і банкінг. Офіційного стандарту немає, а академічні класифікації бувають дрібнішими, наприклад дев’ять категорій у дослідженні 2021 року.
Назвіть п’ять прикладів фінтеху.
Платіжний застосунок для переказів, криптогаманець, платформа для інвестицій, цифровий банк із картками і рахунками в застосунку та сервіс онлайн-страхування. Один продукт часто поєднує кілька таких функцій.
Криптогаманець — це фінтех-застосунок?
Так. Він зберігає і переказує гроші, тому стоїть у тій самій категорії платежів і переказів, що й звичайні платіжні застосунки, а до дизайну висуваються ті самі вимоги: сума, отримувач і мережа до підтвердження.
Чому торгові інтерфейси часто роблять темними?
На темному тлі графіки, зелені й червоні зміни ціни та щільні таблиці читаються контрастніше під час довгої роботи. Тому, наприклад, у dEquity сайт для інвесторів світлий, а торговий інтерфейс — темний двійник з тих самих компонентів.
