IPOT · Order Page

Every order. Every detail.

From a single limit order to baskets, bracket orders, and Robo strategies. Explore the IPOT order-page design across entry, execution, management, and the states in between.

Design focus: order entry, advanced order types, and multi-order management.

EXPLORE THE CASE STUDY ↓

A complete order experience, in 29 feature groups.

Browse the chapters below. Each gallery preserves the original design screens; swipe through a flow or tap a screen to inspect it at a larger size.

Entry Point (Existing)

Where the order journey begins.

The existing entry point provides the starting context for the order-page exploration.

1 screen · Swipe or use the arrows · Tap to enlarge

Entry Point (Existing) — Existing entry point, screen 1 — 01 / Existing entry point

Default: Limit Order

A familiar starting point.

The default limit-order screen is explored with a position, without a position, and in an expanded view.

3 screens · Swipe or use the arrows · Tap to enlarge

Default: Limit Order — Limit Order, screen 1 — 01 / Limit Order

Default: Limit Order — Limit Order, screen 2 — 02 / Limit Order

Default: Limit Order — Limit Order, screen 3 — 03 / Limit Order

Interaction

A closer look at the interactions.

Order-type selection and the expanded position view show how the entry screen reveals more detail.

4 screens · Swipe or use the arrows · Tap to enlarge

Interaction — Limit Order, screen 1 — 01 / Limit Order

Interaction — Order Type, screen 2 — 02 / Order Type

Interaction — Order Type, screen 3 — 03 / Order Type

Interaction — Order Type, screen 4 — 04 / Order Type

Limit Order • Buy

Limit orders, from input to submission.

Price, lots, buying power, and confirmation come together in the buy flow. The screens cover filling, submitted orders, reset states, and insufficient buying power.

16 screens · Swipe or use the arrows · Tap to enlarge

Limit Order • Buy — Limit Order, screen 1 — 01 / Limit Order

Limit Order • Buy — Limit Order, screen 2 — 02 / Limit Order

Limit Order • Buy — Limit Order, screen 3 — 03 / Limit Order

Limit Order • Buy — Limit Order, screen 4 — 04 / Limit Order

Limit Order • Buy — Limit Order, screen 5 — 05 / Limit Order

Limit Order • Buy — Limit Order, screen 6 — 06 / Limit Order

Limit Order • Buy — Limit Order, screen 7 — 07 / Limit Order

Limit Order • Buy — Order Type, screen 8 — 08 / Order Type

Limit Order • Buy — Limit Order, screen 9 — 09 / Limit Order

Limit Order • Buy — Order Type, screen 10 — 10 / Order Type

Limit Order • Buy — Order Type, screen 11 — 11 / Order Type

Limit Order • Buy — Order Type, screen 12 — 12 / Order Type

Limit Order • Buy — Limit Order, screen 13 — 13 / Limit Order

Limit Order • Buy — Limit Order, screen 14 — 14 / Limit Order

Limit Order • Buy — Limit Order, screen 15 — 15 / Limit Order

Limit Order • Buy — Limit Order, screen 16 — 16 / Limit Order

Limit Order • Sell

The sell side of the same flow.

The sell journey carries the same structure through price selection, lot entry, submission, and reset states.

9 screens · Swipe or use the arrows · Tap to enlarge

Limit Order • Sell — Limit Order, screen 1 — 01 / Limit Order

Limit Order • Sell — Limit Order, screen 2 — 02 / Limit Order

Limit Order • Sell — Limit Order, screen 3 — 03 / Limit Order

Limit Order • Sell — Order Type, screen 4 — 04 / Order Type

Limit Order • Sell — Limit Order, screen 5 — 05 / Limit Order

Limit Order • Sell — Order Type, screen 6 — 06 / Order Type

Limit Order • Sell — Limit Order, screen 7 — 07 / Limit Order

Limit Order • Sell — Limit Order, screen 8 — 08 / Limit Order

Limit Order • Sell — Limit Order, screen 9 — 09 / Limit Order

Instant Order

An instant-order alternative.

A compact pair of screens explores instant order entry alongside the default limit-order experience.

2 screens · Swipe or use the arrows · Tap to enlarge

Instant Order — Instant Order, screen 1 — 01 / Instant Order

