1Dapp Launchpad
A launchpad where the token is the easy part.
A web app for launching and promoting meme coins: list a token, run quests that pay in crypto, boost a listing, trade the NFTs the whole thing mints. I designed it end to end as UX/UI: 123 screens across five breakpoints, eleven flows, and a component library the team assembled the interface from.
Role
UX/UI Designer
Platform
Web app, desktop-first, adaptive to 360
Timeline
2023 to 2024
Scope
123 screens · 11 flows · 5 breakpoints
Список токенів на 1920, повний екран з фільтрами. App · Launchpad · List · 2xl, 674:8715.
cases/launchpad/img_launchpad_01.jpg@2x 3360×2100screens on the App page across eleven product flows
123
component instances: the library was adopted, not just delivered
5,949
breakpoints, every flow drawn at all of them
5
TL;DR · what I did
- Designed the full product as UX/UI: eleven flows from the token list to the NFT bank, 123 screens, handed to development ready to build.
- Carried every flow across five breakpoints, 1920 down to 360, so responsive behaviour was a design decision and not a developer guess.
- Built the quest system as one object with three types and two audiences, so the screen that pays a participant and the screen that manages a campaign share one skeleton.
Client work, published with permission. I worked through the development team, so the company is not named here. Every number in the mockups, prices, limits, rewards and balances, is placeholder content rather than product economics.
Overview
The token deploys in minutes. Everything else decides the outcome.
Meme coins live and die in their first week. The token itself takes minutes to deploy. What decides the outcome is everything around it: who hears about it, who holds it, who keeps trading it on day three.
The launchpad puts that whole apparatus in one place. A creator lists a token, sets a launch date, and buys attention through quests and boosts. A participant browses launches, completes quests for crypto and points, and accumulates NFTs that can be sold back into a shared bank.
Two audiences, one interface. That constraint shaped most of what follows.
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×900Challenge
Three problems, and the answers that shipped.
Each one could have doubled the product. Each was solved with one skeleton instead of two.
Problem
One screen, two opposite jobs
A participant wants to scan: what is live, what is about to launch, what is worth my time today. A creator wants to operate: how is my campaign performing, who is winning, what do I change. Two separate products would double the surface and split the component library.
Solution
One skeleton, a role-aware layer
Task Details exists in a participant view and an admin view on the same frame: same header, same reward block, same metadata. What changes is the action zone at the bottom. The participant sees a countdown and a Join button, the creator sees campaign management. The quest list follows the same rule: the tabs change with the role, the row does not.
Problem
A list that has to carry a dozen numbers
A token row has to show market cap, APR, staking earned, time to launch, chain, boost status and a progress bar, and stay scannable in a list of forty. Crypto dashboards usually solve this by showing everything and trusting the user to cope.
Solution
A card with a state, not a table with columns
The token card is a set of six states: Upcoming, Live, Archived, each with a Boosted variant. The state decides which numbers even appear. An Upcoming token shows a countdown and no APR, because there is nothing to earn yet. A boosted one gets an accent band rather than an extra badge, so promotion is visible without adding a column.
Problem
Quests are a marketplace, not a feature
Three quest types with genuinely different mechanics: Social (do a thing on Telegram, X, Discord), Holder (buy and keep), Volume (trade). Each needs a different creation form, a different verification story and a different way to say "you won". Treated as three features, that is three of everything.
Solution
One object, typed
One creation flow with a type picker at the front and a form that adapts to the type. One detail screen whose reward block swaps by type. One set of result states shared by all three: counting down, joined, ended and lost, ended and won. That is exactly how it was handed to development.
Research
Desk research, and what you can take from it.
The research here is desk only: no interviews, no usability tests, no analytics. I had no access to users and the budget did not include it. So everything below is a documented hypothesis, reconstructed from competitor products, the client brief and the mechanics of the space.
I say that out loud so you can judge the reasoning itself, and the reasoning here is mine. Two roles, creator and participant, reconstructed from the product flows, and every decision in this case traces back to a specific job of one of them.
Library
A library the interface was assembled from, 5,949 instances deep.
71 components and 8 variant sets: the token card, the quest row, the header, the buttons, the chain and social chips. All real sets with real variants, not frames named like components.
The number that matters here is 5,949 instances. It means the library was not just delivered but used throughout: screens were assembled from it rather than drawn next to it. On a 123-screen product that is the difference between a library and a folder of mockups.
Type and spacing in this file are still applied on nodes: Figma variables and modes did not exist at the time, they arrived later. What the same kind of product looks like once a token layer is possible is in the neighbouring CB Tools case.
Сети компонентів однією композицією: 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×900Flows
Eleven flows, six worth talking about.
The token list is the home of the product, so it carries filters that stack rather than nest: sort, chain, status and a boost-only toggle. Plus search, its own empty state, and the points explainer that teaches the economy inside the list instead of on a separate page.
Пошук із результатами. 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×900Token page
Four sections, two different information shapes.
Info, staking, trade, chart and transactions. On desktop they are sections down a single column, because a trader reading a chart does not want to lose the buy box. On mobile the same four become real tabs, because four stacked sections is a scroll nobody finishes.
Same content, two different information shapes. It is the clearest example in the product of responsive as a decision about structure rather than a reflow of columns.
Сторінка токена, секція 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
Paid promotion next to a chance mechanic.
Boosting a listing is sold two ways on one screen: fixed energy tiers with a visible duration, and a chance-based option. The second is the more interesting problem, because a luck mechanic sitting next to an honestly priced one must not read as a trick.
So it is a separate step with its own explanation, not a cheaper-looking tier in the same row.
Тарифи енергії з видимою тривалістю. 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×1224Launching a token
The order of the steps is the argument.
Four steps: Initial, Website, Tasks, Finalize. Step two offers a free subdomain and hands off to the ecosystem site builder, the product covered in the 1Dapp Constructor case. Step three is quests. Step four is when and how loudly.
The launch date sits last on purpose: by the time a creator reaches it, they have already committed to a promotion plan. The wizard is not collecting fields, it is walking someone to a decision.
Крок 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×900Responsive
Five breakpoints as part of the design.
The file realises `2xl [1536]`, `xl [1280]`, `lg [1024]`, `md [768]` and 360 as the base. Frames are drawn at a representative width inside each range, 1920 for 2xl down to 1024 for md, with 1536 carrying the twelve column grid.
What that meant in practice: the launchpad list goes from a four-across card grid to a single column and moves the sidebar filters into a sheet. The token page turns four stacked sections into four tabs. Modals become full-height sheets below md, so the type picker and the DEX chooser are drawn twice.
None of it was left to engineering to decide. Where a grid had to re-form instead of shrink, the mockup says so.
Один екран на пʼятьох брейкпоінтах в один ряд, зібрати з 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×1890Method
What I carried forward from this.
Responsive is an information problem, not a layout problem
The token page works at 360 because the content was re-shaped into tabs, not because the columns collapsed. The rule I kept: if a screen got taller at a narrower width but no simpler, the work is not finished. Restructuring costs more than reflowing and is almost always the right call.
Two audiences are better held on one skeleton
A participant and a creator look at the same entities with opposite intent. Instead of two products I kept one frame and made only the action zone variable. The library stayed single, the surface did not double, and a role stopped being a reason to draw a new screen.
A typed object beats three similar features
Three quest types with different mechanics could have become three sets of screens. They became one object with a type: one adaptive creation form, one detail screen, one shared set of result states. That is the question I now ask at the start: is this three features, or one object with three values.
Step order is a product decision
In the launch wizard the date sits after quests and boosts. A creator arrives at "when" already holding a promotion plan, so the product sells it through sequence rather than a banner. The order of screens moves a decision as much as their contents do.
Outcome
Handed to development complete.
The file went to the engineering team closed: no "to be defined" placeholders, every quest type drawn in all four result states. I did not see the release, so there are no business metrics here and none will be invented.
While refactoring the file in 2026 I also proofread it and handed the client a list of copy defects that would otherwise have shipped: seven of them, from `epmty` in a creation form to a referral link missing the dot in its domain.
screens, eleven flows, zero unresolved placeholders
123
components and eight variant sets in the library
71
instances: the library was used throughout
5,949
result states drawn for each of the three quest types
4