The Interstate trading terminal: live boards of newly launched coins.
The real product: live boards of new coins, prices updating every second.
Interstate Shipped: Aug 2026

A trading screen you can read at a glance

Interstate is an app for trading crypto in seconds. I redesigned its screen to show, at a glance, what moved and what just happened.

Fractional design engineer Jul–Aug 2026
5→1 colours in a row, now just the move
5 screens built from the same blocks
4 colours, everything else grey
Mine
  • Design spec
  • Design roadmap
  • Design system
  • UI design
Shared
  • Front endwith eng
  • Rolloutwith eng
Not mine
  • Trading engine
  • Market data
The only designer. I shipped it all in code.

The problem

4.5 out of 10. That was a working trader's score.

Before I changed anything, two professional traders reviewed the app on recorded calls. Their complaints were about the screen, not missing features.

0.0/ 10
Docked for “missing” features that already existed.
The Interstate board before the redesign
The board they scored, before my first change.

The cause

Nine boards, nine rules. Every screen decided for itself.

A good design direction existed on paper, but nothing in the product held anyone to it, so every screen settled its own size and colour.

As drawn · 16pxEvery size at 100%
Buttons, a coin row, board tabs, a search field, stat badges, a price, filter chips, a toast, a balance, a toggle, quick amounts, icon buttons and a progress bar.

Buy button now under fingertip size

The screen didn't have one design problem. It had thousands, each too small to notice.

The approach

Fix the blocks. Every screen is built from the same ones.

Screens redesigned one at a time would drift within weeks. So I redesigned the shared blocks every screen is built from, in the product's code.

Screens
Discover
Pulse
Trackers
Trade
Landing
Usual handoff
Blocks
ColourLayoutNotifications
Code
3engineers shipped new features on the blocks in the first week, without asking me

A system that needs its designer in the room is just a preference.

Colour

Colour means money. Nothing else is allowed to use it.

Green means bought or up; red means sold or down. The old boards spent colour on decoration, so a real price move couldn't stand out.

Before

NewP1P2P3
NNOVA Nova Labs3s12%4%0%$28.7K+1.2%
KKITE Kite Club41s48%8%2%$9.6K-0.8%
OORBT Orbit2m21%0%0%$45.4K+3.4%
MMOTH Mothlight5m6%1%0%$3.3K0.0%
PPIXL Pixel Pals9m33%12%4%$17.3K+2.1%

After

NewP1P2P3
NNOVA Nova Labs3s12%4%0%$28.7K+1.2%
KKITE Kite Club41s48%8%2%$9.6K-0.8%
OORBT Orbit2m21%0%0%$45.4K+3.4%
MMOTH Mothlight5m6%1%0%$3.3K0.0%
PPIXL Pixel Pals9m33%12%4%$17.3K+2.1%
Same live prices. Only one shows what moved.

The whole colour budget

Buy

#12c48b

trade filled, price up

Sell

#e5484d

sale or failure: same red

Warning

#fddb24

caught before sending

Info

#6e9bff

rare; never on a trade

Even good news stays grey: a green “you ranked up” would look like a trade.

Layout

The screen holds still. Switching boards no longer relays it out.

Traders flip boards constantly, and each had its own header height. Every switch nudged the rows: too small to report, enough to lose your place.

4 layoutsMoved –
Actual size. Then one shared layout.

Feedback

Click, and it answers. No silent pending state to wait out.

One design now answers every trade instantly and in place, with the fill time. When a trade fails, it says why and what to try.

The shipped notifications, running live.
  1. HadMany designs doing one job
  2. MineOne design, but the wrong oneReverted
    Bought 1,240 BONK0.42 SOL · 1.9s
    82
  3. ShippedMostly subtraction
    Bought 1,240 BONK1.9s
    38
The Trending board with two shipped notifications stacked in the top right
Confirmations stacking in the live product. The board stays the focus.

The result

The same board. Quieter, and far faster to read.

Same crop, same three columns. The rows kept their information and lost the colours that weren't carrying any.

After
Before
BeforeAfter
↔

Mistakes

I hid a transfer. Inside a dropdown menu, where a test found it.

Merging two header controls that asked the same question was right. Moving a two-minute balance transfer into the account menu wasn't.

The Interstate header before the change, with two controls answering the same question
Before: two controls for one question, side by side.
A transfer, inside a menuRecreation

If an action outlives its container, no amount of guarding fixes it.

No post-launch analytics. The numbers here are counts from the shipped product, not a measure of what it changed for traders.

The base size is still 13. I'd set it myself, early on. Resizing every screen at once, with nothing automatic to catch what broke, was the bigger risk, so the new blocks use fixed sizes the base can't shrink.

The old accent colour survives in about twenty files. It's replaced file by file, so any one change can be undone on its own.

One board can't be reached. The day after I moved the portfolio board to the new layout, a parallel rewrite replaced it. Mine is still in the code, unreachable.

Design files decide what a thing should be. The product shows what it is.

Role
Fractional Design Engineer
Team
Design Engineer (Me), ~30 people building the product
Timeline
Jul–Aug 2026
Tools
Paper, Claude Code, Next.js, Tailwind v4