Instant Order — Order Type, screen 2 — 02 / Order Type

POHL Improvement

Price context, within reach.

The POHL exploration brings additional price context into the order screen.

2 screens · Swipe or use the arrows · Tap to enlarge

POHL Improvement — Instant Order, screen 1 — 01 / Instant Order

POHL Improvement — Instant Order, screen 2 — 02 / Instant Order

Calculator

A calculator in the flow.

The calculator exploration keeps a supporting tool close to order entry.

1 screen · Swipe or use the arrows · Tap to enlarge

Calculator — CALCULATOR, screen 1 — 01 / CALCULATOR

Stock Is Not Available

When a stock cannot be traded.

Suspended and delisted stock states make availability part of the order journey.

2 screens · Swipe or use the arrows · Tap to enlarge

Stock Is Not Available — Order Type, screen 1 — 01 / Order Type

Stock Is Not Available — Order Type, screen 2 — 02 / Order Type

Miscellaneous

The details between the main flows.

Additional order screens explore variations around the core order-entry experience.

2 screens · Swipe or use the arrows · Tap to enlarge

Miscellaneous — Multiple Order, screen 1 — 01 / Multiple Order

Miscellaneous — Multiple Order, screen 2 — 02 / Multiple Order

Multi-Order

Many orders. One place to manage them.

Baskets, instant submit, open and completed orders, cancellation, matched orders, empty states, and expanded panels are explored together.

52 screens · Swipe or use the arrows · Tap to enlarge

Multi-Order — Multiple Order, screen 1 — 01 / Multiple Order

Multi-Order — Multiple Order, screen 2 — 02 / Multiple Order

Multi-Order — Multiple Order, screen 3 — 03 / Multiple Order

Multi-Order — Multiple Order, screen 4 — 04 / Multiple Order

Multi-Order — Multiple Order, screen 5 — 05 / Multiple Order

Multi-Order — Multiple Order, screen 6 — 06 / Multiple Order

Multi-Order — Multiple Order, screen 7 — 07 / Multiple Order

Multi-Order — Multiple Order, screen 8 — 08 / Multiple Order

Multi-Order — Multiple Order, screen 9 — 09 / Multiple Order

Multi-Order — Multiple Order, screen 10 — 10 / Multiple Order

Multi-Order — Multiple Order, screen 11 — 11 / Multiple Order

Multi-Order — Multiple Order, screen 12 — 12 / Multiple Order

Multi-Order — Multiple Order, screen 13 — 13 / Multiple Order

Multi-Order — Multiple Order, screen 14 — 14 / Multiple Order

Multi-Order — Multiple Order, screen 15 — 15 / Multiple Order

Multi-Order — Multiple Order, screen 16 — 16 / Multiple Order

Multi-Order — Multiple Order, screen 17 — 17 / Multiple Order

Multi-Order — Multiple Order, screen 18 — 18 / Multiple Order

Multi-Order — Multiple Order, screen 19 — 19 / Multiple Order

Multi-Order — Multiple Order, screen 20 — 20 / Multiple Order

Multi-Order — Multiple Order, screen 21 — 21 / Multiple Order

Multi-Order — Multiple Order, screen 22 — 22 / Multiple Order

Multi-Order — Multiple Order, screen 23 — 23 / Multiple Order

Multi-Order — Multiple Order, screen 24 — 24 / Multiple Order

Multi-Order — Multiple Order, screen 25 — 25 / Multiple Order

Multi-Order — Multiple Order, screen 26 — 26 / Multiple Order

Multi-Order — Multiple Order, screen 27 — 27 / Multiple Order

Multi-Order — Multiple Order, screen 28 — 28 / Multiple Order

Multi-Order — Multiple Order, screen 29 — 29 / Multiple Order

Multi-Order — Multiple Order, screen 30 — 30 / Multiple Order

Multi-Order — Multiple Order, screen 31 — 31 / Multiple Order

Multi-Order — Multiple Order, screen 32 — 32 / Multiple Order

Multi-Order — Multiple Order, screen 33 — 33 / Multiple Order

Multi-Order — Multiple Order, screen 34 — 34 / Multiple Order

Multi-Order — Multiple Order, screen 35 — 35 / Multiple Order

