Skip to main content
UI Coach Logo
Back to challenges
Hard

First Stock Order Ticket

Design a stock trading flow that helps a new investor place and monitor one transparent market or limit order.

Responsive web, Mobile

The brief

Understand the problem

Background

Trading interfaces compress price movement, order types, buying power, fees, and market status into a consequential action. New investors need context without promotional pressure or implications of guaranteed gains.

User context

Jon has funded a brokerage account and researched one exchange-traded fund. He wants to invest a fixed amount, compare order types, and understand why the final execution price may differ.

Product problem

An order ticket must remain efficient for informed users while making price uncertainty, risk, and state transitions legible to a first-time trader.

Objective

Create security review, order construction, confirmation, and execution tracking for a single buy order.

What to design

Define the experience

Required experience

  • Review delayed or live market data and instrument details
  • Choose quantity, order type, limit, and duration
  • Check estimated total and available funds
  • Confirm the order and follow open, partial, filled, or canceled states

Screens and states

  • Security overview
  • Order ticket
  • Order review
  • Order status

Core user flow

Follow the critical path

  1. 01

    Jon checks the fund price, market status, and risk summary

  2. 02

    He compares a market order with a day limit order

  3. 03

    He sets a limit and reviews the maximum estimated cost

  4. 04

    The order partially fills and he chooses whether to leave the remainder open

Product rules

Requirements and constraints

Requirements

  • Timestamp price data and state whether it is delayed
  • Explain order types in the context of the entered values
  • Show fees, estimated total, buying power, and key risk disclosures before confirmation
  • Represent pending, partial, filled, rejected, expired, and canceled states

Constraints

  • The flow cannot frame trading as guaranteed profit
  • Required suitability and account restrictions must be enforced
  • Orders need a final explicit confirmation

Reality check

States worth considering

The market closes during review
Price moves beyond buying power
The instrument is halted
The order is only partially filled

Finish line

What to deliver

  • Four responsive screens plus annotated order-state behavior

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#1C1B19
#C7B89F
#649853
#735D5F
#87759D
Font pairing
SpectralKarla

Spectral & Karla

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations