Case study · Advanced Trading
From a simple conversion flow to a professional trading experience.
As the only UX designer on the project, I designed Advanced Trading for Bitcoin Suisse Online: how clients find a market, set up an order, check it, send it, and manage it afterwards, on desktop and mobile.
Problem
The product only supported converting one asset into another. Clients who wanted to trade had no order types, no execution choices and no way to follow an order after sending it.
What I did
Designed the full trading flow around the life of a trade: market discovery, order entry, error states, review, and open orders and history.
How I worked
Turned open questions on the design into a final decisions document with the business, and reviewed the flows with the Trade Desk.
Where it is now
Live since September 2026 with Market, Limit and Stop orders. Advanced strategies follow in a later phase.
01 / Starting point
The product was built around conversion, not trading.
The original flow supported one thing: pick two assets, enter an amount, and review the conversion. There were no order types, no ways to choose how an order is executed, and nothing to manage after the trade.
Before
After
The question wasn't "how do we make the old form more advanced?" It was "what should trading look like here?"
02 / What made it hard
Professional depth, without the friction.
The hard part was deciding what the client needs to see, when, and what can stay out of the main path. Every new trading feature added more choices, more states and more ways to fail.
01
Depth
Market, Limit and Stop change what the order is. Smart Execution, TWAP, VWAP and POV change how it gets executed. Both had to fit in one form.
02
Clarity
The form had to explain what each choice does, without making the client learn every trading term first.
03
Risk
An order can look fine and still fail: the amount is below the minimum, a minimum fee applies, or the client's account can't receive the result.
04
Real account setups
A client can hold more than one account in the same currency, so the order has to say which account pays and which one receives.
03 / How I worked
Open questions became decisions before they became screens.
Trading rules are business decisions, not design preferences, so each open question needed an answer from the business rather than a guess from me.
Questions on the canvas
I kept open questions as notes next to the screens they affected in Figma, so everyone could see exactly which part of the design was waiting on an answer.
A final decisions document
We resolved them with the business in one document covering instrument types, order entry, orders and balances, order details, chart and order book, and how order types differ from execution strategies. I then checked every note on the canvas against it.
Scope in phases
The first release, now live, covers Market, Limit and Stop. Advanced strategies (TWAP, VWAP and POV) come in a later phase, and the form already has an Advanced tab waiting for them, so adding them won't change its structure.
Checking the design
I reviewed the flows with the Trade Desk, the people who handle client trades every day, and with the business. They brought edge cases from real client setups, such as clients who hold several accounts in the same currency. The design handles that with a clear choice of which account pays and which one receives.
04 / The journey
I designed the life of a trade first.
Instead of designing separate screens, I mapped the steps a trade goes through and designed each screen for its step.
Discover
01
Find the right market
Configure
02
Choose what and how to trade
Review
03
Check the order
Execute
04
Send the trade
Monitor
05
Follow how it fills
Manage
06
Edit, cancel, review
Every feature had to answer two questions: which step does this belong to? and what does the client need at that moment?
05 / Market discovery
Trading starts before the order form.
An empty order form is a bad starting point. The market list became the way in: search all instruments, compare price, movement and volume, then trade without leaving the page.
Search, filter, compare, select, trade.
01
Search everything
Clients search across all instruments instead of needing to know which category an asset sits in.
02
Filter the market
Hot, New, Gainers, Losers, Categories and Ecosystems support different ways of narrowing down.
03
Show what matters for a decision
Price, 24h change and volume are visible before the client opens an order.
04
Stay on the page
Picking an instrument updates the chart and order form in place instead of opening a separate market page.
06 / Order form
One form. Several ways to execute.
I didn't design a different form for each order type. The layout stays the same and only the fields change, based on what the client picked.
1. Buy or sell
The first choice, always at the top.
2. Order type
Market, Limit, Stop or Advanced. This decides which fields appear below.
3. Execution strategy
RFQ / Instant or Smart Execution. TWAP, VWAP and POV will sit under Advanced in a later phase.
4. Amount
Quantity and total stay linked, and the slider sets a share of the available balance.
5. What to know before sending
Available balance, the fee, and a note about how the order is routed, for example that Smart Execution has no price guarantee.
One way of thinking. Different levels of control.
07 / Complexity
The hardest part was deciding when complexity should appear.
Most of my time went here. The goal wasn't fewer features. It was that each extra field appears only when the client has made a choice that needs it.
First release
Market
Only side, amount and the current market price. No price to set.
First release
Limit
A price field appears only when the client picks Limit.
First release
Stop
The trigger price appears only for Stop orders, not on every order.
Later phase
Advanced
TWAP, VWAP and POV live in their own tab, so they don't crowd the basic path.
More capability. A clearer way to trade.
08 / Trading terms
Some trading terms need an explanation, not just a label.
Terms like TWAP or Stop mean nothing to many clients. I put a short explanation next to the choice, so nobody has to leave the order to look it up.
Design decision
Explain what a choice does at the moment of choosing.
A link under the form opens a panel with a plain explanation of each order type and strategy. The help lives next to the decision, not in a separate help page.
Help belongs where the decision happens.
09 / Mobile
Same trading logic. One step at a time.
On a phone there's no room for chart, form and orders side by side. The same choices happen in the same order, but stacked and split into views.
10 / Error states
In financial products, the edge case is part of the product.
Some orders look fine but can't or shouldn't go through as they are. Each of these cases stops the order early, says why in plain words, and shows what to do next.
Amount too small
The field turns red and the minimum (0.0001 BTC) is shown right under it. Preview stays disabled until the amount is valid.
Minimum fee applies
A small trade can still go ahead, but a note says the minimum fee applies before the client opens the preview, so the cost is part of the decision.
Account can't receive the trade
The client's USD account is for transfers only. Instead of a dead end, the form explains why and offers a one-click switch to ETH/USDC, a pair they can trade.
Stop the order early. Say why. Offer the next step.
11 / Review
Before money moves, make the decision explicit.
The form answers "what am I setting up?" The preview answers "what exactly am I about to send?"
Review model
Set up, check, confirm
The preview repeats the order in one sentence at the top, then lists every detail that affects the outcome.
Trade-off: skipping the preview
Frequent traders asked for fewer clicks, and the business agreed. The option is unticked by default, so every client sees the preview until they choose to skip it, and they can turn it back on in Settings.
12 / After the trade
The trade doesn't end at Confirm.
A Limit order can wait for hours. A Smart Execution order can fill in parts. Clients need to see where each order stands and what they can still do with it.
Open
Waiting to execute, e.g. a Limit sell with 0.0 / 10.0 ETH filled.
Partially filled
Progress is visible: 0.5 / 2.0 BTC with a bar, on desktop and mobile.
Canceled or closed
Finished orders move to Order History with their final status.
Manage
Edit and cancel sit on each open order, so there's no extra screen to find.
13 / Outcome
A new foundation for trading at Bitcoin Suisse.
Advanced Trading went live in September 2026 with Market, Limit and Stop orders, including their error states, review and order management. Advanced strategies follow in a later phase on the same form.
3 order types
Market, Limit and Stop in the first release, with RFQ / Instant and Smart Execution. TWAP, VWAP and POV are designed to follow.
Web + mobile
The same trading logic on a desktop page and a stacked phone layout.
Errors designed
Minimum size, minimum fee and account limits are handled in the form, before the preview.