Multi-Order — Multiple Order, screen 36 — 36 / Multiple Order

Multi-Order — Multiple Order, screen 37 — 37 / Multiple Order

Multi-Order — Multiple Order, screen 38 — 38 / Multiple Order

Multi-Order — Multiple Order, screen 39 — 39 / Multiple Order

Multi-Order — Multiple Order, screen 40 — 40 / Multiple Order

Multi-Order — Multiple Order, screen 41 — 41 / Multiple Order

Multi-Order — Multiple Order, screen 42 — 42 / Multiple Order

Multi-Order — Multiple Order, screen 43 — 43 / Multiple Order

Multi-Order — Multiple Order, screen 44 — 44 / Multiple Order

Multi-Order — Multiple Order, screen 45 — 45 / Multiple Order

Multi-Order — Multiple Order, screen 46 — 46 / Multiple Order

Multi-Order — Order Type, screen 47 — 47 / Order Type

Multi-Order — Order Type, screen 48 — 48 / Order Type

Multi-Order — Multiple Order, screen 49 — 49 / Multiple Order

Multi-Order — Multiple Order, screen 50 — 50 / Multiple Order

Multi-Order — Multiple Order, screen 51 — 51 / Multiple Order

Multi-Order — Frame 1000006502, screen 52 — 52 / Frame 1000006502

New Improvement

Less repetition when managing orders.

Markers, price-to-fill shortcuts, amendment, split orders, max-sell shortcuts, and quick management refine the multi-order experience.

23 screens · Swipe or use the arrows · Tap to enlarge

New Improvement — Multiple Order, screen 1 — 01 / Multiple Order

New Improvement — Multiple Order, screen 2 — 02 / Multiple Order

New Improvement — Multiple Order, screen 3 — 03 / Multiple Order

New Improvement — Multiple Order, screen 4 — 04 / Multiple Order

New Improvement — Multiple Order, screen 5 — 05 / Multiple Order

New Improvement — Multiple Order, screen 6 — 06 / Multiple Order

New Improvement — Multiple Order, screen 7 — 07 / Multiple Order

New Improvement — Multiple Order, screen 8 — 08 / Multiple Order

New Improvement — Multiple Order, screen 9 — 09 / Multiple Order

New Improvement — Multiple Order, screen 10 — 10 / Multiple Order

New Improvement — Multiple Order, screen 11 — 11 / Multiple Order

New Improvement — Multiple Order, screen 12 — 12 / Multiple Order

New Improvement — Multiple Order, screen 13 — 13 / Multiple Order

New Improvement — Multiple Order, screen 14 — 14 / Multiple Order

New Improvement — Multiple Order, screen 15 — 15 / Multiple Order

New Improvement — Multiple Order, screen 16 — 16 / Multiple Order

New Improvement — Limit Order, screen 17 — 17 / Limit Order

New Improvement — Limit Order, screen 18 — 18 / Limit Order

New Improvement — Limit Order, screen 19 — 19 / Limit Order

New Improvement — Limit Order, screen 20 — 20 / Limit Order

New Improvement — Limit Order, screen 21 — 21 / Limit Order

New Improvement — Limit Order, screen 22 — 22 / Limit Order

New Improvement — Multiple Order, screen 23 — 23 / Multiple Order

Limit Order with Open & Done

Open and done, alongside entry.

Order entry is explored with open and completed orders visible in the same experience.

3 screens · Swipe or use the arrows · Tap to enlarge

Limit Order with Open & Done — Tap to Fill Price, screen 1 — 01 / Tap to Fill Price

Limit Order with Open & Done — Open Orders, screen 2 — 02 / Open Orders

Limit Order with Open & Done — Done Orders, screen 3 — 03 / Done Orders

FOK

Fill or Kill · Buy.

The FOK buy screens explore order entry across regular trading, full call auction, pre-opening, and pre-closing contexts.

5 screens · Swipe or use the arrows · Tap to enlarge

FOK — Instant Order, screen 1 — 01 / Instant Order

FOK — Instant Order, screen 2 — 02 / Instant Order

FOK — Instant Order, screen 3 — 03 / Instant Order

FOK — Instant Order, screen 4 — 04 / Instant Order

