Secured Finance — On-Chain Bond Markets

Secured Finance — Product Design

H5

One designer. Full product scope. Advanced Trade to Simple Trade. Portfolio management to campaign UI. Every surface built for a dual audience: TradFi professionals who know fixed income and DeFi natives who don't.

Work was delivered ticket-by-ticket in an engineering-sprint model across the full trading lifecycle — from order entry to post-trade execution to portfolio risk management. Direct Figma-to-dev handoff on each ticket.

Advanced Trade Terminal — Full trading interface. Ticker bar, K-Line chart, Yield Curve, Order Book, order panel, position table.

Simple Trade — Swap-style bond entry for newcomers. One screen, one action.

Portfolio Management (SF-1077) — Bond lifecycle calendar, bond cards with LTV, Portfolio Health Card with collateral and leverage gauges.

ZC Bond Tokenization (SF-683 + SF-1103 + SF-1077) — Fungible zero-coupon bond tokens in the portfolio view. New ZC tagging system.

Trade Execution & Post-Trade (SF-1219) — Full decision tree from order placed to fill, partial fill, expiry, and closed trade.

Trade Detail Tab (SF-1078) — In-table order detail panel: Active Positions, Open Orders, Trade History, Order History.

Itayose Optimisation (SF-1116 + SF-1126) — Price discovery auction UX. Navigation flow, countdown timer, aggregated order book.

Unwind Snackbar (SF-1248) — Modal + snackbar notification system for position unwinding.

Navigation & Search (SF-787, SF-1189, SF-1190) — Global nav, wallet dropdown, search dropdown, global positions switch.

Campaign & Points Dashboard — Campaign flow (Stage 1 + Stage 2), Points Dashboard V1 + V1.1, mobile landing page.

Stablecoin Vault — USDC vault interface.

UI Optimisation (SF-611, SF-1130, SF-1225, SF-1247) — Error states, modal standardisation, confirmation UI, trading epic.

01 — Advanced Trade Terminal

H5

The Advanced Trade redesign restructures the full trading terminal around three zones that mirror how an institutional fixed income trader actually reads a screen.

Top ticker bar: A horizontal scroll of available bond pairs — WBTC-MAR2024, AXLFIL-JUN2024, FIL-GEP2024, FIL-DEC2024, ETH-DEC2024 — each showing APR%, 24h price change, and 24h change percentage. Users can jump between bonds without navigating away from the terminal. The active bond (FIL-JUN2024) is highlighted.

Left — Chart area: Two tabs: Historical Chart (K-line candlestick with timeframe selector: 5M, 15M, 30M, 1H, 1D, 7D, 1MTH) and Yield Curve (plotted across maturities). Below the chart: volume indicator. The chart zone communicates market context without requiring the user to leave the order entry surface.

Centre — Order Book: Price, APR, and Total Amount columns showing bids and asks in yield-denominated terms. APR is the primary column — because that is how fixed income traders read a market. A "Recent Trades" tab sits alongside the Order Book for transaction history.

Right — Order Panel (Land/Buy + Borrow/Sell): Two main tabs for trade direction. Inside: Limit and Line tabs for order type. Inputs: Bond Price (shows mid-market: 95.77 Mid), Fixed Rate (APR), Size in base asset (FIL). Below inputs: Current Position, Fixed Rate (APR) 25.22%, Present Value, Future Value, Fees (0.25%). Primary CTA: Place Order. Below the fold: Liquidation Risk gauge (Low) — always visible.

Bottom — Position Table: Four tabs: Active Positions, Open Orders, Order History, Trade History. Columns: Symbol, Type (Lend/Borrow badge), Time to Maturity, Mark Price, APR%, Present Value, Future Value (in both asset and USDC), Actions (Add/Reduce/Close). Show All Positions toggle for global multi-maturity view.

Circuit breaker: Tooltip surfaces when a circuit breaker is triggered on a specific bond — a non-obvious DeFi-native concept that TradFi users understand but that needed clear in-context explanation.

