Дизайн сайту фінтех-компанії вирішує одне завдання на першому екрані: ще до прокрутки довести, що робить продукт, що він справді працює, хто відповідає за гроші й який крок зробити далі. thelegacy проєктувала фінтех- і крипто-сайти для Banxe, dEquity, Skynet Trading і ARUS. Нижче — як перший екран кожного з них відповідає на ці чотири питання.
Сайт — частина нашої послуги UX/UI і веб-дизайну. Ця стаття про публічний сайт, який має здобути довіру відвідувача. Екрани, які людина бачить після реєстрації, розібрано в статті приклади дизайну фінтех-застосунків.
Що має довести перший екран фінтех-сайту?
Чотири речі, у такому порядку: що це за продукт, що він існує, хто за нього відповідає і який крок зробити. Відвідувач, який збирається віддати гроші чи особисті дані, робить цю перевірку за кілька секунд, і екран, що пропускає хоч один пункт, лишає питання, на яке нікому відповісти.
| Що питає відвідувач | Що має показати екран | Як це зроблено в наших кейсах |
|---|---|---|
| Що це і чи це для мене? | Назву й один рядок про те, що робить продукт, словами, які відвідувач уже знає | Banxe: Multifunctional trading App, а далі режими: Spot, Futures, P2P, DeFi, Fiat Gateway |
| Чи це справді працює? | Живі дані або справжній екран продукту, а не абстрактну ілюстрацію | dEquity: смуга з цінами криптовалют над заголовком; Skynet: прев’ю клієнтського дашборду в першому екрані |
| Хто стоїть за моїми грошима? | Прості слова про те, що це за компанія і що вона робить, команду, юридичні сторінки | Skynet: застереження в підвалі сайту й блок керівництва на сторінці About |
| Що мені робити зараз? | Одну головну дію і тихішу другу для тих, хто хоче спершу почитати | dEquity: помаранчева Create Account поруч із контурною Download White Paper |
Ті самі чотири питання стосуються сайту необанку, криптобіржі чи інвестиційної платформи. Від продукту до продукту змінюється лише те, яке з них найважче. Для незнайомого активу це перше; для фірми, що торкається коштів клієнтів, — третє.
Як одним рядком сказати, що робить фінтех-продукт?
Назвіть категорію, яку відвідувач уже знає, а потім перелічіть конкретику, по яку він прийшов. Дотепний слоган може йти другим; перший рядок має працювати для людини, яка ніколи не чула про компанію.
На головній Banxe назва набрана широким чорним шрифтом, а одразу під нею — Multifunctional trading App. Наступний рядок називає режими один за одним: Spot, Futures, P2P, DeFi, Fiat Gateway. Трейдер, який шукає ф’ючерси чи фіатний шлюз, знаходить потрібне слово, не відкриваючи меню. Праворуч над блідо-лавандовим тлом висять глянцеві шестикутники з літерами продуктових знаків, тож бренд-система з’являється на тому ж екрані, що й пропозиція.
dEquity продає менш звичну річ: частки прибуткових будівель, випущені як токени. Його заголовок не починається з токенів чи NFT. Він каже A New Way to Invest in Real Estate, тобто ставить знайомий актив першим, а новизну вміщує у два слова. Блокчейн пояснюється нижче, коли відвідувач уже вирішив, що тема його стосується.
Як довести, що продукт справжній, ще до реєстрації?
Покладіть на перший екран те, що може показати лише працюючий продукт: живі ціни, реальний список пропозицій або знімок справжнього інтерфейсу. Абстрактна 3D-форма чи стокове фото нічого не доводять про продукт за ними.
dEquity пускає тонку смугу з цінами криптовалют угорі сторінки, над заголовком, а перший розділ під першим екраном — Top offers to invest: будівлі з дохідністю, ціною і маленьким графіком. Banxe робить те саме на крок нижче. Під першим екраном стоять ряд промобанерів і картки монет із поточною ціною, зміною за добу й кнопкою Buy, а за ними — таблиця ринку. Відвідувач бачить ринок раніше, ніж читає будь-які обіцянки про нього.
У B2B-фірми продукт — це часто дашборд, який відвідувач без акаунта не побачить. Сайт Skynet Trading вирішує це так: у першому екрані п’ять пігулок із послугами стоять просто над прев’ю клієнтського дашборду. Емітент токена, який шукає маркет-мейкера, бачить інструмент, з яким працюватиме, ще до опису послуг.
Наше дизайнерське рішення в усіх трьох: якщо в продукту є дані, головна картинка — це дані. Вони конкретніші за будь-що, що може намалювати ілюстратор, і змінюються щодня, а це каже відвідувачеві, що продукт живий.
Де фінтех-сайт показує, хто стоїть за грошима?
Там, куди дивиться уважний відвідувач: у підвалі, на сторінці About і в блоці команди. Формулювання там мають бути досить прості, щоб сказати, що компанія робить і, не менш важливо, чого вона не робить.
Skynet Trading здає в оренду торгове програмне забезпечення й консультує емітентів токенів і біржі. У підвалі її сайту — коротке застереження моноширинним шрифтом сайту: фірма є технологічним провайдером і консультантом, ніколи не бере кошти клієнтів під своє управління і не веде маркет-мейкінг власними коштами. Над ним — блок Schedule a meeting із календарем і посилання Company та Legal. На сторінці About є розділ Meet Our Management з людьми, які стоять за фірмою.
Та сама логіка стосується ліцензій і банків-партнерів. Якщо продукт працює за ліцензією або через банк-партнер, розкриття цього має бути там, де відвідувач ухвалює рішення, а не лише в умовах користування. Докладніше про такі сигнали довіри — у статті фінтех-брендинг.
З якого заклику до дії почати головну фінтех-сайту?
З однієї головної дії в кольорі дій бренду і щонайбільше однієї другорядної, намальованої тихіше. Дві рівноцінні кнопки змушують відвідувача обирати раніше, ніж він готовий.
- dEquity бере помаранчевий лише для дій. Create Account — заповнена помаранчева кнопка; Download White Paper стоїть поруч контуром, для інвестора, який хоче спершу почитати.
- Banxe починає реєстрацію на першому екрані: поле для email чи телефону і градієнтна кнопка Join now поруч. Log in угорі праворуч має той самий градієнт, тож постійні користувачі знаходять його одразу.
- ARUS — це застосунок, тому сайт веде людей у стори. Кнопки App Store і Google Play стоять у шапці поруч із Log in / Sign up і повторюються в розділі About.
Правильна головна дія випливає з бізнесу: біржі потрібен акаунт, інвестиційній платформі спершу може бути потрібен дзвінок або завантаження white paper, а мобільному гаманцю — встановлення.
На що має відповідати решта головної сторінки?
Спершу на ситуації, для яких існує продукт, потім на деталі. Список функцій відповідає на питання, якого відвідувач ще не поставив; знайома ситуація змушує його впізнати свою потребу.
ARUS, криптогаманець і обмінник для невеликих грошових переказів, показує це добре. Перший екран великим шрифтом подає повну назву, Authorized Realtime User Swap, зі словом Realtime кислотно-лаймовим, поруч фото руки біля банкомата й картка 24/7 cash. Бічне меню веде до About, Technology, Gems, Application, Partners і Contacts.
Розділ About обходиться без списку функцій. Натомість він показує читачеві чотири життєві ситуації: гроші, які мають дійти до когось у суботу, гаманець з усіма картками й готівкою, загублений у поїздці, переїзд за кордон, коли місцевого рахунку ще немає, а родині треба допомагати, і бажання мати веб-гаманець на блокчейні зовсім без картки. Відвідувач, який упізнав себе хоча б в одній, знайшов причину встановити застосунок.
Нижче сторінка партнерів приймає заявки у два кроки, спершу юридичний представник, потім компанія, тож бізнес-партнер ніколи не бачить однієї довгої форми.
Як фінтех-сайт працює на телефоні?
Порядок доказів лишається тим самим; макет складається в одну колонку. На мобільному сайті dEquity перший екран, список пропозицій і сторінки об’єктів ідуть у тій самій послідовності, що й на десктопі, тож відвідувач і тут бачить живі дані раніше за пояснення. У Banxe основні сторінки біржі для мобільного вебу переклали заново, а не просто зменшили.
Перший екран перевіряйте на ширині телефона насамперед. Заголовок, що вміщується у два рядки на десктопі, на телефоні може зайняти п’ять і виштовхнути екран продукту й головну кнопку за межі першого екрана.
Чек-лист дизайну фінтех-сайту
- Перший рядок під назвою каже, що робить продукт, словами самого відвідувача.
- Конкретні режими, активи чи послуги названо на першому екрані, а не сховано в меню.
- Живі дані або справжній екран продукту є в першому екрані чи одразу під ним.
- Одна головна дія в кольорі дій; друга, якщо є, помітно тихіша.
- Підвал і сторінка About прямо кажуть, що компанія робить і чого не робить із грошима клієнтів.
- Ліцензії, банки-партнери чи застереження стоять там, де ухвалюють рішення, якщо вони є в продукту.
- Команду показано з іменами в розділі About або в блоці керівництва.
- Перший екран перевірено на ширині телефона, і головна кнопка там видна.
Якщо ви обираєте агенцію для дизайну фінтех-сайту, попросіть показати такі перші екрани і пояснити, як студія вирішувала, що на них покласти. Наш підхід — на сторінці послуги UX/UI і веб-дизайну; про продуктову частину читайте патерни UX-дизайну у фінтеху.
Головне
- Перший екран фінтех-сайту відповідає на чотири питання по черзі: що це за продукт, що він працює, хто стоїть за грошима і що робити далі.
- Найсильніша головна картинка — живі дані: dEquity ставить ціни криптовалют над заголовком, Banxe — картки монет із кнопкою Buy одразу під першим екраном.
- Довіру дають прості слова: підвал Skynet каже, чого фірма не робить із коштами клієнтів, а ARUS замінює список функцій чотирма реальними ситуаціями.
Часті запитання
Які сторінки потрібні фінтех-сайту на старті?
Головна, сторінка для кожного продукту чи послуги, сторінка About з командою, контакти та юридичні сторінки: умови, конфіденційність і розкриття щодо ліцензій чи ризиків, якщо продукт їх потребує. Якщо комісії впливають на рішення, їм теж варто дати окрему сторінку.
Світла чи темна тема краща для фінтех-сайту?
Може працювати будь-яка. Сайт dEquity світлий, а його торговий інтерфейс має темних двійників; сайт Skynet зроблено на темно-синьому тлі. Обирайте за тим, що робить відвідувач: читати й порівнювати пропозиції легше на світлій сторінці, довго стежити за графіками — на темній.
Чи варто проєктувати сайт і застосунок разом?
В ідеалі так, в одній візуальній мові. Застосунок і сайт ARUS ділять білий, графітовий і кислотно-лаймовий, а сайт, застосунок і дек Banxe побудовано на одній системі шестикутників. Людина, яка встановила застосунок після сайту, не має відчувати, що потрапила до іншої компанії.
Чого уникати на першому екрані фінтех-сайту?
Типових стокових фото, тверджень без доказів на кшталт «найбезпечніша платформа», кількох рівноцінних кнопок та ілюстрації там, де мав би бути продукт. Кожне з цього займає місце того, що могло б довести, що продукт справжній.
Чим фінтех-сайт відрізняється від звичайного сайту стартапу?
Відвідувач збирається довірити йому гроші чи документи, тож сайт має пояснити, хто відповідає і що відбувається з коштами, а не лише що робить продукт. Юридичні сторінки й розкриття — частина дизайну, а не щось, що додають наостанок.
