Product
Timeline
My Role
Skills
Results
TokenTable is a token distribution platform that helps crypto founders and investors manage when and how their tokens are released. One of the key scenarios is its consumer-facing experience (B2C) — token airdrops.
Airdrops are a common practice for crypto projects/companies to reward their users. Through TokenTable, they released their tokens gradually according to customized schedule to avoid sudden token dump. A smooth claiming experience is critical: failed claims lead to user complaint. Low claiming rate may also cause reputational risks that impact future deals.
SUCCESS
+160 TOKENS
SUCCESS
+60 TOKENS
FAILED
Complaining!!!
Starting from July 31, 2024, Telegram launched Mini Apps. At the same time, they announced TON as the official blockchain. This shift opens opportunities for crypto products that want to reach its massive user base directly inside this social messaging app.
“We need to build a new mini app on Telegram based on the TON chain. It’s an emerging trend, and we should launch it quickly to secure our position in the market!”
Claire, Product Lead
A unified mobile experience is needed
Before, TokenTable operated as a B2B service: for every new client, it built tailored claiming website. Now it’s the opportunity to unify all airdrop projects that use TON blockchain into one place.
“Every client has a separate claiming website. The user experience varied a lot from project to project.”
Jessie, Product
New branding showcase!
Featuring a brand-new orange aesthetic designed by our genius Visual Designer Henry Ugo (shout out to Henry!), the miniapp will become the first consumer facing product to showcase the new branding.
Before
After
TARGET USERS
A. Users from partner clients
“I need to claim tokens successfully.”
UX Goal
The user journey must enable fast, frictionless claiming with minimal failure.
B. Users from Telegram
“I’m just browsing.”
Product Goal
The product needs to provide guidance and convert them into followers or repeat users.
C. Future clients
“I’m seeking partnership opportunities.”
Product Goal
The product must demonstrate impact, scale, and successful outcomes.
STEP 1 Product Building
I use ChatGPT as a thinking partner to stress-test product logic, and make sure the flow covers real user needs. I also use MidJourney/Gemini/Figma AI Plugins to generate UI. The image is very “AI” and non-practical, but this can let me immediately grasp the must-have modules for the products.
STEP 2 Technical Alignment
I use ChatGPT to understand the technical constraints. For example, how developers store data, if they can snapshot the information. But AI cannot help to determine the best compromise between UX quality and implementation cost.
STEP 3 Detailed Refinement
I use ChatGPT to iterate microcopy. For example, I wrote, “Write concise, playful UI copy for ‘claiming paused for a few hours’. Tone: energetic but trustworthy. Avoid ALL CAPS. Give 8 variations with CTA.”
STEP 4 Handoff & Iteration
I use cursor and Figma Make to better visualize the graphics, animation I want the developers to achieve. AI can help write docs faster, but it cannot replace the human work of resolving disagreements and ambiguity. Also, it cannot answer implementation questions in real time.
Solutions Highlight
Express brand identity without compromising clarity
My key considerations about new branding include: preserving system states by differentiating from red; maintaining trust in a financial context by limiting high-saturation usage; ensuring readability given orange’s high visual intensity.
A UI Kit that just works
Success and error colors were carefully selected to complement the brand color. I also used simple icons and the TokenTable logo to create a cohesive set of minimalist empty-state illustrations.
This UI kit template has been reused across 3 projects as of 2025 for better hand-off.
Bring wireframes to life
As the sole designer, I am responsible for turning the key pages’ wireframes from the product into high-fidelity UI screens and complete UX flows.
Toggle to see why I do this
or give me an interview to know more
Off
On
Off
On
CARD STATUS
A
Airdrop ongoing; Not eligble
B
Airdrop ongoing; eligible; nothing yet
C
Airdrop ended; did not participate
D
Airdrop ended; participated
Nudge to Connect Wallets
UX Trade-offs
*Later, I expanded the project details to strengthen user trust by adding visual graphics and continued refining the UI and status hierarchy.
Empty States
I brought the product logo to life to create a vibrant, friendly tone—so when claiming is paused or something goes wrong, users feel reassured that we’re on it.
Jump out of the Box
The left layout looks generally “good”. It is cleaner and more symmetrical at first glance, but users won’t compare both states side by side.
Since they only see one outcome at a time, the right design is more effective—clearer feedback, stronger trust signals, and better next-step guidance.
Event tracking & data insights — design should ship with measurement
This time, I focused on delivering a smooth claiming experience, but I realized I should integrate event tracking before launch to validate impact. In future projects, I’ll align early with PM/engineers to define key events (e.g., claim attempt, fail reasons, retry success).
Marketing insight — more complaints can mean higher activity
I learned to read complaints in context: sometimes “more complaints” doesn’t mean the product is worse — it can mean more users are actually using it.
Design can’t solve everything alone — cross-functional collaboration matters
Design has limits. Many user issues are rooted in operations, backend constraints, and communication gaps, not UI alone. The best solutions come from working closely with other teams.