Mobile breakpoints: Chart view, order entry, position details, and full page — four mobile variants maintaining full functionality.

Key change from old terminal: Combined asset name and maturity into a single header, reduced chart height to fit 1024px standard desktop, moved template/advanced tab, added favourites bar, added currency selector (native / USD), made FV visible inline, added Recent Trades tab for global transaction history.

02 — Portfolio Management

H5

Fixed income positions have defined lifecycles: collateral in, bond issued, maturity reached, collateral returned. The portfolio surface had to communicate that timeline — across multiple concurrent positions, in multiple assets — in a way no existing DeFi portfolio pattern was built for.

Bond Card (per-asset): Each asset (WBTC, ETH, USDC, FIL) gets its own bond card. The card shows:

• Collateral Value and Loan Value (in both native asset and USDC equivalent)
• APR for the position
• Bond Usage gauge — a dial showing current Loan-to-Value percentage
• Per-maturity breakdown: 3-month, 6-month, 12-month, 24-month issues each shown with their expiry date
• Liquidation warning alert when LTV approaches 80%: "Your Loan-to-Value ratio is reaching the maximum level of 80% and liquidation may occur soon. Please deposit more collateral or reduce your Borrow amount."
• Deposit / Withdraw tab pair for collateral management
• "Expand to see bond details" accordion for full position breakdown

Portfolio Health Card (right panel): The permanent risk status module, always visible:

• Portfolio Value chart (line, historical) with USDC denomination selector and year filter
• Portfolio Holdings: two donut charts — Collateralised Assets (showing WBTC/USDC/ETH by percentage and amount) and Non-collateralised Assets (FIL)
• Leverage section: Collateral Usage gauge (60% Loan to Value shown), Liquidation Risk label (Medium)
• Contextual guidance on Liquidation Risk Medium: "Your loan to value is now at 60%, consider: 1. Deposit cash collateral, 2. Reduce your borrow position(s), 3. Create a lend position"
• Zero-Coupon Bond Usage: four asset gauges (WBTC 80%, ETH 50%, USDC 25%, FIL 50%) with a live liquidation alert when any gauge enters the critical zone

Four tabs: Bonds (Lend), Loans (Borrow), Cash Reserve, and the balance sheet view.

Key decisions: The liquidation risk alert cannot be dismissed — it stays visible until the user takes action. In fixed income, a missed liquidation is a material financial loss. The design enforces that urgency at the UI level.

03 — Trade Execution Flow For Lending Orders

A distinct feature user flow that takes the user through lending out their digital assets on Secured Finance as collateral.

What it solves: Setting up the lending (and borrowing) flow ensures that users have ample feedback throughout the lending process and are able to collateralise their assets securely and receive zero-coupon bonds as a result.

04 — Post-Trade Execution

Every order placement in a fixed income protocol can result in one of seven distinct outcomes. Each outcome looks different in the terminal. The SF-1219 work maps and designs all of them.

Decision flowchart: A branching logic diagram at the top of the design file documents the order lifecycle from placement through to final state — covering the key branch points (partial fill? filled? expired? closed?) before any screen was designed.

Seven order states designed in full:

Placed Order — Order submitted, awaiting matching. Table row highlighted. Status badge visible.

Partially Executed Order — Order partially filled. Two rows visible: the filled portion and the remaining open portion. Distinct badge treatment.

Open Order — Active unmatched order. Sits in Open Orders tab with cancel option.

Expired Order — Maturity passed without fill. Distinct expired badge. Auto-moves to Order History.

Filled Order — Fully matched. Moves from Open Orders to Active Positions tab. Position row appears with full bond parameters.

Partially Filled Order — As above but with a partial fill note and remaining cancelled portion.

Closed Trade — Position manually closed or matured. Moves to Trade History tab.

Each state is shown as a full-terminal screenshot with the relevant row highlighted and the position table in the correct tab context — so engineers can see exactly where each state surfaces in the UI without needing to guess.

