BloFin CEX — Spot Trading & Support Redesign

The Brief

BloFin's centralised exchange (CEX) served an established trading user base with deep existing muscle memory. The design challenge wasn't building something new from zero — it was improving a live, high-expectation product without breaking the familiarity traders already relied on.

Two problems needed solving. The Help Center was a standard support knowledge base: a flat list of articles with basic search, no AI assistance, poor search relevance, and no mobile optimisation — failing exactly when a user is mid-trade, confused, and needs immediate context-specific help. And Spot trading had no native Take Profit / Stop Loss capability, leaving spot traders to monitor positions manually or lean on third-party alert tools, a friction point futures traders didn't have to deal with.

How I Approached It

The work split into two tracks, each carrying the same polish standard demanded by an established product with real user habits to protect.

Help Center. The redesign started with competitor UI research — 54 reference screenshots from competitor platforms, structured into a comparative HTML document — before moving into wireframes that established the content architecture and information hierarchy. From there: a high-fidelity prototype in both web and H5 (mobile) light mode, and full dev handoff documentation delivered in English and Chinese.

Spot TP/SL. Designed as an inline addition to the existing spot trading UI rather than a separate bolted-on flow. The design covered the full interaction sequence: the inactive trade panel before TP is set, the order center flow after a limit order fills, the TP activation modal with Limit and Market execution options, the active TP state showing the set target, and the completion state after TP triggers — all delivered in both dark and light mode, and extended to a combined Spot TP/SL view with both Take Profit and Stop Loss set simultaneously.

What Shipped

The Help Center redesign shipped end-to-end — wireframe, prototype, and bilingual dev handoff — with an AI summary feature as its core UX innovation, ahead of the keyword-search-only pattern most CEX help systems still used.

The Spot TP/SL feature shipped with full state coverage across dark and light mode, giving spot traders the same risk-management capability futures traders already had on the same platform.

01

// 01 — Product Design

Role: Solo Designer · CEX Feature Work (parallel to DEX engagement)

Scope: Help Center redesign, Spot TP/SL (web + mobile), CEX Spot TP — App H5

Deliverables: Wireframes, HTML prototypes, design specs (EN + CN), dev handoff docs

Context

While the TxFlow DEX was being built from 0 to 1, BloFin's existing CEX product also had active design requirements. The CEX work ran in parallel — smaller in scope but high in polish standard, since the CEX served an established user base with existing muscle memory. Every change had to be an improvement without breaking familiarity.

The CEX feature work covered three areas: a full Help Center redesign for the web and mobile platforms, a Spot TP/SL feature for the CEX trading interface, and a Spot TP/SL implementation for the CEX mobile app.

01 · Help Center — Full Redesign

Problem: BloFin's existing Help Center was a standard support knowledge base — a flat list of articles with basic search. For a trading platform onboarding both retail and institutional users, this approach fails at the moment it matters most: when a user is mid-trade, confused, and needs immediate context-specific help. The existing web UI had no AI assistance, poor search relevance, and no mobile optimisation.

Solution: A ground-up redesign covering three deliverables: a wireframe set establishing the content architecture and information hierarchy, a high-fidelity prototype in both web and H5 (mobile) light mode, and full dev handoff documentation in English and Chinese.

Competitor UI research was conducted and delivered as a structured HTML document covering reference UI patterns from 54 screenshots across competitor platforms.

Outcome: Full redesign delivered from wireframe to prototype to bilingual dev handoff. The AI summary feature was the primary UX innovation — positioning BloFin's Help Center ahead of standard support patterns at a time when most CEX help systems still relied on keyword search alone.

02 · CEX Spot TP/SL — App + Web

Problem: BloFin's CEX spot trading had no native Take Profit / Stop Loss capability. Spot traders were forced to monitor positions manually or use third-party alert tools — a significant friction point for retail users trying to replicate risk management patterns from futures trading.

Solution: A Spot TP/SL feature designed as an inline addition to the existing spot trading UI. The design covers the full interaction sequence: the trade panel in its inactive state (TP not yet set), the flow after a limit order fills (order center with TP activation option), the TP activation modal with Limit and Market execution options, the TP active state showing the set target, and the completion state after TP triggers.

Both dark and light mode variants were delivered. The design was extended to include a combined Spot TP/SL view with both Take Profit and Stop Loss set simultaneously — matching the confirmed Spot TPSL instance spec from the December 2024 requirements update.

Outcome: Full Spot TP/SL feature designed for both dark and light mode across all states. Gives spot traders the same risk management capability as futures traders, reducing the UX gap between the two trading surfaces on the same platform.