Case study · Markets → Trading
From a price list to a place where trading starts.
As the only designer, I redesigned the Markets page and the asset page of Bitcoin Suisse Online, so clients can go from looking at an asset to trading it without hunting for the button.
Problem
Almost no trades started from the Markets page. Clients looked at prices there, then went to Portfolio to trade.
What I did
Made Trade visible on every asset in Markets, and turned the asset page into a place that lists every available action.
How I worked
Found the problem in product analytics, agreed the rules with legal and compliance, and tested with client-facing teams.
Result
+15% trades from Markets and asset pages, and +34% conversion from visit to opening a trade.
01 / Starting point
Clients traded from Portfolio, not from Markets.
When I explored our product analytics, almost none of the trades started on the Markets page. Nearly all of them came from Portfolio. Clients were looking at prices, but they went somewhere else to act.
Before
After
The question wasn't how to bring more clients to Markets. It was why clients who were already there didn't trade.
02 / Why it happened
The pages showed prices, but hid the next step.
Clients had interest. The pages just didn't give them an obvious way to act on it.
01
No visible Trade button
On Markets, actions sat behind the three-dot menu, and the main table had no action at all.
02
The asset page was a dead end
Trade was there, but every other action was hidden behind the three dots. Clients read about an asset and had nowhere obvious to go next.
03
Two pages, one path
Clicking an asset on Markets opens its asset page, so both pages had to be fixed together.
04
Help without advice
As a regulated Swiss company, the design could show clients what they can do, but never tell them what to buy or sell.
03 / How I worked
Data first, rules second, design third.
I started from where trades actually happen, and made sure every visible action was allowed before I designed it.
Found it in the data
I explored our product analytics in PostHog to see where trades start. I used Claude to speed up the analysis.
Collected the rules first
Stakeholders, BFF, legal and compliance defined which actions each asset allows and what the pages are allowed to say.
Designed and shipped with the team
I worked with the product owner and front-end developers from the first design to launch on 5 August 2026. Both pages also moved to the dark theme.
Tested inside the company
Testing with real clients wasn't possible, so I tested with the client-facing teams and the Trade Desk, who speak with clients every day.
A design system ready for AI
I set up our design system for AI tools, so I can prototype and ship faster.
04 / The path
One path across two pages.
I designed Markets and the asset page as steps of the same journey, not as two separate screens.
Browse
01
Look at the markets
Open
02
Open an asset
Choose
03
See what you can do
Act
04
Start a trade or another action
Before
From Markets
- Markets
- ··· menu
- Trade
From the asset page
- Asset page
- ··· menu
- Other actions
After
From Markets
- Markets
- Trade
From the asset page
- Asset page
- Trade
- or
- Other actions
05 / Markets page
Make the main action impossible to miss.
Every asset in the table now has a Trade button in the primary color. Above the table, the new page gives clients reasons to act before they even reach it.
A Trade button on every row. In Favorites, assets keep their real market rank.
Trade on every row
One click from the table to the trade, instead of a hidden menu.
Reasons to act
A staking banner and daily winners and losers sit above the table.
Newly listed
New assets get their own cards, with 24h and 7d change.
Tabs that match intent
Favorites, Top Traded, Highest APY, Top Gainers and Top Losers.
If trading is the goal, the button has to be visible.
06 / Asset page
From dead end to next step.
Before, the asset page had one Trade button and hid everything else. Now it shows every action the client can take with that asset.
Before
After
Design decision
Keep the next step in view while the client reads.
A Trade banner sits at the top of a side panel, with the other actions listed below it, such as Stake Bitcoin. The panel stays in place while the page scrolls, so the next step is always one click away.
07 / Mobile
The same idea on a phone.
There's no room for a side panel on a phone, so the actions move to a bar at the bottom of the screen.
Design decision
Two buttons that never scroll away.
"Trade Bitcoin" is the main action in the primary color. "Use your Bitcoin" sits next to it for the other actions. Both stay fixed at the bottom while the client scrolls.
08 / Compliance
Help clients act, without telling them what to do.
A regulated platform can make actions visible, but it can't give investment advice. These rules shaped every button and every sentence.
Only real options
Show only the actions the client can actually take with that asset.
No direction
Never suggest buying or selling.
Neutral words
Labels name the action, like "Trade Bitcoin" or "Stake Bitcoin", not an opinion.
Rules set together
Legal and compliance defined the rules the design follows.
09 / Next best action
Next iteration · designed, not live yet
One suggestion, based on what the client holds.
The next step is a banner called "Your next best action". It looks at the client's situation with that asset and shows one action at a time. It follows the same rule as before: only actions available for that asset, never buy or sell suggestions.
-
01
Discover → Trade
The client doesn't hold the asset yet.
-
02
Hold → Stake
The client holds the asset, it can be staked, and it isn't staked yet.
-
03
Earn → Stake more
The client already stakes the asset.
-
04
Optimize → Lend / Borrow
Only if the client has collateral and the loan-to-value makes sense.
-
05
Only if the client is eligible.
If more than one rule matches, the one higher on the list is shown.
Example · Hold → Stake
The client holds Bitcoin that isn't earning yet.
The card shows how much is eligible, the rate, and an estimate at the current rate, with one clear action. It describes an option the client already has, without recommending it.
10 / Outcome
More clients now trade where they browse.
Live since 5 August 2026. Measured in PostHog, comparing the 4 weeks after launch with the 4 weeks before.
+15%
More trades started from the Markets and asset pages.
+34%
Higher conversion: more visits to these pages led to opening a trade.
Next
"Your next best action" is designed and ready for the next release.