Status: Design WIP at handoff.

05 — Trade Detail Tab

The Trade Detail Tab is the in-table panel that opens when a user clicks on an order row — surfacing the full order specification without navigating away from the trading terminal.

Four tabs: Active Positions (edit/reduce actions), Open Orders (cancel option, fill status), Trade History (completed transactions with timestamps), Order History (all orders including cancelled).

Acceptance criteria:

• User can view different tabs: Active Positions, Open Orders, Trade History, Order History
• User can see when they place an order, that the order can be seen in real time on the Trade Detail panel
• Move from Open Orders → filling → Active Positions (and other edge cases)
• Order history: post-trade execution flows, link to etherscan

Instance coverage: Active positions (edit/reduce states), open orders (default, filling, filled, cancelled states), order history (post-fill to etherscan link).

Status: Design Done.

06 — Itayose Optimisation

Itayose is a call auction price discovery mechanism used at bond opening — where all orders placed before a deadline are matched at a single clearing price. It is a standard concept in fixed income markets but has no DeFi equivalent. The UX challenge was making it legible to both audiences.

Issues identified through the optimisation sprint:

• No clear user flow from the main Trading page to Itayose — users didn't know it existed
• Users didn't understand the market name or what actions were expected during Itayose
• Countdown timer for Itayose on the main trading page existed but the Itayose page and main trading page were not linked or communicated clearly
• Order book showed individual orders when it should show aggregated total amounts
• "CB Limit" label was unclear — should be "Orders + CB in parentheses"
• Needed a switch or tab for users to move between default and Itayose view
• Dropdown to select date for Itayose was unnecessary and removed

Changes implemented:

• Itayose page redesigned with clear countdown timer in the left column, order entry in the right, and the aggregated order book centre
• Switch/tab added to move between default order book view and Itayose view
• Order book column changed to show Total Amount (aggregated), not individual orders
• Main trading page updated to surface the Itayose countdown clearly when relevant
• Mobile: Itayose view adapted for the trading terminal mobile breakpoint

Status: Design Done.

07 — Unwind Instances

Problem: When a user places an order on the opposite side of an existing position (e.g., placing a Borrow order when they have a Lend position in the same bond), the protocol automatically unwinds the existing position. The previous implementation gave no notification — users were surprised when their position disappeared.

Solution: A two-step notification system:

Step 1 — Modal: Before the order is submitted, a confirmation modal appears: "Unwind Position?" — explaining that placing this order will close the existing position. Users can confirm or cancel. This is the intervention point where users can reconsider.

Step 2 — Snackbar: Once confirmed and order submitted, a snackbar notification appears in-context: "Your position is being unwound." Non-blocking, auto-dismisses, bottom of screen.

Four-screen flow designed: Main terminal (existing position visible in table) → Modal trigger (user places opposite-side order) → Confirmation modal → Terminal + snackbar notification (position unwinding in progress).

Status: Design in Progress at handoff.

08 — Navigation & Search

Global navigation: Persistent top bar — Trading · Markets · Portfolio · Campaign/Points · More. Points balance (369.3K Points) displayed inline in the nav for users participating in the points programme. Wallet connect CTA in top right, notification bell, settings icon.

Wallet dropdown (SF-1189): Redesigned wallet menu surfacing: wallet address (abbreviated), connected network, asset balances, and quick-action CTAs for Deposit and Withdraw. Disconnected state shown with a clear connect prompt.

Search dropdown (SF-787, desktop + mobile): Bond search by asset name or maturity. Each result surfaces APR and maturity date inline — the two parameters a fixed income trader needs before clicking. Desktop: dropdown below the search field. Mobile: full-screen takeover on tap, with a keyboard-up optimised layout.

Global positions switch (SF-1190): A toggle in the position table that shows or hides positions across all maturities simultaneously. For users with many active positions across multiple bond terms, this collapses the table to only the active context. Essential for traders managing portfolios across the full yield curve.

