Приклади фінтех-сайтів: 11 сайтів і що кожен робить добре

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

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

Головне

• 01Калькулятор продає краще за таблицю цін. Ціна BloxFi залежить від валютної пари й обсягу, тож сайт рахує її, а не перелічує.
• 02Одне число тримає перший екран. Xapo Bank: 4,6% на доларові заощадження з виплатою щодня в BTC. Credit Genie: до $150 за кілька хвилин.
• 03Про безпеку відповідають поруч із кнопкою. Tuyo, Credit Genie і Mojek пояснюють зберігання коштів, шифрування і підключення банку простими словами просто на головній.
• 04B2B-платежі відчиняють окремі двері для кожної аудиторії. Run Payments розділяє партнерів, мерчантів і розробників; Europace розділяє кредитні установи, брокерів і нових гравців.
• 05Справжні люди сильніші за стокові фото. Possible Finance ставить на перший екран клієнта з іменем і професією, а CheckMyRate дає на головній слово засновнику.

Фінтех-сайти від Figmatica

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

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

Сайт фінтех-API: BloxFi, робота Figmatica

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

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

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

І рух. Знак починається одним суцільним блоком і розпадається на зʼєднані частини, так само як BloxFi збирає розрізнені платіжні канали в один API. Блок «Як це працює» проводить через інтеграцію крок за кроком, одна анімація на кожен етап шляху грошей, тож клієнт розуміє продукт ще до дзвінка з відділом продажів. Уся історія, з брендом і мобільними екранами, у кейсі BloxFi.

Сайт іпотечного брокера: CheckMyRate, робота Figmatica

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

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

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

Перевірка ставки стоїть поруч із тим, чого вона варта: заощадження за 30 років кредиту. Решту несуть сім розділів і два шаблони: головна, керівництво, освітній блог, партнерство, анкета, семінари і контакти. Проєкт зайняв два місяці і пʼять етапів, від дослідження до тестування і підтримки після запуску; уся дошка в кейсі CheckMyRate.

Фінтех-кабінет: FinancePay, робота Figmatica

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

Сайт преміальної картки: Moto

Moto відкривається в темряві: чорна металева картка на камʼяному постаменті, підсвічена як прикраса, і три слова над нею, Built for modern wealth. На сторінці одна дія, і вона повторюється до самого низу: Apply for Access. Не зареєструватися, не відкрити рахунок. Доступ, як кажуть у приватному клубі.

Далі картка стає способом життя: випадають сповіщення, готель заброньовано, джет заброньовано. Потім Spend globally, 0 FX fees built in, і суми сиплються екраном в єнах, франках, фунтах, вонах, євро і лірах.

Що взяти: слово для стосунків. Access, membership, members: лексика задає рівень ціни ще до появи будь-якого числа.

Сайт картки й застосунку: Tuyo

Imagine buying a bagel and not paying. Слово посередині змінюється на очах, кава, паелья, смузі, кожне зі своїм емодзі, а рядок нижче пояснює фокус: картка, яка може не списати гроші. Під заголовком одна кнопка, Download the app, і лічильник, 50,000+ людей уже з Tuyo.

Механіка має назву, Buy Now, Pay Maybe, а навколо неї чотири короткі картки: оплата в 175M+ місцях через Apple Pay і Google Pay, безкоштовні перекази у кількох валютах, дохідність на USDC, EURC і BTC, 15 000+ токенів у пʼяти мережах. FAQ починається з питання, яке має кожен читач: наскільки захищені мої гроші. Відповідь каже: самостійне зберігання, регульовані партнери, ліцензовані емітенти карток і курсова різниця зазвичай менше 1%.

Що взяти: одна грайлива механіка в заголовку і питання безпеки першим у FAQ.

Сайт цифрового банку: Xapo Bank

Перш ніж сторінка відкриється, юридичне повідомлення: регульований банк у Гібралтарі з паспортом послуг у Великій Британії і кнопка, щоб увійти. Далі перший екран: у верхньому куті живий курс BTC/USD з цінами продажу й купівлі, що рухаються, у центрі один рядок, Bitcoin-first since 2013, і число, яке продає, 4,6% на доларові заощадження з виплатою щодня в BTC.

Нижче банк дає свою адресу, One Grand Casemates Square у Гібралтарі, і пише, що члени клубу завжди можуть зайти у двері й познайомитися з людьми, які стоять за їхнім банком.

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

Сайт кредитного сервісу: Possible Finance

