ANNA HAIDUK. ← Усі кейси

Лендинг для криптосервісу

Лендинг для ZeroK, віртуальної доларової картки, яку поповнюють криптою і платять нею по всьому світу. Одна сторінка англійською, а картку видають у Telegram-боті. Це не скриншот: погортай і поклацай просто тут.

Гортай екран ноутбука й натискай на меню та кнопки. Це міні-копія: меню прокручує до блоків, а «Get Card» показує, що далі Telegram. Справжній бот звідси не відкривається.

Клієнт
ZeroK, віртуальна USD-картка
Вид робіт
86заявок у перший місяць роботи
10днів на збірку й розробку
3мови: англійська, українська, російська

ЗадачаЩо мав уміти сайт

Щоб про картку все було ясно за одне гортання

Your Crypto Card, Ready in Minutes. Spend Anywhere.
Переклад заголовка з сайту ZeroK: твоя криптокартка готова за кілька хвилин, плати будь-де.

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

ПроцесСім кроків до запуску

Дизайн не перший

Спершу з’ясовую, що будуємо, бо правки на схемі швидкі й дешеві, а на готовому дизайні вже ні.

  1. 01

    Бриф

    Розпитую про продукт, клієнтів і задачі сторінки. У ZeroK це картка для людей і для бізнесу. Оформлюють її в Telegram, тому сторінка лише пояснює й веде далі.

    Хто що робить

    • Ти: розповідаєш про продукт і клієнтів.
    • Я: розпитую, поки не буде картина.
    • На руках: записані відповіді і задачі сторінки.
    Що за продукт?
    Віртуальна картка в доларах, яку поповнюють криптою
    Для кого?
    Для людей і для бізнесу
    Де видають картку?
    У Telegram-боті, за три кроки
    Що має зробити відвідувач?
    Натиснути кнопку й перейти в бот
  2. 02

    Технічне завдання

    Це список того, що саме роблю: блоки сторінки, тарифи, кнопки. Так далі ніхто не гадає, що мав на увазі.

    Хто що робить

    • Ти: читаєш і підтверджуєш.
    • Я: записую все, що вирішили.
    • На руках: список блоків і кнопок.
    Формат
    одна сторінка, меню веде до її блоків
    Блоки
    переваги, три кроки, дві картки, ціни, сценарії, питання й відповіді
    Тарифи
    Free Card і Premium Card, порівняння в одній таблиці
    Кнопки
    «Get Card» і «Start in Telegram» ведуть у Telegram-бот, де видають картку
    Мова
    англійська
    Платформа
    WordPress
  3. 03

    Структура

    Малюю порядок блоків і шлях відвідувача до кнопки. Видно, що людина дізнається спочатку, а що потім, і де переходить у бот.

    Хто що робить

    • Ти: перевіряєш, чи шлях логічний для твоїх клієнтів.
    • Я: будую карту всіх блоків.
    • На руках: схема структури сторінки.

    Як влаштований лендинг для фінтех-продукту

    Одна сторінка, 7 блоків, 5 пунктів меню. Назви блоків лишились англійськими, як на сайті, під кожною є пояснення.

    01Перший екранзаголовок, дві кнопки, картка з монетами
    02Why ZeroKчим картка відрізняється: переваги, які можна гортати
    03How it worksяк це працює: три кроки і кнопка «Start in Telegram»
    04Free Card і Premium Cardдві картки поруч, у кожної своя кнопка
    05Pricingціни: таблиця на 7 рядків і кнопка «Get Your Card»
    06Use Casesдля чого картка: 6 сценаріїв для людей і бізнесу
    07FAQ8 питань, відповідь відкривається після натискання
    Кінцева точкаTelegram-боттут відвідувач отримує картку. Сюди ведуть кнопки «Get Card» і «Start in Telegram»

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

  4. 04

    Вайрфрейм

    Це чорно-біла схема сторінки, без кольору й картинок.

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

    Хто що робить

    • Ти: погоджуєш логіку й порядок блоків.
    • Я: малюю екран за екраном.
    • На руках: погоджена схема сторінки.

    Чорно-біла схема першого екрана

    логотипменю, 5 пунктівзначки соцмереж кнопка «Get Card» ← заголовок, три рядки короткий текст головна кнопкадруга кнопка КАРТКА монета 1монета 2монета 3 логотипменю ↓ заголовок ↑ короткий текст ← 2 кнопки,одна під одною КАРТКА і монети

    Чесно: цю схему намальовано вже по готовому першому екрану, щоб показати принцип.

  5. 05

    Дизайн

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

    Хто що робить

    • Ти: дивишся стиль, погоджуєш.
    • Я: малюю макети для комп’ютера й телефона.
    • На руках: готові макети двох версій.

    Ідея дизайну

    Crypto

    Три об’ємні монети: золота, зелена і синя. Ними картку поповнюють.

    #E8CD0C#6BC8BD#2689C4

    USDCard

    Картка клієнта: чорна, під кутом, на ній баланс у доларах. Нею платять по всьому світу.

    #0D101F#1C1E2B#115191

    Your Crypto Card, Ready in Minutes. Spend Anywhere.

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

    #011E39#00AAFF#3BC3C3

    Так це виглядає на сторінці

    Блок «How It Works» на сайті ZeroK: три кроки і телефон із застосунком
    Таблиця цін на сайті ZeroK: сім рядків, колонки Free Card і Premium Card
    Таблиця цін ZeroK на телефоні
    Блок із трьома кроками ZeroK на телефоні
    Три кроки
    Картки Free Card і Premium Card на телефоні
    Дві картки
    Таблиця цін ZeroK на телефоні
    Таблиця цін
    Питання й відповіді ZeroK на телефоні
    Питання й відповіді
  6. 06

    Верстка

    Лише тепер збираю сторінку на WordPress в Elementor (конструктор, у якому зручно правити сайт без програміста) за макетом. Кнопки в Telegram, таблиця цін і питання з відповідями вже всередині.

    Хто що робить

    • Ти: отримуєш посилання на робочу версію сторінки й дивишся, як усе виглядає.
    • Я: збираю всі блоки, таблицю цін, питання з відповідями і підключаю кнопки до Telegram-бота.
    • На руках: робоча сторінка, з якої люди переходять у бот.
    Блок із трьома кроками на зібраній сторінці ZeroK
    • 3кроки
    • 2тарифи
    • 8питань
  7. 07

    Тестування і запуск

    Перевіряю на комп’ютері й телефоні, натискаю кожну кнопку. Запуск тільки після цього.

    Хто що робить

    • Ти: дивишся результат і даєш добро на запуск.
    • Я: перевіряю кожен блок і кожну кнопку.
    • На руках: запущена сторінка.
    • На комп’ютері
    • На телефоні
    • Кожен блок і кожна кнопка
    • Перехід у Telegram-бот
    • Запуск

