Skip to main content
UI Coach Logo
Advanced

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, Mobile4 hours plus

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.

Font pairing
SpectralKarla

Spectral & Karla

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

Icons
Illustrations

Keep practicing

Advanced
Fintech

Guided Portfolio Rebalance

Design an investment review that proposes a diversified rebalance and requires informed approval before any order.

Responsive web4 hours plus
Data VisualizationTrust and Safety
Advanced
Fintech

Investment Portfolio Risk Explanation

Design a portfolio view that explains concentration, volatility, time horizon, and scenario uncertainty without giving personal investment advice.

Responsive web2 to 4 hours
Data VisualizationContent Design
Intermediate
Fintech

Personal Finance Dashboard

Design a calm financial overview that connects spending, upcoming obligations, savings progress, and account health to useful next steps.

Responsive web2 to 4 hours
Dashboard DesignData Visualization
Intermediate
Fintech

Shared Bills and Household Payments

Design a bill workspace that tracks household costs, splits responsibility, and makes upcoming payments clear to roommates.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Intermediate
Fintech

Subscription Renewal Control

Design a subscription dashboard that reveals upcoming charges, price changes, and cancellation steps before money leaves an account.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Advanced
Fintech

Freelancer Tax Estimate Workspace

Design a tax preparation dashboard that organizes income and expenses, explains estimates, and highlights records needing review.

Desktop web4 hours plus
Dashboard DesignData Visualization