Дизайн необанків: чому одні фінтехи стають єдинорогами, а інші закриваються

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

На тому ж континенті необанк із гарним застосунком і ставкою на заощадження, через яку люди переходили до нього, повернув AU$252 млн 37 884 клієнтам і закрився. Люди його любили. Він не мав на чому на них заробляти.

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

BloxFi, робота Figmatica: фінтех-бренд, у якому гроші рухаються на екрані

Перш ніж до чужих банків, про наш власний. BloxFi це глобальний API для конвертації валют і міжнародних розрахунків у 120+ валютах, для фінтехів, цифрових гаманців і великого бізнесу. Бренд, анімацію і сайт на Webflow ми зробили однією командою, і правило для анімації було просте: кожна функція отримує одну маленьку анімацію, у якій гроші щось роблять.

Подивіться на деталі в ролику вище. Клієнт у чаті просить обміняти 15 млн західноафриканських франків на USDT, і відповідь приходить із курсом. Монета євро пересуває перемикач. Глобус із точок обертається під «глобальними розрахунками». Виплата 12 648 USDT падає поруч з іменем. Жоден із цих кліпів не триває довше кількох секунд, і кожен замінює абзац тексту, який покупець пропустив би.

Перший екран робить те саме, що гора Mercury нижче на цій сторінці: задає настрій, перш ніж про щось просити. Чорний, один рядок, «простий шлях до світової ліквідності», і хромований знак, що повільно обертається. Знак це суцільний блок, який розпадається на зʼєднані частини, так само як BloxFi збирає розрізнені платіжні канали, тож логотип заодно пояснює продукт.

«Як це працює» це місце, куди більшість фінтех-сайтів ставить схему. Ми дали кожному кроку власну темну картку, яка змінюється під час скролу: консультація відкривається як чат, прапори країн обертаються довкола знака поруч із 80+ країнами і 100+ валютами, іконка термінала каже «інтеграція менш як за два тижні», знак долара перетворюється на знак стейблкоїна під словом «миттєво», а останній крок це Земля на світанку. Покупець читає чотири рядки і бачить чотири зміни стану своїх грошей.

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

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

Бренд виходить за межі сайту так само, як картка необанку виходить із застосунку: чорні футболки зі знаком-блоком і пости в соцмережах тією ж темною, точною мовою: «120+ валют, один API»; «80+ країн, на звʼязку». Клієнт підсумував бриф одним рядком: нам потрібно було більше, ніж просто сайт.

Головне

• 01Більшість клієнтів приходить від друзів. Nubank у 2021 році залучив 80–90% клієнтів органічно, Monzo 79% через сарафанне радіо, Wise понад дві третини. Дизайн це реклама, яку люди передають одне одному.
• 02Картка це білборд. Картка-ескімо Lunar, коралова Monzo, фіолетова Nubank, картка банку для геймерів, що летить крізь неонові літери: картка це єдина частина необанку, яку люди бачать на вулиці.
• 03Перший екран це настрій, а потім одне поле. Mercury ставить стіл на вершину гори, Up сонце в окулярах; обидва просять лише одне.
• 04Гроші отримують імʼя. Горщики, кишені, скриньки й банки перетворюють баланс на цілі.
• 05Тарифи це вітрина. Чотири тарифи поруч, один позначений найпопулярнішим, найвищий з металевою карткою.
• 06Кожен екран служить двигуну грошей. Комісія з оплат карткою, кредитна картка першою, підписки, тонка комісія на великому обсязі. Необанки, що закрилися, мали дизайн і не мали двигуна.
• 07Покажіть гроші до реєстрації. У наших фінтех-роботах ціна чи заощадження зʼявляються раніше за форму: повзунок обсягу в BloxFi, перевірка ставки в CheckMyRate.

Що таке необанк і як він заробляє

Необанк це банк, який живе в телефоні: без відділень, рахунок відкривається за хвилини, підтримка в чаті. Складне стоїть за екраном. У галузі заробляє лише невелика частка таких банків: серед 249 цифрових банків-челенджерів вихід на беззбитковість мали 13, а середній клієнт у США приносить необанку $70–80 на рік. Тож кожне дизайн-рішення мусить десь нести виручку, і кожен з переможців будував на одному зрозумілому двигуні.

Воронка необанку очима клієнта

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

Рішення 1: картка як білборд

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

Pinch, чековий рахунок і дебетова картка для фанатів стримерів і авторів, тут показаний зі свого сайту до запуску, іде ще далі. Сторінка темна, літери це контури, що спалахують червоним і синім неоном, поки скролиш, «ласкаво просимо до банку геймерів», а коралова картка пролітає крізь них, як бонус у грі. Далі дизайн робить рідкісну річ: пояснює двигун грошей уголос. Звичайні банки заробляють на комісії з оплат карткою; з Pinch частина цієї комісії йде автору, якого ви обрали. Картка тут і продукт, і білборд, і бізнес-модель на одному екрані.

