Lana Nguyen.OPEN TO NEW ROLES →
← WORK / PROTOTYPE

Independent product design · 2026

Tenet: a pause before
the next trade.

Tenet brings a trader’s own rules into the broker’s order review. When an order triggers a rule, the overlay explains the hold and offers clear ways to continue or cancel.

Try an order hold ↓
ROLEProduct & interaction design
Usability testing · UX writing
SCOPETrading overlays and a companion app, on mobile and desktop
STATUSEarlier flow tested in two rounds; UI revised afterward
TOOLSHTML, CSS, JavaScript
AI-assisted coding

Know the rule.
See the choice.

The trader is about to submit 12 contracts, but a five-contract cap and a nine-minute cooldown apply. Tenet holds the order so the trader can review these rules and choose what happens next.

Inside the interaction

Following both rules reduces the order to five contracts and starts the nine-minute wait. The trader then reviews the order before confirming submission.

Fictional broker and sample order. The countdown runs in real time; skip the wait to explore the next step.

Interactive screen · try the controls

01 / The moment

The rule was chosen earlier.
The decision is happening now.

I used a scenario in which a trader prepares a larger order after several losses. A limit chosen on a calmer day can be easy to forget when the next trade is one gesture away.

I focused on the moment of submission: make the order’s status clear, explain the rules that apply, and leave the trader with distinct ways to continue or cancel. The companion gives those rules a place to be written and reviewed.

Before tradingSet the rule
At submissionResolve the hold
After the decisionReview the record

The examples cover both shares and options.

02 / Study & retest

Ease ratings didn’t tell
the whole story.

I moderated six remote sessions with weekly retail traders, then tested revisions with five new participants. Both rounds used simulated orders, with the nine-minute wait shortened to about nine seconds for the sessions. I compared actions, explanations and ease ratings to understand whether the controls produced the decisions traders intended.

Both testing rounds used the earlier interface. The example below includes refinements from those rounds; the next section shows the visual redesign.

View the interface before the visual refresh
This version includes refinements from both rounds of usability testing.
01

Give quantity and wait equal weight

When an order triggered a size cap and cooldown together, two participants described only the wait; one expected automatic sending afterward. All six eventually understood that nothing had been sent. I gave the quantity change and wait equal emphasis, followed by an explicit review reminder.

02

Cancel an increase without lowering the current limit

In the earlier prototype, the task started with a limit of 4 contracts and an increase to 5 scheduled for the next market open. Three participants pressed minus to cancel that increase. The control also lowered the current limit to 3, instead of keeping it at 4. All three rated the task 5/7 for ease. I added a separate “Cancel pending increase” action that keeps the current limit unchanged.

03

Name the exit’s destination

Two participants interpreted the override sheet’s cancel label as cancelling the order. I tested “Back” instead, keeping order cancellation as a separate action.

Retest / 5 new participants

Check the resulting state.

No participant unintentionally changed the active cap. All five explained both reducing the order to five contracts and waiting nine minutes. One still interpreted “Back” as cancelling the order.

I added the destination after the retest. The current sheet reads “Back to held order.” The broader visual refresh followed both study rounds.

The lesson was to check the final setting and explanation alongside completion and ease ratings.

03 / Visual refresh

Less to read.
More structure to see.

In the previous prototype, rule wording, activity and controls competed with the decision at hand. I reorganized the screens to keep the order status and consequences prominent, with supporting detail available through clearly labeled controls.

One hold. Two visible consequences.

When a trader attempts to submit an order that triggers both rules, “Held · nothing sent” appears at the top of the overlay. Separate size and cooldown cards explain both consequences before one combined action: reduce to five contracts and wait nine minutes.

The broker header retains the instrument and expiry so the trader can identify the order. Selecting “Why?” reveals the rules and the activity that triggered them.

Each exit does one thing.

Selecting “Override both rules” opens a reason field before a separate order review. “Back to held order” closes that step while keeping the order held. “Cancel order” ends the order without sending it.

I chose a recorded reason and a separate review instead of a long press. These steps ask the trader to explain the override and review the order before sending it.

Look at the change

The previous screens show the prototype after both study rounds. The revised screens below came afterward.

Rules: scan the trigger, open the detail

