BitHive
A crypto exchange dashboard, redesigned from a landing page wearing a balance into a workspace a returning trader can use.
- Type
- Crypto exchange, desktop
- Role
- Product Designer
- Timeline
- 10 weeks, first draft through a full dashboard redesign
- Tools
- Figma, Figma Prototyping
lands on your own numbers
red and green mean one thing
the error says how to fix it
Overview
BitHive is a crypto exchange: buy, hold, and trade BTC, ETH, SOL, and a handful of other coins from one balance. I designed it twice. The first pass read like a fintech landing page; the second is built around what a returning user actually does, check what they hold and place a trade.
Problem
Exchange UIs tend to fail in one of two ways: a wall of ticker data that scares off anyone who isn't already a trader, or a marketing layout, a big headline and a centered balance card, that looks friendly and has nowhere to put the tools a trader needs after the first visit. My first draft of BitHive fell into the second trap.
Process
- 01I built v1 around one centered column: a headline, a big balance card, a donut chart, and three coin cards, under a marketing nav (Buy crypto, Markets, Earn) with no way back into your account. It photographed well as a hero shot and fell apart the moment I imagined someone coming back just to check a balance and trade.
- 02I rebuilt v2 on a fixed left sidebar (Dashboard, Assets, Orders, Payment history, P2P, Account, Settings), so the balance and markets start at the top of the first screen instead of under a headline. A returning user lands on their own numbers, not a pitch.
- 03I added the account identity, name, UID, and avatar, as a small chip in the header. It's on every screen, and nobody has to look past it to reach their money.
- 04I gave the holdings table a real hierarchy in fixed columns: coin, holding in both coin and dollars, price, 24-hour change, and a Trade link on every row. v1 showed three prices in cards and never said what you held.
- 05I put the P2P Lightning panel in the first row, beside the balance, as a compact buy and sell form: pay, receive, rate, fee, payment method, and one button. v1 had no room for it on the first screen.
The dashboard, twice
v1: a pitch first, your money second
v2: your numbers, first screen
Design system
The dashboard sits on graphite rather than the usual crypto navy, so color can do jobs instead of setting a mood. Honey (#f2b705) is the only accent and it means act: Deposit, Buy BTC, Trade. Green and red appear only on price change, so a scan down the 24h column reads gains and losses without anything else competing for those colors. The balance itself stays plain white at a large size; it doesn't need a color to be the most important number on the page. The mark is three honeycomb cells, and the type is Hanken Grotesk with tabular figures so columns of prices line up.
- Ground#101214
- Surface#171a1d
- Honey, act#f2b705
- Gain#2ebd85
- Loss#f6465d
- Text#eef0f2
Outcome
I designed and prototyped the full v2 dashboard: sidebar, account header, balance card with a 30-day chart and range control, P2P panel, and holdings table, with the v1 draft kept in the file as the documented earlier attempt. Before build, I'd test whether people who only hold, and never use P2P, read the panel in the first row as useful or as an ad.
Reflection
Keeping v1 in this case study instead of quietly deleting it was deliberate. It's the weaker file, the centered layout really doesn't hold up next to a working dashboard, but the redesign only makes sense next to it. What I'm less sure about is the P2P panel. Putting it in the first row makes it easy to find for people who use it and costs space for everyone who only holds. I made that call from my own habits on exchanges, not from data on how many users touch P2P at all, and that number would change the layout.