Product design · Zenxo · Shipped 2026

ZENXO

A canvas could show what a form never could. Keeping the form next to it is the reason traders actually learned it.

Two traders at a desk reading a Zenxo results dashboard — the summary, the P&L chart and the open position, all on one screen

We fixed the form, and you still couldn’t see your own strategy.

Indian retail traders build multi-leg options strategies (several buy and sell positions that work as one) and backtest them against years of market data before risking real money.

The previous Zenxo builder: nine configuration sections — settings, templates, entry conditions, legs, adjustments, payoff, brokerage — stacked in a single scrolling column.

  • A strategy is 4 or 5 “legs.” Each leg has its own entry, stop-loss, target and re-entry rules, and some rules apply across several legs at once.

  • The first build put all of it into 9 form sections on one scroll: 25 controls before you’d described a single leg.

  • We joined a few weeks before launch, with the business unhappy about what was about to ship.

We started where you’d expect, tightening sections and fixing hierarchy. It helped, but it couldn’t touch the real problem.

A form can only list settings. It can’t hold a rule that belongs to three legs at once; that relationship turns into a checkbox that disappears the moment its panel closes.

The people on our team who trade futures and options (F&O) said it plainly: there’s no structure here, and you can’t see your own strategy.

Solution

A canvas could show what a form never could, and keeping the form beside it is why traders actually learned to read it.

We laid the strategy out the way it runs: entries on top, legs across the middle, exits below. A shared rule became one node wired to every leg it governs. That had a useful side effect: a leg with nothing beneath it is now, visibly, a leg with no exit.

Moment 1

“All of this started as three separate arguments about what a strategy builder should even be.

The one we shipped wasn’t the most powerful of the three. It was the only one traders would learn.”

Exploration set — three directions, built

(Direction / what it did well / why it didn’t ship)

Wireframe of the editor-only direction: a single full-width form column of stacked, grouped fields with a step header across the top and no canvas anywhere in the frame

A — Editor only

Did well: Cleanest and most familiar, a real step up from the 9-section form.

Why it didn’t ship: Still couldn’t show a rule shared across legs. It listed the capability, never the relationship.

Wireframe of the canvas-led direction: a full-frame dot-grid canvas carrying the strategy as connected nodes, with the form reduced to a secondary panel

B — Canvas-led

Did well: The most honest model, since a strategy really is a graph.

Why it didn’t ship: Asks a first-time trader to learn a node editor before placing a single order.

Wireframe of the shipped direction: the form as a narrow left column with the dot-grid canvas filling the rest of the frame beside it, both showing the same strategy

C — Editor + live canvasShipped

Did well: Traders start in the form they know; the canvas mirrors it live, so they learn to read it without being taught.

Cost: A narrower form column and a much harder build (two surfaces kept in sync).

The old Zenxo results page: a large win rate percentage leading the summary, total net P&L set small in the top-right corner, max profit, max loss, average profit, average loss and Sharpe all at one weight, a configuration column down the right, and the cumulative P&L chart starting below the fold

Before: everything one size, leading with a number the trader wasn't asking for.

Moment 2

Results need to guide what your next step is, so we built the page as a path.

The results page had 21 panels at the same weight. Net profit sat in a tile the same size as the worst losing streak. But a trader opens a backtest to answer one question: should I run this?

I sat with traders one at a time.
Priorities differed, but the shape held.

  1. The verdict
  2. The curve
  3. The reasons
  4. The raw rows
  5. How to fix

After: the verdict at display size, the curve full height on the first screen, the settings moved below. Ranking meant demoting — the settings that produced the run lost their permanent column. A deliberate trade.

Moment 3

The dashboard card had the same problem, just smaller

Everything sat at one weight. The redesign trades density for rank: the verdict leads, the curve shows the shape, the legs become a table.

The old dashboard card: strategy name and run window at the top, a legs block listing each leg with its stop loss and target, then a results block where net P&L, winning trades, trades and max drawdown all sit at the same small size, above View results and Configure

Before

The redesigned dashboard card: net P/L set at display size under the strategy name, wins, trades and max drawdown as supporting figures beneath it, a cumulative curve across the middle with a breakeven line, the legs as a readable table, and View results and Configure at the foot

After

Moment 4

Confusing states were driven towards clarity with motion

One accent colour, rationed. Orange only ever means “act here” or “you are here,” so you can read a screen without reading a word of it.

  • – Motion reports instead of reassuring. A backtest names the stage it’s on, so a slow run and a stuck run look different.

  • – If nothing is happening, nothing moves. The orbiting dots stop when the strategy stalls. That’s the whole idea in one gesture.

Double Diagonal

1 Version

A few more steps, then you’re ready to run

LEGS 1 - 4

LEGS 5 - 8

Leg 1

SELL

1x

ATM

CE

Leg 2

SELL

1x

ATM +100

CE

Configure

Nothing is running, so nothing moves. Orange sits on the primary action and nowhere else.

Double Diagonal

Version 1 | 11 Jul 2026, 3:16 PM

LIVE

Connecting Engine...

Loading Data...

Analysing Conditions...

Simulating Legs...

Computing P&L metrics...

Finalising Results...

1m 0s

·

43s left

RUNNING

Connecting Engine

Loading Data

Analysing Conditions

Simulating Legs

Computing P&L metrics

Finalising Results

Connecting Engine

Loading Data

Analysing Conditions

Simulating Legs

Computing P&L metrics

Finalising Results

Connecting Engine

Loading Data

Analysing Conditions

Simulating Legs

Computing P&L metrics

Finalising Results

Cancel

Connecting, loading, analysing, simulating, computing, finalising. Each one reports rather than reassures.

Outcomes

Zenxo is live, and a shared rule is finally a thing you can see.

The rebuilt builder and the new results page both shipped. The 9-section scroll is gone, and a rule shared across several legs, which the first version couldn’t express at all, is now 1 node with its members wired to it.

Reflection

What I learned

I didn’t know how F&O worked… and the team paid for me learning it.

Every decision here is really a claim about what a trader needs to know before risking their money, and those weren’t claims I could make in my first few weeks. So I kept stopping to work out where a business requirement and a trader’s actual need were pulling apart, and which one should win. Each pause was reasonable on its own. Together, they pushed my tasks late, and late tasks moved the timeline for everyone downstream of me.

Learn the domain, just not in the middle of execution.

Understanding what I was designing for is the thing that made the work good. I’d do it again. I’d just rather not pay for it with someone else’s schedule.

Client
Zenxo
Role
Product designer. I designed the login flow, the live strategy card, the dashboard card redesign, the colour system, and all the motion. I co-designed the builder's node and editor behaviour, the results-page hierarchy, and Zenbot
Team
2 PMs, 3 designers, 10 engineers, some of them traders and some both. The backtesting engine is the backend team's work
Timeline
May–Aug 2026
Surface
Web
Stage
Shipped

Scope of work

  • Interaction Design
  • Design Systems
  • Motion
  • Information Hierarchy
  • Prototyping

NEXT STOPS

Not done yet?

DRAW THE LINE | WORKSHOP

The Draw the Line logo over a school corridor with students walking away down it

A two-day anti-bullying workshop for 33 government-school students, run with Going to School.

View Project

TITAN | REBRAND

A figure in goggles catching an ember reflection, the TITAN lockup across it.

A conceptual rebrand of Titan, India’s iconic eyewear brand, reimagined for the athletic market.

View Project
Back to all work