Designing a Mobile Trade Flow for an On-Chain Trading Terminal

Trading windows close in minutes

Traders check whether a token is safe and buy before the move, often away from a desk. The mobile flow had to keep the speed of buying and selling without hiding what a trader needs to see before pressing Buy or Sell.

One design system, two layouts

Desktop led and mobile followed close behind: the plan was to release desktop first, then add mobile right after as a responsive app. Both used the same tokens and components; on mobile I kept the visual language and changed how each component behaves on touch.

What the leading terminals do well

Before designing, we reviewed the trading terminals our users already used. Each one is strong at one part of the job; none felt built for a phone first.

From any list to a filled order

A few decisions that shaped the trade panel

Amounts as buttons

DesktopType an amount, then press Buy.

MobileFour amount buttons. One tap sends the order.

No keyboard covering the chart, and the same few sizes every trade.

Presets, not fields

DesktopFee and slippage fields in the panel.

MobileThree presets, always shown in a bar.

Set once, switch in one tap, always see what applies.

From sign-up to the first trade

Sign up, then buy straight from the list

→

12345

1

Lists · Trending, Surge, Watchlist

2

Time window and Filter

3

Wallet, Quick Buy amount and preset P1–P3

4

Token row · age, market cap, liquidity

5

Lightning button · one tap buys with the active preset

Presets make one tap safe

Tap the preset chip on Explore to open Trading Settings. Slippage, fees and MEV are saved per preset, for buy and sell; switch P1–P3 in one tap.

Read the token and trade it on one screen

The screen follows the order a trader decides in.

123456

1

Header · token, age, socials, 4/4 safety badge

2

Stats · market cap, volume, liquidity, holders

3

Chart · the same chart as desktop

4

Position · bought, sold, holding, PnL

5

Trade panel · wallet, mode, Buy/Sell, amounts

6

Preset bar · slippage, fees, MEV

Before the trade

Live trades by trader type, holders tagged by wallet type, and the safety check behind the 4/4 badge.

Two ways to trade, one panel

Ordered from fastest to most controlled. Switching mode changes only the panel; chart and position stay put.

Instant

Market and Limit

From position to profit

Positions shows value and PnL per token, each with a Sell button. The sell sheet works in shares of the holding, and the result lands back in the same list.

After the order

Every order reports back in the same toast at the top: sending, filled, a warning before it fails, and the failure with its reason. The chart and panel stay in view.

Built on the same system

The other modules reuse the components from the trade flow. One screen each.

Shipped, then closed by the market