Tag permutations: Bond type tags — Lend, Borrow, Roll, Itayose — with distinct colour treatment and consistent usage across position table, order book, and trade history. All permutations documented.

09 — Campaign & Points Dashboard

Campaign flow (Stage 1 + Stage 2): Full user flow diagram mapping the campaign lifecycle: campaign meta-landing page → Campaign Page #1 (Core Fuelling) → deposit page → leaderboard. Each stage has its own screen with distinct UI, copy, and mechanics documented.

The flow diagram also captures: point accumulation logic per action (deposit points, limit order points, active position points, referral points), the "Is the user logged in?" branch at campaign entry, and the share/referral mechanic at the leaderboard.

Points Dashboard V1: Hero section with five live on-chain metrics — Generated Points, Participants, TVL, Volume, and Transactions — all pulling directly from protocol state in real time. Five tabs: Leaderboard, Rates and Boost, Referrals, FAQs. Leaderboard table: Rank, Address, Total Points broken down by category (Deposit Points, Limit Order Points, Active Position Points, Referral Points, Other Points). Top 3 rows highlighted in gold/silver/bronze.

Points Dashboard V1.1: Iterated version with updated layout and improved tab structure.

Campaign landing page (mobile): Fully annotated with component-level engineering notes covering animation triggers (the space/cosmos animated hero), scroll behaviour, and interactive state requirements for the "Join" CTA.

Deposit campaign stage 1 (desktop): The deposit step within the campaign flow — showing the deposit form with campaign context (points to be earned visible pre-confirmation).

10 — Stablecoin Vault

A dedicated vault interface for USDC/stablecoin deposits — a simpler surface than the full trading terminal for users who want fixed yield on stablecoin positions without engaging the full bond order mechanics. Single-page design: deposit amount, expected APR, maturity selection, confirm.

11 — UI Optimisation Tickets

Continuous improvement tickets delivered alongside major feature work. Each scoped, designed, and handed off individually:

Yield Curve Chart: The yield curve chart shows bond yield differentials for traders to understand the spreads and how to trade them

Secured Finance — Design System

Built from zero to three layers across the engagement. Atoms → Molecules → Organisms. Every component calibrated for a trading-grade interface serving two audiences simultaneously.

The SF design system was not a cosmetic exercise. A fixed income trading interface has more component states than a standard DeFi product — every order parameter has a filled, empty, error, and disabled state; every position has a healthy, at-risk, and liquidation state; every alert has an info, warning, error, and success variant. The system had to be built to that level of completeness from day one, or the product would accumulate design debt faster than it shipped features.

Two Figma files structure the system: SF Design System.fig (the canonical component library) and Refine UI.fig (the active UI work file, connected to the design system via Figma libraries).

Atoms

The atomic layer establishes the smallest reusable units everything else is built from.

