1Dapp Constructor
Замінтити мем-коїн може будь-хто за десять хвилин. Зробити сайт, який йому потрібен, майже ніхто.
1Dapp Constructor це десктопний білдер для мем-коїн команд: підключаєш гаманець, відповідаєш на п’ять питань, і сайт запуску існує ще до того, як ти вперше побачив канву. Контракт, аудит і маркетинг сидять за тим самим лівим рейлом.
Клієнтська робота, опублікована з дозволу. Компанія не називається. Дизайн було здано і передано команді клієнта, і я не маю видимості в реліз, тому цей кейс звітує про дизайнерський результат, а не про бізнесові показники.
Роль
UX and UI Designer
Платформа
Desktop web · 1920 / 960 / 768
Строки
6 місяців, 2022
Скоуп
54 екрани · 11 секцій · дизайн-система
Редактор із зібраним мем-коїн лендінгом. Три колонки видно одразу: навігатор зліва, сторінка по центру, інспектор справа. Головний шот кейсу.
cases/1dapp/img_1dapp_01.jpg@2x 3360×2100TL;DR · що я зробив
- Спроєктував поверхню продукту від краю до краю: 54 екрани, що покривають онбординг гаманця, wizard із п’яти кроків, обмежений редактор сторінок, налаштування проєкту і публікацію.
- Замінив порожню канву на п’ять рішень, тому повноцінний сайт існує ще до того, як користувач уперше бачить редактор.
- Розділив панель кожної секції на Components (що з’являється) і Style (як воно виглядає). Саме цей поділ і є причиною, чому не-дизайнер не може зламати лейаут.
- Зібрав бібліотеку з 11 мем-коїн секцій, тому каркас говорить адресами контрактів і токеномікою, а не загальним маркетингом.
Огляд
Інструмент запуску для ринку, що міряється годинами.
Мем-коїн живе або вмирає у свій перший день. Токен це проста частина: лаунчпад мінтить його за хвилини. Чого команда не встигає видати так само швидко, так це те, що першим перевіряє кожен холдер, агрегатор і рецензент лістингу: сайт, по якому видно, що вдома хтось є.
Команди вирішують це трьома поганими способами. Купують шаблон і правлять HTML руками. Відкривають Framer чи Webflow і втрачають два дні на вивчення канви. Або не випускають нічого і лишають телеграм-канал за весь бренд.
Тому дизайнерська задача ніколи не була «зроби конструктор сайтів». Вона була в тому, як мало рішень достатньо, щоб вийшов переконливий сайт, і як не дати користувачу рознести його потім.
Дашборд проектів: картки Get Started зверху, таблиця з мем-коїн проектами знизу. Показує, що продукт багатопроектний.
cases/1dapp/img_1dapp_02.jpg@2x 3360×1890Виклик
Чотири речі мали бути правдою одночасно.
Між командою з контрактом і сайтом, якому хтось повірить, стоять чотири бар’єри. На кожен є пряма дизайнерська відповідь, і кожна відповідь чогось коштувала.
Проблема
Порожня канва це місце, де вмирають запуски
Універсальний білдер відкривається порожньою сторінкою і панеллю інструментів. Для команди, у якої години, а не дні, цей перший екран це стіна. Кожна хвилина всередині інструмента це хвилина, не витрачена на запуск.
Рішення
Wizard із п’яти рішень
Заванта́ж лого, обери шаблон, обери палітру, обери пару шрифтів, обери стиль кнопок. Кожен крок рендериться живцем у мокап ноутбука і телефона, тому користувач бачить, як сайт збирається, поки він відповідає. Редактор відкривається на готовій сторінці, а не на порожнечі.
Проблема
Саме свобода і ламає сторінку
Дай не-дизайнеру драг, ресайз і вільне позиціювання, і сайт буде зламаний за двадцять хвилин, зазвичай тільки на мобілці, зазвичай непомітно для нього самого.
Рішення
Секції, а не елементи
Канва приймає цілі секції з бібліотеки. Всередині секції користувач отримує тумблери і слоти, а не координати. Дерево шарів іде рівно на три рівні вглиб і зупиняється. Поставити плаваючий бокс неможливо в принципі.
Проблема
Універсальні білдери не говорять мовою крипти
Адреса контракту з кнопкою копіювання, донат токеноміки з редагованими слайсами, покроковий гайд як купити, чипи партнерів під агрегатори. Жоден мейнстрімний білдер цього не дає, тому кожна команда переробляє це погано і з нуля.
Рішення
Крипто-нативна бібліотека секцій
Одинадцять типів секцій, у кожного власна панель інспектора. Графік токеноміки це справжній компонент із редагованими слайсами, відсотками і кольорами, а не завантажена картинка.
Проблема
Сайт це крок один із п’яти
Опублікувати лендінг не означає запустити монету. Контракт ще треба задеплоїти, аудит ще треба пройти, маркетинг ще треба зробити. Сьогодні кожне з цього це окремий підрядник.
Рішення
Один рейл проєкту
Pages, Smart Contracts, Audit, Marketing і Settings сидять в одному лівому рейлі проєкту. Один гаманець, один проєкт, один рахунок. Pages і редактор спроєктовані повністю, решта три це поки що тільки пункти рейла, і цей кейс каже про це прямо, а не натякає на протилежне.
Порожній стан дашборда, No Projects. Ліва половина пари, це «до»
cases/1dapp/img_1dapp_03.jpg@2x 1600×900Крок вибору шаблону з живим превʼю на ноуті й телефоні. Права половина пари, це «після»
cases/1dapp/img_1dapp_04.jpg@2x 1600×900Дослідження
Кабінетне дослідження, і чого він не міг мені сказати.
Це було кабінетне дослідження. Ні інтерв’ю з користувачами, ні юзабіліті-сесій, ні аналітики. Що в мене було, так це сам ринок: живі лаунчпади, конкуруючі білдери, документація, за якою мем-коїн команди реально ходять, і стіна референсного UI.
Тому все нижче я тримав як модель, з якою можна сперечатись, а не як знахідку. Jobs і journey це реконструкції з публічної поведінки. Сказати це наперед не слабкість, це те, що дає тобі змогу судити міркування, а міркування тут мої.
Шлях користувача
Два моменти вирішують усю сесію.
Я розклав тиждень запуску від краю до краю, від моменту, коли тікер існує, до тижня після публікації, і позначив, де продукт має поглинати тертя, а не пояснювати його.
Крива тривоги має два піки: на підключенні гаманця, де питання «це не дрейнер?», і на публікації, де питання «за що я взагалі плачу». Обидва отримали явний текст із заспокоєнням, а не тултіп.
Journey map на 6 стадій з кривою тривоги, два піки підсвічені червоним
cases/1dapp/img_1dapp_05.jpg@2x 2176×1224Розбір конкурентів
Усіма трьома не володіє ніхто.
Лаунчпади мінтять за хвилини, але лишають тебе без сайту. Пресейл-платформи дають сторінку, яка не є головною. Framer і Webflow дають повний контроль ціною двох днів. Carrd і Tilda швидкі й не говорять мовою крипти. Шаблонні магазини миттєві й статичні.
Швидкість шаблону, редагованість білдера, словник лаунчпада. Ніщо на ринку не стоїть одразу в усіх трьох.
Матриця конкурентів: рядки продуктів, колонки критеріїв, порожня позиція підсвічена
cases/1dapp/img_1dapp_06.jpg@2x 2176×1224Стіна референсів: connect-модалки конкурентів, зібрані до того, як малювалась своя
cases/1dapp/img_1dapp_07.jpg@2x 1600×900Шість ітерацій власної connect-модалки в ряд, від найдовшої до фінальної
cases/1dapp/img_1dapp_08.jpg@2x 1600×900Jobs to be done
Робота це довіра, а не вебсайт.
Коли монета виходить за кілька годин, робота полягає в тому, щоб підняти щось, що читається як легітимне, аби холдери, агрегатори і рецензенти лістингу повірили проєкту достатньо, щоб купити і залістити.
Під нею сидять три допоміжні роботи: швидко виглядати легітимно, лишатись редагованим після запуску, тримати весь запуск в одному місці. Кожна називає обхідний шлях, яким команди користуються сьогодні, і кожен такий обхідний шлях це те, що продукт має перебити.
JTBD-дошка: головний job-стейтмент і три supporting jobs через тригер, обхідний шлях, вимогу
cases/1dapp/img_1dapp_09.jpg@2x 2176×1224Гіпотези · план тестів, який так і не запустився
Під цим дизайном лежать три несучі припущення. Жодне не повернулось підтвердженим, бо моя участь закінчилась на хендофі, і жодних цифр назад не прийшло. Назвати їх, і назвати тест, якого кожне потребувало, це чесний спосіб закрити секцію дослідження без даних.
H1 · візард б’є порожній редактор
Перевіряється інструментуванням завершення візарда і часу від підключення до публікації, проти варіанта, який відкривається одразу в редактор. Спростовується високим відвалом усередині візарда або тим, що варіант із редактором публікується швидше.
H2 · тумблери рятують від невідновних лейаутів
Рахувати секції, вимкнені й увімкнені назад, проти звернень у підтримку щодо лейауту. Спростовується, якщо ніхто ніколи не вмикає секцію назад, бо тоді тумблер це просто повільніше видалення. Це те, що я тестував би першим, бо на ньому тримається весь редактор.
H3 · фіксована ціна конвертить краще за такої терміновості
Ганяти пейволл проти тарифного варіанта, міряти на намірі опублікувати. Спростовується, якщо тарифний варіант конвертить вище або якщо одна фіксована ціна обмежує виручку з команди.
Рішення
Девʼять рішень, і чого коштувало кожне.
Обмежений продукт це стос компромісів, а кейс, який перелічує тільки перемоги, не вартий читання. Кожне рішення нижче щось купило і чогось позбавило.
Найбільше вартує захисту останнє: тільки десктоп, із навмисно спроєктованим мобільним глухим кутом. Замість зламаного адаптивного редактора мобілка отримує чесну стіну з поясненням, лінком на туторіал і шляхом назад. Що мобілка таки лишає собі, так це керування в режимі читання.
Дошка рішень: девʼять рішень колонкою, навпроти кожного ціна, яку воно коштувало.
cases/1dapp/img_1dapp_10.jpg@2x 3360×1890Збірка
П’ять питань, а тоді вебсайт.
Кожен крок має однакову форму: вибір ліворуч, живе превʼю ноутбука і телефона праворуч, Back і Next прибиті донизу. Прогрес-бар називає всі п’ять кроків уже з першого, тому користувач завжди знає, скільки лишилось.
Перший крок також несе платну послугу лого з ціною прямо на місці. Апсел з’являється рівно в ту мить, коли користувач виявляє, що лого в нього нема, а це єдина мить, коли він корисний, а не дратівливий.
Усі 5 кроків візарда в один ряд, прогрес-бар видно на кожному.
cases/1dapp/img_1dapp_11.jpg@2x 3360×1890Крок 1 крупно: зона аплоаду ліворуч, платна послуга лого під нею, живе превʼю праворуч
cases/1dapp/img_1dapp_12.jpg@2x 1600×900Крок 5: пари кнопок із написом Hover me!, слайдер Corner Radius, кнопка Finish
cases/1dapp/img_1dapp_13.jpg@2x 1600×900Редактор
Канва, яку неможливо зламати.
Три колонки, жодних плаваючих панелей. Ліворуч навігатор: сторінки, дерево секцій і медіатека. По центру канва в реальну ширину з постійною кнопкою Add Section, чотирма перемикачами пристроїв і Publish як єдиною акцентною кнопкою в застосунку.
Праворуч інспектор, і в нього завжди ті самі дві вкладки. Components показує, що секція містить, тумблерами і слотами. Style показує паддінги, повну ширину, sticky-поведінку, фон і тінь. Правки контенту ніколи не чіпають лейаут, і в цьому весь сенс.
Анатомія редактора з виносками на три колонки: Navigator, Canvas, Inspector. Плюс Publish і віджет Get Started.
cases/1dapp/img_1dapp_14.jpg@2x 3360×1890Інспектор, вкладка Components: тумблери Logo, Navigation menu, Social, Coin price, Buttons
cases/1dapp/img_1dapp_15.jpg@2x 1600×900Той самий інспектор, вкладка Style: paddings, full width, sticky, background, shadow
cases/1dapp/img_1dapp_16.jpg@2x 1600×900Додавання секції: галерея типів ліворуч, ховер-превʼю в реальному розмірі на канві
cases/1dapp/img_1dapp_17.jpg@2x 1600×900Медіатека: сітка ассетів, квота 2.35 MB of 5 MB, меню Edit alt text / Copy URL / Delete
cases/1dapp/img_1dapp_18.jpg@2x 1600×900Ліміт глибини
Три рівні, і на цьому все.
Секція, блок, елемент. Дерево не може піти глибше, і створити власну структуру неможливо, тому користувач завжди знаходить те, на що дивиться, і ніколи не збудує те, що рендерер не потягне.
Противагою є пікер посилань: замість голого поля URL це сім’я намірів, перейти на сторінку, проскролити до секції, написати на пошту, подзвонити, відкрити модалку, завантажити файл. Структура обмежена, поведінка виразна.
Дерево шарів, розкрите до третього рівня: Hero Section → Buttons → Buy Now → Icon
cases/1dapp/img_1dapp_19.jpg@2x 2176×1224Адаптив
Глухий кут, спроєктований навмисно.
Редактору потрібна ширина, і вдавати протилежне означає видати поганий інструмент. Тому мобілка отримує спроєктовану стіну, а не зламану канву: що сталось, лінк на туторіал і шлях назад до проєкту.
Що мобілка таки лишає, так це шар керування. Проєкти, сторінки і налаштування читаються і редагуються з телефона. Закрите тільки будування.
Мобільний дашборд, список проектів на 360
cases/1dapp/img_1dapp_25.jpg@2x 1080×1440Гейт «works best on bigger screens» з Watch tutorial і Back to project
cases/1dapp/img_1dapp_26.jpg@2x 1080×1440Бібліотека
Одинадцять секцій, які вже говорять мовою крипти.
Хедер, hero, про токен, токеноміка, блок контракту, роадмеп, як купити, партнери, FAQ, join community, футер. Кожна несе словник, який цей ринок перевіряє, і в кожної власна панель інспектора.
Вкладені компоненти провалюються вглиб, а не захаращують панель. Вибір графіка токеноміки виштовхує панель Chart зі значенням, кольором і додаванням слайса, зі шляхом назад до батька.
Усі 11 секцій бібліотеки сіткою, у логічному порядку лендінга.
cases/1dapp/img_1dapp_20.jpg@2x 3360×1890Секція контракту: бейдж мережі, адреса, кнопка Copy, чипи де купити токен
cases/1dapp/img_1dapp_21.jpg@2x 1600×900Токеноміка поруч зі своїм інспектором, розкритим на панелі Chart: слайси, відсотки, кольори
cases/1dapp/img_1dapp_22.jpg@2x 1600×900Публікація
Одна ціна, жодної матриці тарифів.
Публікація це одна модалка: фіксована ціна за сайт, три рядки того, що входить, вибір мережі, оплатити й опублікувати. Жодних місячних тарифів, жодної сітки фіч, жодного тріалу. Для покупця, чий продукт може не існувати за тиждень, підписка це неправильне прохання.
Цифру ставили відносно того, скільки коштує альтернатива, а не відносно інших білдерів. Фрилансерський мем-коїн сайт виходив у кілька сотень доларів і кілька днів, тому ціна однієї публікації нижче цього, з сайтом, який лишається редагованим, робить порівняння легким прямо в голові покупця на пейволі.
Неоплачені проєкти лишаються робочими і несуть банер замість блокування. Домени отримують повний флоу з трьох станів: перевірка доступності, pending approval з точними Name і Target для CNAME, потім approved.
Пейволл публікації: фіксована ціна, три пункти включеного, вибір мережі, Pay and publish
cases/1dapp/img_1dapp_23.jpg@2x 1600×900Домен у стані Pending approval: конкретні Name і Target для DNS плюс лінк на гайд
cases/1dapp/img_1dapp_24.jpg@2x 1600×900Крафт
Що вийшло, у цифрах.
Кожна цифра тут порахована по файлу Figma, а не прикинута. Це єдині цифри в цьому кейсі, і вони несуть ту вагу, яку несли б бізнесові метрики, якби вони в мене були.
Спроєктованих екранів
54
Типів секцій
11
Флоу від краю до краю
6
Панелей інспектора
49
Компонентів
118
Іконки
32
Кольорових стилів
29
Текстових стилів
13
Сам файл
Археологія це частина історії.
Коли я відкрив файл, щоб написати цей кейс, виявилось, що три різні фрейми звуться Hero, і тільки один із них справді hero. П’ять фреймів під назвою Left Bar це був візард на вужчому брейкпоінті. Ціла попередня ітерація, 25 екранів, лежала непідписаною на сторінці дизайн-системи.
Прохід по іменах виправив 191 ноду, згрупував кожен екран у 24 секції за флоу і відправив стару ітерацію в архів. Це зайняло менше години, і саме тому про це варто сказати, а не сховати.
Мапа файлу до і після: хаос ліворуч, 12 підписаних секцій в одну колонку праворуч
cases/1dapp/img_1dapp_27.jpg@2x 2176×1224Дизайн-система
Стилі є, а токен-шару нема.
118 компонентів, 13 компонентних сетів, сет із 32 іконок, 29 кольорових стилів і 13 текстових. Достатньо, щоб тримати 54 екрани консистентними, і воно тримало.
Чого там нема, так це шару змінних: одна колекція, одна змінна. Світлу і темну тему, відступи і радіуси так і не перевели в токени, а стани живуть окремими фреймами замість варіантів. Це чесна прогалина, і це перше, що я б виправив.
Сторінка Design system: типографічна шкала, палітра Dark і Light, сет із 32 іконок, кнопки
cases/1dapp/img_1dapp_28.jpg@2x 2176×1224Висновки
Чого мене навчив цей проєкт.
Обмеження це фіча, а не компроміс
Інстинкт підказує вибачатись за те, чого білдер не вміє. Тут стеля і є продуктом. Користувач, який не може посунути бокс, так само не може випустити зламану сторінку рівно в ту мить, коли його токен виходить у світ. Кожне відібране право на свободу мало купити відібраний ризик.
Онбординг це флоу, а не тултіп
Wizard і є онбордингом. На момент, коли відкривається редактор, користувач уже прийняв п’ять дизайнерських рішень і побачив п’ять живих превʼю, тому інтерфейс читається як його власний. Ніяких підказок-стрілочок, ніякого туру по продукту.
Називай стани, або втратиш роботу
Файл, у якому три фрейми звуться Hero, це файл, у якому ніхто не знайде секцію токеноміки, включно з тим, хто її намалював. Прохід по іменах зайняв менше години і повернув цілу попередню ітерацію, яка фактично була невидимою.
Спроєктуй глухий кут
Мобільний гейт це екран, якого ніхто не просить і в який упираються всі. Спроєктувати його як слід, із поясненням, лінком на туторіал і шляхом назад, вийшло дешевше і чесніше, ніж адаптивний редактор, яким ніхто не користувався б.
Файл і був усім хендофом
Ні специфікації, ні експорту токенів, ні walkthrough, ні доступу після релізу. Тому кожне рішення про іменування всередині того файлу і було документацією. Я передав три фрейми під назвою Hero, стани, намальовані вільними фреймами замість варіантів, і одну змінну на 118 компонентів. А тоді не попросив нічого назад: ні інструментування, ні цифр, ні рев’ю. Нічого з цього не є проблемою таланту, це скоуп, а скоуп це розмова, якої я не провів. Тепер вона йде письмово ще до того, як щось поїде.
Підсумок
Здано, передано, а тоді чесна частина.
Дизайн було здано інженерній команді клієнта і передано. Релізу я не бачив і метрик не маю, тому тут нема нічого про користувачів, опубліковані сайти чи виручку. Сказати це корисніше для тебе, ніж цифра, яку мені довелось би захищати.
Що існує, так це повний і аргументований продукт: шість флоу, спроєктованих від краю до краю, редактор, чиї обмеження навмисні, а не випадкові, бібліотека з одинадцяти секцій, написана словником, яким його ринок реально користується, і дизайн-система під усім цим.
Кожне рішення несе компроміс, якого воно коштувало. Три припущення, на яких стоїть продукт, записані разом із тестами, які їх убили б. Це кейс про міркування, і міркування тут усі на сторінці.
Спроєктованих екранів
54
Типів секцій у бібліотеці
11
Компонентів у системі
118
Флоу від краю до краю
6