FOK — Order Type, screen 5 — 05 / Order Type

FOK • Sell

Fill or Kill · Sell.

The corresponding FOK sell flow carries those trading-session states through the sell-side interface.

5 screens · Swipe or use the arrows · Tap to enlarge

FOK • Sell — Instant Order, screen 1 — 01 / Instant Order

FOK • Sell — Instant Order, screen 2 — 02 / Instant Order

FOK • Sell — Instant Order, screen 3 — 03 / Instant Order

FOK • Sell — Instant Order, screen 4 — 04 / Instant Order

FOK • Sell — Order Type, screen 5 — 05 / Order Type

Full Call Auction & Pre-Closing

Trading-session context matters.

The full call auction and pre-closing exploration considers the order page outside a standard trading session.

1 screen · Swipe or use the arrows · Tap to enlarge

Full Call Action & Pre-Closing — Instant Order, screen 1 — 01 / Instant Order

Auto Order

Auto Order · Buy.

The Auto Order buy flow includes full call auction, pre-opening, and pre-closing variants.

5 screens · Swipe or use the arrows · Tap to enlarge

Auto Order — Instant Order, screen 1 — 01 / Instant Order

Auto Order — Instant Order, screen 2 — 02 / Instant Order

Auto Order — Instant Order, screen 3 — 03 / Instant Order

Auto Order — Instant Order, screen 4 — 04 / Instant Order

Auto Order — Order Type, screen 5 — 05 / Order Type

Auto Order • Sell

Auto Order · Sell.

The Auto Order sell flow explores the corresponding session-specific states.

5 screens · Swipe or use the arrows · Tap to enlarge

Auto Order • Sell — Instant Order, screen 1 — 01 / Instant Order

Auto Order • Sell — Instant Order, screen 2 — 02 / Instant Order

Auto Order • Sell — Instant Order, screen 3 — 03 / Instant Order

Auto Order • Sell — Instant Order, screen 4 — 04 / Instant Order

Auto Order • Sell — Order Type, screen 5 — 05 / Order Type

MTL

Market to Limit · Buy.

The MTL buy screens show entry and trading-session variants within the shared order-page structure.

5 screens · Swipe or use the arrows · Tap to enlarge

MTL — Order Type, screen 1 — 01 / Order Type

MTL — Instant Order, screen 2 — 02 / Instant Order

MTL — Instant Order, screen 3 — 03 / Instant Order

MTL — Instant Order, screen 4 — 04 / Instant Order

MTL — Instant Order, screen 5 — 05 / Instant Order

MTL • Sell

Market to Limit · Sell.

The MTL sell flow extends that structure to the sell-side journey.

5 screens · Swipe or use the arrows · Tap to enlarge

MTL • Sell — Order Type, screen 1 — 01 / Order Type

MTL • Sell — Instant Order, screen 2 — 02 / Instant Order

MTL • Sell — Instant Order, screen 3 — 03 / Instant Order

MTL • Sell — Instant Order, screen 4 — 04 / Instant Order

MTL • Sell — Instant Order, screen 5 — 05 / Instant Order

MTL-X

MTL-X · Buy.

MTL-X includes an information state as well as full call auction, pre-opening, and pre-closing variants.

6 screens · Swipe or use the arrows · Tap to enlarge

MTL-X — Order Type, screen 1 — 01 / Order Type

MTL-X — Instant Order, screen 2 — 02 / Instant Order

MTL-X — Instant Order, screen 3 — 03 / Instant Order

MTL-X — Instant Order, screen 4 — 04 / Instant Order

MTL-X — Instant Order, screen 5 — 05 / Instant Order

MTL-X — Order Type, screen 6 — 06 / Order Type

MTL-X • Sell

MTL-X · Sell.

The sell-side MTL-X exploration keeps the additional information and session states in context.

6 screens · Swipe or use the arrows · Tap to enlarge

MTL-X • Sell — Order Type, screen 1 — 01 / Order Type

MTL-X • Sell — Instant Order, screen 2 — 02 / Instant Order

MTL-X • Sell — Instant Order, screen 3 — 03 / Instant Order

MTL-X • Sell — Instant Order, screen 4 — 04 / Instant Order