Яскраво-синій, зелена кнопка і заголовок, який не надрукував би жоден банк: You don't have time for bullsh!t. Possible has cash fast. Поруч фото клієнта з іменем і професією, актор озвучення, медпрацівник, торговий представник, змінюються як слайд-шоу. Під ними понад 100 000 пʼятизіркових відгуків у застосунку і ряд із чотирьох обіцянок: гроші за секунди, гнучкі платежі, без штрафів за прострочку, кредитна історія.

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

Що взяти: причини словами читача. Ніхто не позичає $500 заради ліквідності; позичають, щоб полагодити авто.

Сайт застосунку кешових авансів: Credit Genie

Фіолетовий, намальовані квіти, телефон із $150 на екрані. Boost your cash, і останнє слово змінюється: money, account. Далі пропозиція в чотирьох коротких реченнях: до $150 за кілька хвилин. Без відсотків. Без перевірки кредитної історії. Без драми. Одразу під нею рейтинги, 4,8 в App Store зі 109 тисячами відгуків і 4,7 у Google Play з 71,2 тисячі.

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

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

Сайт платіжної платформи: Run Payments

Payments OS, built for ISVs and ISOs, а поруч із заголовком сам продукт: дашборд із пошуком, графіком обсягів і трьома плитками, 1 203 активні мерчанти, $122 232 з початку місяця, $164 201 за минулий місяць. Читач бачить екран, у якому працюватиме, раніше, ніж прочитає про нього хоч слово.

Верхня смуга ділить аудиторію раніше за все: For Partners, For Merchants. Меню додає треті двері для розробників з API. Кнопка каже Start Running.

Що взяти: дашборд як головне зображення. Для B2B-інструмента інтерфейс це найчесніша картинка.

Сайт платіжного шлюзу: MatrixPay

Smarter Payments Start Here, а поруч повільно обертається біла 3D-ланка ланцюга. Перший абзац точно називає покупця: white-label платіжний шлюз для фінтех-компаній, PSP, ISO і амбітних мерчантів. Переваги читаються як чеклист закупівлі: кілька еквайєрів, розумна маршрутизація, каскадування і токенізація, локальні методи на кшталт Pix, Blik, SEPA і Open Banking, готовність до PCI DSS, GDPR і DORA, хмара або власний сервер.

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

Сайт іпотечної платформи: Europace

Німецький іпотечний маркетплейс говорить до трьох аудиторій і називає їх у меню: für Kreditinstitute, für Vertriebe, für Disruptoren, кредитні установи, брокери і нові гравці. Заголовок, Mehr Finanzierungen für alle, «Більше фінансування для всіх», стоїть поруч із людиною з телефоном і маленькою карткою Europace One: усі інструменти в одній підписці, до трьох акаунтів.

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

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

Сайт застосунку особистих фінансів: Mojek

Save Thousands Every Single Month, зеленим, над телефоном з екраном бюджету. Другий абзац відповідає на страх ще до того, як він зʼявився: Mojek підключається до рахунків через державну регульовану систему агрегаторів, а підключення банку потребує одноразового пароля.

Блок, який продає, це поле пошуку серед назв магазинів і кавʼярень: Search Anything. Summarise Everything. Введіть Starbucks і побачите кожен раз, коли там витрачали, цього місяця, минулого, за весь час.

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

Одинадцять фінтех-сайтів поруч

Що має бути на фінтех-сайті: спільне в найсильніших

Поставте одинадцять поруч, і вигляд не має нічого спільного: чорний камінь Moto, квіти Credit Genie, біла ланка MatrixPay. Деталі під виглядом повторюються. Якщо ви пишете ТЗ на фінтех-сайт, візьміть цей перелік разом із референсами.

• 01Одне число на першому екрані. Ставка, ліміт, обсяг, кількість клієнтів. 4,6% у Xapo, $150 у Credit Genie, 7 мільярдів євро на місяць у Europace.
• 02Калькулятор там, де ціна залежить від випадку. BloxFi рахує число для валютної пари й обсягу; CheckMyRate ставить заощадження поруч із перевіркою ставки.
• 03Безпека простими словами, поруч із кнопкою. Хто тримає гроші, хто регулює, як підключено банк, що ніколи не зберігається і не продається.
• 04Продукт до реєстрації. Дашборд, екран телефона, картка, анімація руху грошей. Читач бачить, що купує.
• 05Окремі двері для кожної аудиторії. Партнери, мерчанти і розробники; кредитні установи, брокери і нові гравці. Кожен знаходить свою сторінку одним кліком.
• 06Справжні люди і справжні лічильники. Клієнт з іменем і професією, слова засновника, відгуки, пораховані тисячами.

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