Colours: The SF colour palette is dark-mode first — a deep navy (#0A0F1E range) with a blue-purple accent, green for positive/lend states, red for negative/borrow/liquidation states, and amber for warnings. Colour is semantic throughout: every use of red means risk or loss, every use of green means safe or gain. This is non-negotiable for a trading interface where colour is a communication medium, not a decoration.

Typography — Desktop: Established type scale for the trading terminal: headline sizes for position values and APR metrics, body sizes for order parameters and table data, caption sizes for timestamps and secondary labels. Numeric values use tabular figures throughout for alignment in tables.

Typography — Mobile: A condensed mobile type scale maintaining readability at smaller sizes while preserving the information density required for the trading context.

Buttons: Primary (filled, brand colour), Secondary (outlined), Ghost (text-only), Destructive (red fill for irreversible actions). All states: default, hover, active, loading, disabled. Icon-only variants for icon-button patterns in the navigation and order panel.

Checkbox: Used in the order confirmation flows and filter selectors. All states: unchecked, checked, indeterminate, disabled.

Chips: Bond type classification chips (Lend, Borrow, Roll, Itayose, Stablecoin). Each chip has a distinct colour treatment and is used consistently as a tagging system across the order book, portfolio, and trade history.

Switch: Toggle component used for Simple/Advanced mode switching and the global positions toggle (SF-1190).

Molecules

Molecules combine atoms into the repeatable interface patterns a trading product uses daily.

Alerts: Four variants (info, warning, error, success) in two layouts: inline banner and dismissible overlay. Used across: chain mismatch warnings, liquidation risk alerts (SF-611 error state), circuit breaker notifications, and post-action confirmations. Alert content is two-part: an icon + headline, and a supporting body line with optional CTA.

Modals: Standardised modal structure (SF-1225) with header, body, and footer action zones. Confirmation modals for order placement, position modification, and collateral adjustment all use the same modal shell with different content. Size variants: standard (400px) and wide (600px) for complex confirmation flows.

Snackbars: In-context notification system for non-blocking events. Used for: trade unwinding confirmation (SF-1248), post-trade toast, and system status updates. Snackbar has auto-dismiss timing and a manual dismiss X. Position: bottom-right on desktop, bottom-centre on mobile.

Tabs: Underline tab variant used throughout — Lend/Borrow on the order panel, Historical/Yield Curve on the chart, Bonds/Loans/Cash Reserve in the portfolio, Leaderboard/Rates/Referrals/FAQs on the campaign page. Tab component includes active state, hover state, and disabled state.

Input: Numeric input with integrated currency label and max button. Used in the order panel (amount, fixed rate, bond price), the search field, and the collateral input. States: empty, filled, focused, error (out-of-range value), disabled.

Organisms

Organisms are the large, composite components that constitute the primary surfaces of the product.

Order Book: The most complex organism in the system. Displays bid and ask orders in yield-denominated terms (APR column primary, price secondary). Columns: Price, APR, Total Amount. Bid orders (green) stack from the spread upward; ask orders (red) stack downward. The spread is displayed as a single line between the two sides with the current market APR. Grid/list toggle for display density. Real-time updates on order book fill.

Trade Table: Position and order management table used in four contexts: Active Trades, Open Orders, Trade History, and the Itayose tab. Columns vary by context but core columns are consistent: Type (Lend/Borrow), Contract (bond identifier), Maturity, FV (future value), PV (present value), Market Price, Actions. Sortable columns with directional arrows. Pagination with 10/25/50 rows per page options.

Navigation: The global navigation organism covering: logo, primary nav links (Trading, Markets, Portfolio, Campaign/Points, More), wallet connect button, points balance display, notification bell, and settings. Responsive: on tablet and mobile, the primary nav collapses to a hamburger. The wallet dropdown is a sub-component of the navigation organism with its own state machine (connected, disconnected, loading).

Developer Handoff

All design files were built with engineering handoff as a first-class output, not an afterthought:

• Named components with consistent naming convention across Figma and developer documentation
• State completeness — every interactive element delivered with all states specified (not just the happy path)
• Annotation layer — design files include an annotation layer with spacing values, colour tokens, and interaction notes directly on frame
• Responsive specs — desktop, iPad, and mobile breakpoints specified for all major surfaces
• Figma inspect — all components published to the Figma library and accessible via Figma inspect for CSS value extraction

The Responsive Designs file (Post-Mainnet Launch, 13-04-24) documents all post-launch responsive refinements as a single reference.

Secured Finance — UX Research

Every major product decision was anchored in competitive evidence. Before any interface was designed for Secured Finance, the DeFi lending landscape was mapped in full — to find where existing patterns broke down on fixed income mechanics, and where the gaps were that a Bloomberg-style interface could fill.

Research covered two tracks: broad DeFi frontend competitor analysis across six protocols, and deep LQTY-specific UX research examining one of the most sophisticated DeFi lending interfaces in production.

01 — DeFi Frontend Competitor Analysis

[Add screenshots here]

Six DeFi lending and borrowing protocols were analysed in full before the Secured Finance interface architecture was finalised. Each was examined for information hierarchy, order entry patterns, position management, and how — or whether — they communicated yield in a way that a fixed income professional would recognise.

borrowcrypto.online (6 slides)

A crypto-collateralised lending interface with a relatively simple UX. Examined for: how it presents lending rates vs. borrowing rates, how collateral ratio is communicated, and how position health is surfaced. Finding: hides liquidation risk behind a single percentage number with no contextual threshold indicator. Users have to know what a "safe" ratio is without being told.

eth.liquity.fi (6 slides)

Liquity's main interface for LUSD-backed loans against ETH. Examined for: trove management UX, redemption flows, stability pool mechanics, and how it handles the protocol-level complexity (stability pool, redemption risk, trove ordering) without overwhelming users. Finding: strong progressive disclosure on trove creation, but the stability pool and redemption mechanisms are under-explained at the surface level.

freely.Finance (5 slides)

A DeFi lending aggregator interface. Examined for: multi-protocol APY comparison, position aggregation across protocols, and how it handles the complexity of routing a user to the optimal rate without requiring them to understand the underlying protocol mechanics. Finding: good at comparison but weak at explaining why one rate is better than another.

DeFi Saver (8 slides)

The most sophisticated interface in the analysis set. DeFi Saver’s automation and leverage management tools were examined for: how it communicates position health, leverage ratios, and automated strategy parameters to an advanced user. Finding: DeFi Saver assumes a high floor of knowledge and is correct to do so — its user base is DeFi-native and technically literate. Not the right model for Secured Finance’s TradFi audience.

Liquity Land / Trove Manager (2 slides)

A Trove creation flow specific to the Liquity Land interface. Examined as a contrast to eth.liquity.fi — same underlying protocol, different UI approach. Finding: slightly more beginner-friendly framing on the Trove setup, but still no meaningful risk education at the point of action.

Waterslide (4 slides)

A newer DeFi yield interface with a modern visual style. Examined for: how it presents yield opportunities, what information is surfaced on the opportunity card, and how it handles the deposit flow. Finding: strong visual design but light on risk context — APY is the hero, slashing risk and lock periods are secondary or absent.

Key synthesis across all six: Every competitor either (a) hides yield complexity behind a single APY number, or (b) exposes it raw in a way that requires quant-level knowledge. Neither approach serves Secured Finance’s dual audience. The design response: build an interface that can flex between TradFi and DeFi legibility on the same screen without a mode switch.

02 — LQTY UX Research

Liquity’s governance token (LQTY) and its staking interface were examined in depth across eight research slides — not as a competitor but as the most mature example of on-chain fixed-rate lending UX that had reached significant adoption.

What was examined:

• LQTY staking flow: how users stake, how rewards are claimed, how APR is communicated
• Stability pool mechanics: deposit flow, compounding, liquidation gain distribution
• Trove management: collateral adjustment, debt repayment, redemption risk communication
• Error states and edge cases: what happens at the collateral ratio boundary
• Mobile experience: how the Liquity interface degrades on smaller screens

Key findings:

Liquity’s interface is excellent for users who already understand it. The documentation does the heavy lifting; the interface assumes the reader has done their homework. For Secured Finance, this is the wrong model — the target includes TradFi professionals who are unfamiliar with on-chain mechanics and need the interface itself to explain what’s happening.

The LQTY research confirmed the design direction: every action in the Secured Finance interface should be self-explanatory at the point of action. Yield is shown as APR (not APY, because fixed income professionals think in APR). Collateral utilisation is shown as a percentage with a colour-coded meter. Liquidation risk has its own permanent card in the portfolio view.

Liquity’s stability pool UX was studied specifically because the Itayose mechanism in Secured Finance has similar complexity — a price-discovery auction that operates differently from a standard limit order. The Itayose optimisation ticket (SF-1116) drew directly on this research.