>_ aaditya
GitHub

Academic · Design

Designing an options trading UI for beginners (CS615 project)

· · AcademicDesignOptions

In December 2021, at the end of my first semester in the M.S. Computer Science programme at UMass Boston, I submitted my project for CS615 User Interface Design. The brief was open: pick a real problem where the interface is the obstacle, design a solution, and justify every decision. I picked options trading, because by then I had spent two years building option chain tooling for people who already understood options, and I had watched beginners bounce off the same screens.

The result is umbtrading: a clickable prototype hosted on GitHub Pages, plus a project site that documents the design process. This post is about the thinking behind it rather than the grade.

The problem

A standard option chain is a dense grid. Calls on the left, puts on the right, strikes down the middle, and a dozen columns of numbers per side: last price, change, bid, ask, volume, open interest, implied volatility. It is an efficient layout for a professional. For someone who has never traded an option it is a wall of numbers with no indication of what any of them mean or what to click first.

The consequence is that new traders either avoid options entirely or trade them without understanding what they bought. Neither is good. The interface is doing the gatekeeping, not the concept, and the concept of a call or a put is not actually that hard.

Design goals

I wrote down three goals before sketching anything, and I kept checking the prototype against them.

  1. Make placing an options trade easier. A beginner should be able to go from "I think this stock will go up" to a sensible order without reading a glossary first.
  2. Simplify learning. Concepts like strike, expiry and premium should be introduced where they are used, one at a time, not in a separate tutorial.
  3. Learn through the interface. The screen itself should teach. Every choice the user makes should show its consequence immediately, so the feedback loop is the lesson.

What I built

The core idea is a guided screen that replaces the grid with a sequence of questions. Instead of presenting every strike and expiry at once, the interface asks what the user expects to happen, by when, and how much they are willing to risk, and only then shows the small set of contracts that fit. The full chain is still available behind an "advanced" toggle, but it is not the starting point.

Step 1: direction

The first screen asks one thing: do you think the price will go up, go down, or stay flat? Three large buttons. This maps directly to the basic strategies (buy a call, buy a put, sell premium) without ever using those words up front. The word appears after the choice, with a one-line explanation.

Step 2: timeframe and target

The user drags a target price on a simple chart and picks a horizon from a short list of expiries. The interface translates that into a strike and an expiry and says so in plain language: "You are choosing a call at 180 expiring on 17 Dec."

Step 3: the payoff picture

Before confirming, the user sees a payoff diagram for the position: profit and loss on the vertical axis, underlying price on the horizontal. Maximum loss is labelled in currency, not as "premium paid". Changing the strike moves the chart live. This is the screen that does the teaching.

How the prototype works

The prototype is deliberately low tech: static HTML, CSS and a small amount of JavaScript, served from GitHub Pages so reviewers could click through it without installing anything. The data is fixed sample data. A design course project should test the interaction, not the market feed.

The guided flow is a set of panels toggled by a step index. Keeping it this simple meant I could change the order of steps in minutes when a test session suggested it.

js/flow.js
const steps = ['direction', 'target', 'payoff', 'confirm'];
let current = 0;

function show(i) {
  steps.forEach((id, n) => {
    document.getElementById(id).hidden = n !== i;
  });
  // progress text doubles as orientation for the user
  document.getElementById('progress').textContent =
    `Step ${i + 1} of ${steps.length}`;
  current = i;
}

document.querySelectorAll('[data-next]').forEach(btn =>
  btn.addEventListener('click', () => show(current + 1)));

The payoff chart is the only real computation. For a long call, profit at expiry is the greater of zero and price minus strike, less the premium paid. I evaluate that across a range of prices and draw the line on a canvas. The same function with a sign flip covers puts and short positions.

js/payoff.js
// profit per share at expiry for a single long option
function payoff(type, strike, premium, price) {
  const intrinsic = type === 'call'
    ? Math.max(0, price - strike)
    : Math.max(0, strike - price);
  return intrinsic - premium;
}

function series(type, strike, premium, lo, hi, n = 60) {
  const out = [];
  for (let i = 0; i <= n; i++) {
    const p = lo + (hi - lo) * i / n;
    out.push({ price: p, pnl: payoff(type, strike, premium, p) });
  }
  return out;
}

The labels on the chart are generated from the same numbers, so "Max loss: $120" is never out of sync with the line. That consistency mattered more than the visual polish; a beginner who notices the text and the picture disagree stops trusting both.

Design decisions I would defend

What I learned

I still think about this project when I build trading tools. The grids I build for myself are dense on purpose, but the question "what would a first-time user click here" has made every one of them better.

Source and prototype on GitHub >