In the previous Rules screen, each card displayed the trader’s wording, usage, rationale and controls together. The revised list starts with a short trigger summary. Opening a rule reveals its settings, while separate controls provide access to the original wording and History.

Previous UIAfter the study rounds
Current UIInteractive · try the controls
Order hold: see both consequences

In the previous overlay, the held status, order quantity and wait appeared across several rows. The revised overlay groups the size and cooldown cards above their combined action. After the wait or an override, the trader reviews the order before confirming submission.

Previous UIAfter the study rounds
Current UIInteractive · try the controls
Home: follow the summary into the record

The previous Home screen included an illustrative estimate of losses avoided. I replaced it with a summary that opens the underlying decision records. Selecting a followed or overridden count opens History. Selecting a pattern opens its summary, with an action to inspect the underlying events.

Previous UIAfter the study rounds
Current UIInteractive · try the controls

A consistent visual language

◆ TENET

A recognizable layer across broker screens.

Tenet appears inside both a dark mobile broker and a light desktop workspace. I kept its colors, type and component structure consistent so the trader can distinguish their own rule controls from the broker’s order controls.

Color has a specific job.

Navy / Tenet surfaces
Deep navy backgrounds, lighter cards and raised selected states separate the page, its content and the current choice. These layers stay consistent across the hold, Rules and History.
Gold / emphasis and actions
Gold draws attention to rule values, held status and active controls. Filled primary buttons stand apart from outlined override and cancel controls, so emphasis also comes from shape.
Sage / followed decisions
Sage pairs with the “Followed” label to distinguish completed rule actions in History and recent activity.

Two typefaces, distinct roles.

Plus Jakarta Sans

I kept the proportional sans serif for product headings, action labels and explanations. It gives longer rule descriptions a different texture from the numeric trading data.

IBM Plex Mono

Fixed-width characters align quantities and timestamps. In the desktop countdown, they keep the timer’s width steady as the digits change.

Spacing follows the decision.

The overlay places status first, then the two consequence cards, then the actions. Shared padding and gaps group related information, while larger breaks separate the choices. Icons retain text labels, so color and symbols reinforce the words.

04 / Companion app

A place to set the rules
and look back.

Traders create and adjust rules in the companion before returning to the broker. Home summarizes recent decisions, Patterns opens the events behind an observation, and History keeps the order details and reasons available for later review.

Explore the companion.

Choose a screen to try it and read the design decision behind it.

Interactive screen · try the controls

Edit the limit, then save.

Open Size cap, edit the limit, then save. The saved limit applies to the next order.

All counts, events and patterns are illustrative.

Creating a rule

From an intention
to an explicit condition.

When creating a rule, the trader chooses its trigger, the instruments it covers and the resulting action. The review step brings these choices together before saving.

Moving between screens preserves the draft. The builder checks for matching rules before saving. Saved changes apply from the next order.

As finding 02 describes, the earlier design delayed increases until the next market open to discourage raising a limit during a trade. I simplified that interaction to edit and save for the next order. Saving applies the new limit to future orders. An already-held order keeps its original settings and still requires review before sending.

05 / Desktop

Keep the market in view.
Give the decision its own space.

In the desktop example, a trader attempts to submit a short order for 10 SPY shares. The order is within the 25-share cap, but three earlier losses trigger the nine-minute cooldown. The broker keeps the chart, quote and closed trades beside the held order.

I display the passing size check as supporting information and give the cooldown more emphasis. After the wait, the quote refreshes and the trader reviews the order before confirming submission.

Only the cooldown applies. Explore at full size ↗
Explore the desktop companionThe same rules, with room for context

A rule list sits beside its settings; a History event sits beside its notes. Labels and rule behavior stay consistent with mobile.

Desktop Rules. Explore at full size ↗

Where Tenet would connect

The proposed broker integration checks an order before it is sent. Tenet resolves the trader’s rules; the broker owns the current quote, final confirmation and execution.

A changed order would be checked again. A stale quote would require a fresh review. If the connection dropped while an order was held, it would stay unsent, with a clear unavailable state and a way to cancel. Other broker activity would remain available.

What I take forward

Check what changed,
not just what felt easy.

The cap task changed how I evaluate a flow: I now check the final setting and the trader’s explanation alongside completion and ease ratings.

Next projectMorsel