1Dapp Launchpad
Лаунчпад, де токен це найпростіша частина.
Веб-застосунок для запуску і просування мем-коїнів: виставити токен, крутити квести з виплатою в крипті, бустити лістинг, торгувати NFT, які все це намінтило. Я задизайнив продукт end-to-end як UX/UI: 123 екрани на пʼятьох брейкпоінтах, одинадцять флоу і компонентна бібліотека, з якої команда збирала інтерфейс.
Роль
UX/UI Designer
Платформа
Веб-застосунок, десктоп-first, адаптив до 360
Строки
2023 до 2024
Скоуп
123 екрани · 11 флоу · 5 брейкпоінтів
Список токенів на 1920, повний екран з фільтрами. App · Launchpad · List · 2xl, 674:8715.
cases/launchpad/img_launchpad_01.jpg@2x 3360×2100екрани на сторінці App, одинадцять продуктових флоу
123
інстансів компонентів: бібліотеку прийняли і нею користувались
5 949
брейкпоінтів, кожен флоу намальований на всіх
5
TL;DR · що я зробив
- Задизайнив продукт повністю як UX/UI: одинадцять флоу від списку токенів до NFT-банку, 123 екрани, здані в розробку готовими до збірки.
- Провів кожен флоу через пʼять брейкпоінтів, від 1920 до 360, тому адаптивна поведінка була рішенням дизайну, а не здогадом розробника.
- Зібрав систему квестів як один обʼєкт із трьома типами і двома аудиторіями, тому екран, який платить учаснику, і екран, який керує кампанією, стоять на одному каркасі.
Клієнтська робота, опублікована з дозволу. Я працював через команду розробки, тому компанію тут не називаю. Числа на макетах, ціни, ліміти, нагороди і баланси, це плейсхолдери, а не економіка продукту.
Огляд
Токен деплоїться за хвилини. Все інше вирішує результат.
Мем-коїни живуть і вмирають у перший тиждень. Сам токен розгортається за кілька хвилин. Результат вирішує те, що навколо: хто про нього почув, хто тримає, хто продовжує торгувати на третій день.
Лаунчпад збирає весь цей апарат в одному місці. Творець виставляє токен, ставить дату запуску і купує увагу через квести та бусти. Учасник переглядає запуски, виконує квести за крипту і бали, накопичує NFT, які можна продати назад у спільний банк.
Дві аудиторії, один інтерфейс. Саме це обмеження і сформувало більшість рішень нижче.
NFT-розділ, огляд на 1920. App · NFTs · Overview · 2xl, 972:55797.
cases/launchpad/img_launchpad_02.jpg@2x 3360×1890Деталі квесту, вигляд учасника. App · Task Details · Social · 2xl, 1754:47931.
cases/launchpad/img_launchpad_03.jpg@2x 1600×900Список квестів. App · Tasks · List · 2xl, 1753:33391.
cases/launchpad/img_launchpad_04.jpg@2x 1600×900Задача
Три проблеми і рішення, які поїхали в розробку.
Кожна з них могла подвоїти продукт. Кожна вирішена одним каркасом замість двох.
Проблема
Один екран, дві протилежні задачі
Учасник хоче сканувати: що зараз живе, що ось-ось стартує, на що варто витратити годину. Творець хоче керувати: як іде кампанія, хто виграє, що змінити. Два окремі продукти подвоїли б поверхню і розкололи б бібліотеку компонентів.
Рішення
Один каркас, шар, що знає роль
Деталі квесту існують у вигляді учасника і адміна на одному фреймі: та сама шапка, той самий блок нагороди, та сама метадата. Змінюється зона дії внизу. Учасник бачить таймер і Join, творець бачить керування кампанією. Список квестів працює за тим самим правилом: таби змінюються з роллю, рядок ні.
Проблема
Список, який має нести дюжину чисел
Рядок токена показує капіталізацію, APR, зароблене зі стейкінгу, час до запуску, мережу, статус бусту і прогрес-бар, і має лишатись скануванним у списку з сорока позицій. Крипто-дашборди зазвичай показують усе одразу і залишають користувача розбиратись.
Рішення
Картка зі станом, а не таблиця з колонками
Токен-картка це сет із шести станів: Upcoming, Live, Archived, кожен із варіантом Boosted. Стан вирішує, які числа взагалі зʼявляються. Upcoming показує таймер і не показує APR, бо заробляти ще нема на чому. Бустований отримує акцентну смугу замість ще одного бейджа, тому просування видно без додаткової колонки.
Проблема
Квести це маркетплейс, а не фіча
Три типи квестів із реально різною механікою: Social (зробити дію в Telegram, X, Discord), Holder (купити і тримати), Volume (наторгувати). Кожен потребує іншої форми створення, іншої історії перевірки і іншого способу сказати «ти виграв». Як три фічі це три комплекти всього.
Рішення
Один обʼєкт, типізований
Один флоу створення з вибором типу на початку і формою, яка під тип підлаштовується. Один екран деталей, у якому блок нагороди міняється за типом. Один набір станів результату: відлік, приєднався, закінчилось і програв, закінчилось і виграв. Усі три типи ділять цей набір, і саме так він поїхав у розробку.
Research
Desk research, і що з нього можна брати.
Дослідження тут кабінетне: без інтервʼю, юзер-тестів і аналітики. Доступу до користувачів не було, і бюджет його не передбачав. Тому все, що нижче, це задокументована гіпотеза, зібрана з конкурентних продуктів, брифу клієнта і механіки самого ринку.
Кажу це вголос, бо так ти можеш судити саме міркування, а міркування тут мої. Дві ролі, творець і учасник, реконструйовані з флоу продукту, і кожне рішення в кейсі можна протягнути назад до конкретної задачі однієї з них.
Бібліотека
Бібліотека, з якої зібрано 5 949 інстансів.
71 компонент і 8 варіант-сетів: токен-картка, рядок квесту, шапка, кнопки, чипи мереж і соцмереж. Усе це реальні сети з реальними варіантами, а не фрейми, названі компонентами.
Цифра, яка тут головна, це 5 949 інстансів. Вона означає, що бібліотеку не просто зробили, а нею користувались наскрізь: екрани збиралися з неї, а не малювались поруч із нею. Для продукту на 123 екрани це різниця між бібліотекою і папкою з макетами.
Типографіка і відступи в цьому файлі ще виставлені на нодах: змінних і модів у Figma на той момент не існувало, вони вийшли пізніше. Як виглядає той самий продукт, коли токен-шар зʼявляється, показано в сусідньому кейсі CB Tools.
Сети компонентів однією композицією: Header 714:2288, Button 828:10814, Task 827:21704, Chain 823:1178, Social 823:1213. Сторінка Design system.
cases/launchpad/img_launchpad_05.jpg@2x 1600×900Токен-картка, шість станів поруч: Upcoming 1451:32580 і Boosted 1452:33592, Live 1451:30872 і Boosted 1452:33657, Archived 1451:32577 і Boosted 1452:33772.
cases/launchpad/img_launchpad_06.jpg@2x 1600×900Флоу
Одинадцять флоу, шість із них варті окремої розмови.
Список токенів це домівка продукту, тому він несе фільтри, що складаються, а не вкладаються: сортування, мережа, статус і тумблер «тільки бустовані». Плюс пошук, власний порожній стан і пояснення економіки балів прямо в списку, без окремої сторінки.
Пошук із результатами. App · Launchpad · Search · 2xl, 1431:23823.
cases/launchpad/img_launchpad_07.jpg@2x 1600×900Порожній стан пошуку. App · Launchpad · Search · Nothing found · 2xl, 1602:40877.
cases/launchpad/img_launchpad_08.jpg@2x 1600×900Сторінка токена
Чотири розділи, дві різні інформаційні форми.
Info, стейкінг, торгівля, графік із транзакціями. На десктопі це секції в одну колонку, бо трейдер, який читає графік, не хоче загубити блок купівлі. На мобільному ті самі чотири стають справжніми табами, бо чотири секції поспіль це скрол, який ніхто не долистає.
Той самий контент, дві різні інформаційні форми. Це найчистіший приклад у продукті, де адаптив це рішення про структуру, а не перетікання колонок.
Сторінка токена, секція Info. App · Token · Info · 2xl, 823:10368.
cases/launchpad/img_launchpad_09.jpg@2x 2176×1224Секція Staking. App · Token · Staking · md, 828:19586.
cases/launchpad/img_launchpad_10.jpg@2x 2176×1224Графік і транзакції. App · Token · Chart and txns · md, 827:28650.
cases/launchpad/img_launchpad_11.jpg@2x 2176×1224Power Up
Платне просування поруч із механікою удачі.
Буст лістингу продається двома способами на одному екрані: фіксовані тарифи енергії з видимою тривалістю і варіант, зав’язаний на випадковість. Другий цікавіший як задача, бо механіка удачі поруч із чесно оціненою не має читатись як підступ.
Тому це окремий крок із власним поясненням, а не дешевший на вигляд тариф у тому самому ряду.
Тарифи енергії з видимою тривалістю. App · Power Up · Buy energy · 2xl, 966:32388.
cases/launchpad/img_launchpad_12.jpg@2x 2176×1224Try your luck, окремий крок, а не дешевший тариф. App · Power Up · Try your luck · 2xl, 966:31355.
cases/launchpad/img_launchpad_13.jpg@2x 2176×1224Запуск токена
Порядок кроків і є аргументом.
Чотири кроки: Initial, Website, Tasks, Finalize. Другий пропонує безкоштовний субдомен і передає користувача в сайт-білдер тієї ж екосистеми, продукт із кейсу 1Dapp Constructor. Третій це квести. Четвертий це коли і наскільки голосно.
Дата запуску стоїть останньою свідомо: поки творець до неї дійде, він уже вибрав план просування. Візард не збирає дані, він веде до рішення.
Крок 1 Initial. App · Token Launch · 1 Initial · 2xl, 1731:29865.
cases/launchpad/img_launchpad_14.jpg@2x 1600×900Крок 2 Website із субдоменом і передачею в сайт-білдер. App · Token Launch · 2 Website · 2xl, 1731:30019.
cases/launchpad/img_launchpad_15.jpg@2x 1600×900Крок 3 Tasks. App · Token Launch · 3 Tasks · 2xl, 1731:30358.
cases/launchpad/img_launchpad_16.jpg@2x 1600×900Крок 4 Finalize: дата запуску і буст. App · Token Launch · 4 Finalize · 2xl, 1731:30561.
cases/launchpad/img_launchpad_17.jpg@2x 1600×900Створення квесту, тип Social. App · Task Creation · Social · 2xl, 1302:22778.
cases/launchpad/img_launchpad_18.jpg@2x 1080×608Той самий флоу, тип Holder. App · Task Creation · Holder · Filled · 2xl, 1469:30974.
cases/launchpad/img_launchpad_19.jpg@2x 1080×608Той самий флоу, тип Volume. App · Task Creation · Volume · 2xl, 1302:24510.
cases/launchpad/img_launchpad_20.jpg@2x 1080×608Деталі квесту, зона дії учасника. App · Task Details · Volume · Participating · 2xl, 1756:36512.
cases/launchpad/img_launchpad_21.jpg@2x 1600×900Той самий квест, вигляд адміна. App · Task Details · Admin · Volume · 2xl, 1913:34801.
cases/launchpad/img_launchpad_22.jpg@2x 1600×900NFT-пак у момент розкриття. App · NFTs · Opening · Reveal · 2xl, 1042:20958.
cases/launchpad/img_launchpad_23.jpg@2x 3360×1890Колекція з сортуванням. App · NFTs · My NFTs · Sort by price · 2xl, 972:56429.
cases/launchpad/img_launchpad_24.jpg@2x 1600×900NFT Bank із курсами викупу. App · NFTs · Bank · Sell portals · 2xl, 972:56807.
cases/launchpad/img_launchpad_25.jpg@2x 1600×900Адаптив
Пʼять брейкпоінтів як частина дизайну.
У файлі реалізовані `2xl [1536]`, `xl [1280]`, `lg [1024]`, `md [768]` і 360 як база. Фрейми намальовані на репрезентативній ширині всередині кожного діапазону, від 1920 для 2xl до 1024 для md, а 1536 несе дванадцятиколонкову сітку.
Що це означало на практиці: список лаунчпаду йде від сітки по чотири картки до однієї колонки і ховає бічні фільтри в шит. Сторінка токена перетворює чотири секції на чотири таби. Модалки нижче md стають повновисотними шитами, тому вибір типу квесту і вибір DEX намальовані двічі.
Жодне з цього не лишилось на розсуд розробки. Там, де сітка мала перебудуватись, а не стиснутись, це видно з макета.
Один екран на пʼятьох брейкпоінтах в один ряд, зібрати з App · Launchpad · List: 2xl 674:8715, xl 823:6790, lg 666:3201, md 666:4697, base 295:258.
cases/launchpad/img_launchpad_26.jpg@2x 3360×1890Три екрани 360 у мокапі айфона: список 295:258, сторінка токена 365:70, деталі квесту 1911:33219.
cases/launchpad/img_launchpad_27.jpg@2x 3360×1890Метод
Що я звідси виніс у роботу.
Адаптив це задача про інформацію, а не про лейаут
Сторінка токена працює на 360 не тому, що колонки схлопнулись, а тому, що контент перезібрано в таби. Правило, яке я з того лишив собі: якщо екран на вужчій ширині став вищим, але не простішим, робота ще не зроблена. Перебудова структури дорожча за перетікання сітки і майже завжди правильніша.
Дві аудиторії краще тримати на одному каркасі
Учасник і творець дивляться на ті самі сутності з протилежними намірами. Замість двох продуктів я лишив один фрейм і зробив змінною тільки зону дії. Бібліотека лишилась однією, поверхня не подвоїлась, а роль перестала бути причиною малювати новий екран.
Типізований обʼєкт замість трьох схожих фіч
Три типи квестів з різною механікою могли стати трьома комплектами екранів. Вони стали одним обʼєктом із типом: одна форма створення, що підлаштовується, один екран деталей, один спільний набір станів результату. Це те питання, яке я тепер ставлю на старті: це три фічі чи один обʼєкт із трьома значеннями.
Порядок кроків це продуктове рішення
У візарді запуску дата стоїть після квестів і бустів. Так творець приходить до питання «коли» вже з готовим планом просування, і продукт продає його не банером, а послідовністю. Порядок екранів впливає на рішення користувача так само, як їхній вміст.
Результат
Здано в розробку повним комплектом.
Файл передали інженерній команді закритим: без плейсхолдерів у стилі «уточнимо пізніше», з кожним типом квесту, намальованим у всіх чотирьох станах результату. Релізу я не бачив, тому бізнесових метрик тут немає і вигаданих не буде.
Під час рефакторингу файлу у 2026 я додатково вичитав його і повернув клієнту список копірайт-дефектів, які інакше поїхали б у продакшн: сім штук, від `epmty` у формі створення до реферального лінка без крапки в домені.
екрани, одинадцять флоу, нуль незакритих плейсхолдерів
123
компонент і вісім варіант-сетів у бібліотеці
71
інстансів: бібліотекою користувались наскрізь
5 949
стани результату намальовані для кожного з трьох типів квестів
4