РішенняЩо всередині

Від кнопки одразу в Telegram

Людина натискає «Get Card»

Перший екран ZeroK, у шапці підсвічена кнопка «Get Card» зі значком Telegram

Потрапляє в Telegram

Три кроки до картки

У блоці «How it works» три кроки з номерами і кнопка «Start in Telegram». Одразу видно, що буде після кнопки.

  • Номери в колах
  • Кнопка «Start in Telegram»
  • Телефон із застосунком

Тарифи поруч

Free Card і Premium Card стоять поруч, у кожної своя кнопка. Нижче ціни зібрані в одну таблицю: умови ліворуч, тарифи поруч.

  • Таблиця на 7 рядків
  • Хрестик і галочка
  • Кнопка під таблицею
Сценарії для людей і бізнесу
Шість ситуацій навколо телефона: від щоденних покупок до платежів бізнесу. Кожен упізнає свою.
Питання й відповіді
Вісім питань у згорнутому списку. Відповідь відкривається після натискання, і сторінка не розтягується.

АнімаціїЩо рухається на сайті

Анімації, які ведуть до кнопки

Я зробила на сайті ZeroK дві анімації в Lottie. Вони не прикраса: показують, як картка живе в телефоні. Кожна запускається, коли блок з’являється на екрані, і далі йде по колу.

  • How it works

    Телефон оживає

    Поруч із трьома кроками на екрані з’являються покупки: готель, кава, поповнення картки. Ще до кнопки «Start in Telegram» видно, як виглядатиме рахунок.

  • User cases

    Монети навколо телефона

    З телефона вилітають монети USDT і Bitcoin, від нього розходяться кола. Одразу ясно головне: картку поповнюють криптою. Навколо шість сценаріїв, від покупок до платежів бізнесу.

Гортай убік, щоб побачити другу анімацію.

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

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

Три версіїТелефон, планшет і комп’ютер

Адаптований під усі пристрої

Окрема версія для телефона: усе в одну колонку, кнопки великі, до кожної легко дістати пальцем. На планшеті своя сітка, середня між телефоном і комп’ютером.

  • Дві кнопки першого екрана стоять одна під одною, картка з монетами під ними
  • Переваги гортаються пальцем, по одній картці
  • Таблиця цін із трьома колонками вміщується в екран, убік гортати не треба
  • Планшет: дві кнопки першого екрана стоять поруч, картка з монетами під ними
Перший екран ZeroK на планшеті: шапка з кнопкою меню, заголовок, дві кнопки поруч і картка з монетами під ними
Так сайт виглядає на планшеті

Так сторінка виглядає на телефоні. Гортай екран і натисни «Get Your Card»: побачиш, що далі Telegram. Таблиця цін вміщується цілою.

Аня лежить на нічній траві з кавою

Тобі теж потрібен сайт для бізнесу?

Розкажи про свій проєкт. Почну з розмови, а не з дизайну, як тут.

Заповнити бриф Інші кейси