Designing Matcha

A swap fits in a small box: two tokens, an amount, a button. That box is a small part of a trading product. People still have to find the token, decide they want it, pick a wallet, understand the quote, and figure out what happened after they signed.

I worked on all of that, not only the trade: the homepage, token pages, wallets, the trade module, mobile, and the dark theme. The question I kept asking was pretty basic. What does someone have to remember when they go from this screen to the next one?The swap box was never the hard part

Different reasons to arrive

The homepage has three ways in: search, browsing the market, and connecting a wallet. If you already know the token, you shouldn't have to scroll past a showcase. If you're just looking around, an empty trade form gives you nothing. I led the page structure around those starting points.

That's a real layout problem. Give all three the same weight and the page fights itself. Give one all the space and the others disappear. The first move has to be obvious, and the other two still have to be easy to find.

The space around the trade

The token page puts market data, the chart, the trade form, and order history on one screen, so you can go from research to trading without leaving. It also means a lot of things want your attention at once. A chart will take all the space you give it, and the quote still has to be readable next to it.

The wallet flow has a quieter detail. You can switch wallets and keep your quote and what you typed. The account and balance change, but the trade you were setting up stays. Nobody notices that until it's missing.

A system has to survive the awkward states

The main screens are the easy part to show off. A wallet still loading, a token check that hasn't come back, a quote waiting on confirmation, those don't make great portfolio shots. They're still the product, and I designed them along with the pretty ones.

Dark mode had to work everywhere: surfaces, every component state, the charts. On mobile everything had to be reordered, since nothing fits side by side. Keeping it consistent meant a button or a status had to mean the same thing wherever it ended up.

What the screens can tell you

These images show the structure and the calls I made. They can't tell me if someone felt sure about a trade, or where they hesitated, and I'm not going to pretend a clean screenshot proves that.Screenshots can't show hesitation

What I can show is how the pieces connect. A token you found carries into its page. Switching wallets doesn't wipe the form. The transaction details are there before you sign. That's what I want people to notice. Each screen makes more sense once you see where it leads.