Колір робить ту саму роботу в масштабі. Кораловий колір Monzo мав бути лише на прототипі. Він лишився, бо люди озиралися на касах; тепер банк каже, що колір означає його теплоту й людяність. Засновник Nubank хотів, щоб картка була якомога антибанківською, тож вона фіолетова, і Nubank спроєктував ще й момент, коли вона приходить: вітальний набір, що пройшов пʼять версій, хештег для поста з розпаковкою і несправжня картка всередині, щоб люди фотографували набір, не показуючи свого номера. Розпаковка стала рекламою, яку клієнт робить безкоштовно.

Wealthsimple, канадський застосунок для грошей, знімає свою чорну кредитну картку так, як годинниковий бренд знімає годинник: мʼяке світло, тінь, один рядок про 2% кешбеку з усього. Revolut перетворює картку на прайс, з карткою на кожен тариф, від кольорового пластику до покритої платиною, а N26 продає металеву. Картка це спосіб зробити підписку чимось, що можна тримати в руці.

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

Рішення 2: настрій і одна дія на першому екрані

Mercury обслуговує стартапи, і на його першому екрані немає нічого банківського: стіл і офісне крісло стоять на вершині гори над хмарами. «Радикально інший банкінг», заявка онлайн за 10 хвилин, одне поле для пошти, одна синя кнопка. Картинка каже те, що засновник відчуває в хороший день; поле просить найменшого можливого кроку. Нижче докази: понад 300 000 підприємців і цитата засновника, що все робиться в застосунку за хвилину-дві.

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

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

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

Рішення 3: рахунок за хвилини, а не візит

Відкрити рахунок колись означало відділення, чергу і стос паперів. bunq, нідерландський необанк, називає себе банком вільних і вміщує все в три пронумеровані кроки: завантажити застосунок, заповнити імʼя й адресу, підтвердити особу коротким відеоселфі. Пʼять хвилин, написані в заголовку.

Lunar завершує головну плитою кислотно-зеленого і QR-кодом: зареєструйтеся за хвилини, спробуйте нас, не змінюючи банку. Останнє речення і є дизайн-рішенням. Відвідувач, якого просять піти зі свого банку, вагається; відвідувач, якому пропонують спробувати другий, сканує.

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

Що взяти: рахуйте кроки до першої оплати, а не до рахунку, напишіть це число на сайті і просіть спробувати, а не перейти.

Рішення 4: гроші з імʼям, горщики, кишені й банки

Баланс це число. Горщик з імʼям це план. Горщики Monzo прийшли від клієнтів: ідея папок чи відерець для грошей почалася як гілка на форумі спільноти банку. Сьогодні горщик отримує назву і фото, наприклад місце мрії для відпусткового, їх можна мати до 20, а рахунки оплачувати прямо з горщика. bunq дає до 25 кишень, у кожної свій IBAN, тож гроші на оренду і на подорожі мають власні адреси. На англійському сайті Nubank клієнтка з Мексики пояснює всю ідею одним реченням: вона користується скриньками, бо бачить, як гроші ростуть.

Версія monobank показує, як далеко може зайти ціль з імʼям. Його Банка це скляна банка, яку обіймає кіт; створення займає пару секунд, а поповнити її може будь-хто з будь-якого банку світу, через Apple Pay, Google Pay чи IBAN, без картки monobank. Це одне рішення перетворило інструмент накопичень на спосіб, яким Україна разом збирає гроші: ₴147 млрд через банки від 15 млн донорів.

Що взяти: дайте людям назвати свої гроші. Мета з назвою і картинкою тримає їх у застосунку, а мета, до якої можуть долучитися інші, приводить нових людей.

Рішення 5: голос і персонаж

Сонце Up і його трикутні друзі це один зі способів дати банку обличчя. Klarna має рожевий, настільки впізнаваний, що він працює без логотипа, і відкриває сайт рудим котом на дряпці і чотирма словами: get your money sorted. Кіт monobank виріс із вірусного фото кота одного із засновників у рюкзаку-переносці і тепер має багато образів на екранах завантаження та успіху; коли друзі ділять рахунок, кіт обирає, хто платить. Monzo публікує свій гайд тону для всіх.

Голосом може бути й шрифт та матеріал. Сторінки Robinhood Gold переходять зі звичного для застосунку гротеску на великий шрифт із зарубками, чорний і теплий золотий, а поруч із заголовком крупний план чорної механічної скульптури. Це читається як приватний банк, а ціна під цим $5 на місяць. Голос продає апгрейд раніше, ніж це зробить список переваг.

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