MTL-X • Sell — Instant Order, screen 5 — 05 / Instant Order

MTL-X • Sell — Order Type, screen 6 — 06 / Order Type

MNL

Market No Limit · Buy.

The MNL buy flow explores another order type within the same interface language.

5 screens · Swipe or use the arrows · Tap to enlarge

MNL — Order Type, screen 1 — 01 / Order Type

MNL — Instant Order, screen 2 — 02 / Instant Order

MNL — Instant Order, screen 3 — 03 / Instant Order

MNL — Instant Order, screen 4 — 04 / Instant Order

MNL — Instant Order, screen 5 — 05 / Instant Order

MNL • Sell

Market No Limit · Sell.

The corresponding MNL sell screens cover the sell journey and its trading-session variants.

5 screens · Swipe or use the arrows · Tap to enlarge

MNL • Sell — Order Type, screen 1 — 01 / Order Type

MNL • Sell — Instant Order, screen 2 — 02 / Instant Order

MNL • Sell — Instant Order, screen 3 — 03 / Instant Order

MNL • Sell — Instant Order, screen 4 — 04 / Instant Order

MNL • Sell — Instant Order, screen 5 — 05 / Instant Order

Limit + Bracket Order • Buy

An order with an exit strategy.

Limit and bracket-order screens explore Robo selection, exit-strategy controls, expanded lists, and selected or deselected states.

12 screens · Swipe or use the arrows · Tap to enlarge

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 1 — 01 / Limit + Bracket Order

Limit + Bracket Order • Buy — Order Type, screen 2 — 02 / Order Type

Limit + Bracket Order • Buy — Robo - 23 Apr 27, screen 3 — 03 / Robo - 23 Apr 27

Limit + Bracket Order • Buy — Robo - 23 Apr 26, screen 4 — 04 / Robo - 23 Apr 26

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 5 — 05 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 6 — 06 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 7 — 07 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 8 — 08 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 9 — 09 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 10 — 10 / Limit + Bracket Order

Limit + Bracket Order • Buy — Limit + Bracket Order, screen 11 — 11 / Limit + Bracket Order

Limit + Bracket Order • Buy — Order Type, screen 12 — 12 / Order Type

Robo Buy

Robo Buy, step by step.

The Robo Buy exploration shows the order-type choices and the screens around automated buy-order setup.

11 screens · Swipe or use the arrows · Tap to enlarge

Robo Buy — Limit + Bracket Order, screen 1 — 01 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 2 — 02 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 3 — 03 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 4 — 04 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 5 — 05 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 6 — 06 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 7 — 07 / Limit + Bracket Order

Robo Buy — Order Type, screen 8 — 08 / Order Type

Robo Buy — Order Type, screen 9 — 09 / Order Type

Robo Buy — Limit + Bracket Order, screen 10 — 10 / Limit + Bracket Order

Robo Buy — Limit + Bracket Order, screen 11 — 11 / Limit + Bracket Order

Robo Sell

Robo Sell, step by step.

The sell-side Robo exploration carries those choices through automated sell-order setup.

13 screens · Swipe or use the arrows · Tap to enlarge

Robo Sell — Limit + Bracket Order, screen 1 — 01 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 2 — 02 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 3 — 03 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 4 — 04 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 5 — 05 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 6 — 06 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 7 — 07 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 8 — 08 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 9 — 09 / Limit + Bracket Order

Robo Sell — Order Type, screen 10 — 10 / Order Type

Robo Sell — Order Type, screen 11 — 11 / Order Type

Robo Sell — Limit + Bracket Order, screen 12 — 12 / Limit + Bracket Order

Robo Sell — Limit + Bracket Order, screen 13 — 13 / Limit + Bracket Order

POHL Improvement

Another view of price context.

An additional POHL iteration documents a further variation of the order-screen treatment.

1 screen · Swipe or use the arrows · Tap to enlarge

Compact Order Pop-Ups

Order controls in a compact pop-up.

Compact buy, filled, open-order, price-editing, split-lot, and reduce-lot states bring the same trading tasks into a smaller surface.

24 screens · Swipe or use the arrows · Tap to enlarge

PREVIOUS PROJECT

Web Trading

NEXT PROJECT

Back to CV