Context & ownership
The same trade needs a different workspace.
A trading interface has to connect market context, order type, size, leverage and account exposure. Web can keep much of that information visible at once. On iOS, the order has to fit into a focused bottom sheet.
My work spanned trading, portfolio, social and community experiences. This study focuses on order entry and the history and management patterns that follow a trade.
The order needs to preserve market context while adapting to a persistent Web panel and a focused iOS sheet.
Role, Scope & Team
Sole design ownership
The only designer in a six-person founding team. Owned UX architecture, interfaces, visual design, component specifications, system foundations, documentation and handoff across Web and iOS.
The founding team
Founder, CTO, Web Engineer, iOS Engineer, CMO / Co-Founder and me.
Direct collaboration
Partnered with the Web Engineer, iOS Engineer and CTO on interaction specifications and implementation considerations. Worked with the Founder and CMO / Co-Founder on product direction and priorities.
Design decisions
Cross-platform architecture
A persistent panel on Web. A focused sheet on iOS.
The Web workspace keeps the chart, market information and account context beside the order panel. The order remains connected to the market the trader is looking at.
The iOS bottom sheet concentrates the same decision around price, value and allocation. Its pre-trade summary shows projected changes to position value, available margin and liquidation before confirmation.
The proposed trading workspace connects the market selector, chart, account context and advanced order panel.
The proposed iOS sheet groups limit entry, dotted allocation, presets and pre-trade account changes. Presented over the existing iOS trading chart to show its product context.
The mobile experience in motion.
The full mobile product video shows the feed, trading view and order-entry interactions. Published by Legend on October 11, 2026.
Legend · October 11, 2026 · Watch originalControls & account context
Keep the consequences close to the input.
The standardized advanced order form brings leverage, order type, direction, size and allocation into one composition. Current position, available balance, estimated liquidation, order value and required margin remain part of the order context.
The proposed percentage control defines minimum, default and maximum states, plus dragging, editing and disabled behavior. The dotted track, handle, preset labels and numeric value form a reusable allocation pattern. I worked directly with the CTO and Web and iOS engineers on interaction specifications and implementation considerations.
The proposed panel preserves the dotted allocation track and brings trade configuration, account consequences and account health together.
After the order
Make the trade history inspectable.
The Web history specification separates a trade summary from its execution rows. Funding, entry and exit values, P&L and totals remain part of that structure.
The standardized iPhone profile places trade history within the account and portfolio view. The shared column language connects those records to the Web table while retaining the surrounding native navigation.
The Web history specification groups execution rows beneath a summary and keeps funding and P&L visible.
Trade history retains its account context inside the standardized iPhone profile.
System architecture
Define one contract, then respect the platforms.
The engineering handoff describes global primitives, semantic roles, and component/layout tokens. It also defines shared rules for typography, color, shape and loading, with explicit platform differences.
The proposed percentage control specifies its dotted track, handle, preset labels and numeric value across interaction states.
Global primitives
Raw values form the base of the proposed token architecture.
Semantic roles
Names express meaning, including action tone, foreground, surface and typography.
Component & layout
Component appearance and geometry reference those roles, with platform outputs described in the handoff.
Design → engineering
Make the release boundary part of the handoff.
The handoff assigns distinct responsibilities to repository tokens, production components, Figma and the existing catalogs. It proposes a versioned token contract and Web and Swift outputs from a shared release.
The implementation sequence is gated: review the Figma coverage, approve and freeze the release, export and validate tokens, update product components, then migrate call sites and catalogs.
Component migration is paused, with production components, Storybook and the iPhone Component Gallery remaining to be updated.
Market identity and selection in one component.
A shared label-and-value structure for account metrics.
Account-health score and segmented status.
Outcome & reflection
A shared trading model across Web and iOS.
I designed a Web trading workspace and iOS order-entry sheets, connected by reusable controls, inspectable trade history and a documented engineering contract.
The useful shared unit is the trading decision: its inputs, consequences and states. Each platform can express that decision in a layout that fits the way traders use it.
At a live trading competition in Seoul.
Footage from Legend’s trading competition at Portal PC in Seoul, South Korea. Legend reported that more than 100 traders took part in simultaneous one-on-one matches.
Legend · March 27, 2026 · Watch original