Рішення 6: підтримка як частина продукту

У банку без відділень є одне місце, де людина зустрічає людину: чат підтримки. bunq ставить його поруч зі страхуванням депозитів і кількістю користувачів, три однакові плитки: €100K захищено, 22 млн користувачів, підтримка 24/7. Kroo, британський банк, віддає цілий блок під рядок «Kroo роблять люди». Команда Nubank після важливих розмов надсилає маленькі подарунки й написані від руки листи; її NPS у Бразилії у 2021 році становив 90.

Зворотний бік: гігант оплат частинами, що замінив підтримку на AI, згодом визнав падіння якості і повернув людей, а платіжний застосунок оштрафували на $175 млн, зокрема за те, що клієнти не могли дістатися до людини. Lunar тепер ставить на головну AI-асистента; урок обох історій: додавайте асистента і тримайте людей на відстані одного дотику.

Що взяти: проєктуйте підтримку як екран продукту, видимий на сайті, у каналах, якими люди вже користуються, з людським голосом.

Рішення 7: ріст, вбудований у продукт

Переможці росли через своїх клієнтів. У 2021 році Nubank залучив 80–90% клієнтів органічно, приблизно по $5 за клієнта, і його англійський сайт каже це прямо: бізнес-модель живе на любові клієнтів і нижчих витратах, які крутять маховик росту і прибутку. Monzo каже, що 79% прийшли через сарафанне радіо, Wise понад дві третини.

Up вбудовує запрошення у функції: що більше друзів у вас в Up, то легше ділити, відстежувати і закривати спільні витрати, а сайт закінчується посиланням «підключи друга». Monzo спроєктував свій ріст як продукт. Він зібрав £1 млн від 1 861 клієнта за 96 секунд у краудфандингу, так швидко, що платформа впала. Він стартував зі списку очікування і дав кожному користувачу один золотий квиток, щоб провести друга без черги; ці квитки дали близько 40% реєстрацій того року. Його реферальна сторінка це конверт, з якого висувається коралова картка.

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

Рішення 8: тарифи як вітрина

Підписки це двигун, якому потрібно найбільше дизайну. Lunar розкладає на головній чотири тарифи: Light безкоштовно, Standard за 39 крон, Plus за 79 і Unlimited за 149 на місяць. Три кнопки зелені; кнопка Plus помаранчева і має ярлик «найпопулярніший», тож погляд падає туди, куди хоче банк. Нагорода найвищого тарифу фізична: металева картка з персональним лазерним гравіюванням, яку продають вище на сторінці під чорним блоком «заявіть про себе». bunq робить те саме чотирма градієнтними плитками від Free до €18,99.

Revolut продає пʼять тарифів, від безкоштовного Standard через Plus за £3,99 і Premium за £7,99 до Metal за £14,99 і Ultra за £55 на місяць, і показує вищі тарифи як цінність: бонуси вартістю £1 750, £3 750, понад £9 000 на рік. Підписки принесли йому $936 млн. Robinhood Gold продає одне членство за $5 на місяць і доводить його одним числом: 3,6% на залишок, що, за словами сторінки, у вісім разів більше за середню ставку заощаджень у країні.

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

Концепти дизайну банківських застосунків: куди йдуть екрани

Концепти показують, куди рухається категорія, раніше, ніж це випустить банк. Цей уявляє десять AI-функцій банківського застосунку і подає кожну як предметну зйомку: телефон на пастельному постаменті, велике число в куті, один рядок тексту. Автоматичний облік витрат, оплата в один дотик, сімейний бюджет, калькулятор вартості життя для міста на кшталт Рима, автомобіль, підключений до банку, кредитний рейтинг 670 і позики, які він відкриває, оновлення про інвестиції, що пояснюють, що новини означають для вас. Зсув від застосунку, який звітує, що сталося, до такого, що підказує наступний крок.

Sight це банк, який існує лише як сайт: концепт з бірюзовим градієнтом, двома нахиленими картками, портретами усміхнених клієнтів і лічильником у пʼять з половиною мільйонів клієнтів. Він добре зроблений, і це середнє категорії: той самий градієнт, ті самі нахилені картки, ті самі усмішки. Поставте його поруч із ескімо Lunar, неоновою аркадою Pinch чи сонцем Up в окулярах, і стане видно, чому запамʼятовують саме їх. Концепт добре вчить мови категорії; бренди, що ростуть, кажуть те, чого в цій мові ще немає.

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

Чому інші закрились: улюблені застосунки без двигуна

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

• 01Ставка на заощадження без кредитів. Австралійський необанк заманював клієнтів депозитом під 2,25% і майже не кредитував; він повернув AU$252 млн 37 884 клієнтам і закрився.
• 02Повна ліцензія і мало клієнтів. Інший австралійський банк мав 5 730 вкладників і збиток AU$84,3 млн за рік; запланований раунд зірвався.
• 03Без кредитів свідомо. Британський застосунок із близько 60 000 клієнтів відмовився від кредитів, оплати частинами і крипти і сам визнав, що така модель має менше шансів вижити.
• 04Позаду базових функцій. Цифровий спін-оф великого банку запустився без Apple Pay, Google Pay і входу за відбитком і закрився, маючи трохи більше 11 000 клієнтів.
• 05Материнський банк, що зрізав двигун. Улюблений американський необанк, куплений великим банком, потрапив під правило, що обмежило його комісію з карток, і був закритий; клієнти сумували саме за його функцією бюджету.

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

Вихід на нову країну: сім дизайн-ходів

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

• 01Один продукт, одне число. Одна картка з однією памʼятною обіцянкою, кешбек справжніми грошима, а історія про повний банк на потім.
• 02Людина на першому кроці. Співробітники привозять картку наступного дня і налаштовують застосунок разом із клієнтом.
• 03UI-кіт і голос раніше за повний бренд. Бібліотека компонентів зʼявилась за два місяці; UX-райтерів найняли раніше за бренд-менеджерів.
• 04Локальна команда для слів і картинок. Перевірений в іншій країні сценарій, заново протестований, а тексти, візуал і культуру роблять люди з цієї країни.
• 05Два образи, один бренд. У стрічках виграли світлі фони; яскравий колір лишився для білбордів і вулиці.
• 06Швидка підтримка як перший «вау». Цілодобово телефон і чат, подані як VIP для всіх.
• 07Подія масштабу міста. Банківську ліцензію оголосили безкоштовним концертом на головній площі, а далі спокійніший, дорослий бренд для банківської ери.

Покажіть гроші до реєстрації

За цим принципом ми проєктуємо фінтех-сайти. Усі переможці вище дають незнайомцю побачити гроші раніше, ніж про щось попросять: комісію Wise в калькуляторі, цінність тарифів Revolut у фунтах на рік, чотири ціни Lunar на головній, ставку Robinhood проти середньої по країні. У наших фінтех-роботах ціна чи заощадження зʼявляються раніше за форму, бо число, яке відвідувач може перевірити, це найкоротший шлях до довіри.

BloxFi, глобальний API для конвертації валют і розрахунків, має тарифи, що залежать від обсягу, тож фіксована таблиця цін ввела б в оману половину читачів. Ми дали його ціновій сторінці повзунок обсягу: тягнете від $100k до $10M, і ставка крокує від 0,90% до 0,50%, а потім перетворюється на тариф Enterprise з персональним менеджером, і кнопка записує на консультацію.

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

Та сама ідея живе і в продукті за сайтом. Для FinancePay, платформи фінансування для бізнесу, ми спроєктували кабінет, що відкривається доступним кредитом, сумою профінансованого, активними заявками й профінансованими рахунками, а наступний рахунок ставить за одну кнопку. Повні історії в кейсі BloxFi і кейсі CheckMyRate.

BloxFiГлобальний API для конвертації валют. Бренд, анімація і сайт на Webflow з 80+ сторінками країн і ціновим повзунком.CheckMyRateАвстралійський іпотечний брокер. Перевірка ставки до форми контакту, запуск за два місяці.

Приклади необанків: тринадцять банків поруч

Чеклист дизайну необанку: застосунок і сайт

Якщо ви пишете ТЗ на фінтех-сайт чи застосунок, пройдіть сім моментів клієнта з цим переліком.

• 01Почула від друга. Запрошення, вбудоване в продукт, з фізичною метафорою і бонусом після першої оплати друга.
• 02Відкриває рахунок. Одна обіцянка, одна дія, кроки до картки пораховані й показані на сайті.
• 03Тримає картку. Колір чи матеріал, якого немає ні в кого, спроєктований момент доставки, картка на тариф, якщо продаєте тарифи.
• 04Платить уперше. Миттєве сповіщення із сумою, місцем і тим, що це принесло.
• 05Живе з ним. Гроші з іменами: банки, горщики, скриньки і цілі, до яких можуть долучитися інші.
• 06Пише в підтримку. Підтримка в месенджерах, якими користуються люди, цілодобово, людським голосом.
• 07Платить вам. Кожен екран служить одному названому двигуну грошей; тарифи показано як цінність на рік; ціна до реєстрації.

Ми проєктуємо фінтех-сайти і продукти на Webflow і Next.js: API і платежі, брокери й кредитори, кабінети. Якщо папка референсів уже відкрита, надішліть її разом з продуктом і двигуном, на якому він заробляє, і на дзвінку ми пройдемо, які з цих рішень потрібні вашому сайту першими.