Lagoon
6 min readLagoon is on-chain vault infrastructure: asset managers build and run curated strategies, depositors put money in to earn. Everything underneath is public and verifiable, but most apps hide it behind a clean screen and a confirm button. You deposit and you're left guessing where your money actually is. I designed the app to do the opposite: show what's really happening at each step.
The problem
Every number on screen is a reason to deposit or to leave: APR, composition, NAV, fees. If any of them is vague, someone pulls their money. Three things were hard to show.
Money moves on a delay. A deposit doesn't become a position when you click confirm. It settles at the next valuation, once the curator approves. Most apps paper over that wait with a fake success screen. I had to show the wait honestly instead.
Yield is not one number. What you earn is a base return plus separate reward streams from the protocols the vault touches. Folding all of it into a single APR hides where the money comes from.
A vault is a set of addresses. Who can value it, who can upgrade it, where fees go, what is locked: all of it is on-chain, and most apps never surface it.
Role & scope
Founding designer. I owned the product design end to end: the UX/UI, the flows, and the components, from the first screens to a shipped library. That ran across both sides of the app. The curator side, where vaults are deployed, configured and operated, is a denser and more complex workflow than the depositor side, and I designed all of it; this case stays on the depositor experience and only samples the curator tooling. The specs came from the CTO, one of the cofounders, and my job was turning them into the actual interface. Outside the product itself, the brand identity and the marketing assets (landing page included) were mine too. The app's front-end was built by the engineers.
Two users, one surface
Two groups use the same app for opposite reasons. A depositor wants to know what they get and what they risk before moving money. A curator wants fine-grained control over how a vault is built and run. I kept the journeys structurally apart: a depositor goes Earn, then Vault detail, then Portfolio; a curator goes Create, then Configure, then Operate.
Show where your money is
Because deposits and redemptions settle on a delay, one confirm button wasn't enough. I treated money movement as four explicit flows (Deposit, Redeem, Claim, Withdraw), each one running confirm, processing, then done, with the delay spelled out at every step. Here is the deposit one.
Say what's happening with timing. The confirmation reads, word for word: "The position will be activated upon curator approval at which point your vault shares become available." That sentence holds through loading and completion; nothing flips to done until the chain says so.
Never hide where a request is. Back on the vault page, the position panel tracks the full life of a position as a state machine: every step it can be in is a named state, and the panel always shows the current one.
The Portfolio page repeats the same logic at the account level: total deposited, net APR, total earned, and every position with its status, pending requests included.
Show what you're actually earning
The performance chart was the hardest part to keep honest, for two reasons.
The price moves in steps, not curves. A vault's price per share only changes when the curator settles a new valuation, then holds flat until the next one. So the chart is a staircase: each tread is the stretch between two settlements, where the price is fixed and known.
Not all the return lands in the price. Vaults earn extra reward streams from the protocols they use, and those rewards belong to the vault and its depositors, but they don't show up in the price per share. A chart that plotted only the share price would understate what the vault actually returned.
So I kept the price-per-share line stepped as it is, and overlaid each reward stream as its own band on top, with a reward-adjusted total. On hover, a single day is itemised: price per share, each reward source by name, and the adjusted figure. In the example, 1.09 USDC of price per share plus 0.15 from Resolv and 0.05 from TAC gives 1.29 reward-adjusted.
The same applies to the APR. Rather than one headline percentage, it unfolds into its sources, each explained inline where it appears: a base yield from the strategy, additional vault rewards (Resolv, TAC), external reward tokens, and points incentives.
Show what's under the hood
The vault page opens on a top-down read: identity and headline figures first (name, curator, network, asset, APR, TVL), then the chart, with a Position panel pinned to the right. Everything else sits in five tabs.
Overview lays out the strategy, the protocols the vault touches, the active and past rewards, the fees, and the risk categories. Composition shows where the capital sits, by protocol and by token, down to the on-chain wallets and exchanges that actually hold it. Metrics carries the risk-adjusted numbers: Sharpe, volatility, and the max drawdown an APR alone hides. Activity is the full log of deposits, valuations, redeems and settlements, each with an address and a timestamp. Details lists every contract and governance role with its address.
Tell people when a vault isn't vetted
Anyone can deploy a Lagoon vault, and any vault is reachable by its URL. The vaults inside the app are a curated set the team has looked at, but a depositor can still land on an unvetted one by following a link. So I designed a warning for a vault the team hasn't verified: a banner saying it was built with Lagoon's open tools, hasn't been checked, and that you should be sure you trust the curator before depositing. The vault's own figures stay visible right under it.
The same checks, for the curator
A curator's actions are high-stakes and mostly irreversible, so the tooling makes each one checkable before it goes on-chain. Vault creation ends on a review screen that puts every address and every locked parameter in one place (the roles, the fee rates, the rate-change and upgrade timelocks) before the deploy transaction. Pricing the vault works the same way: a simulated NAV the curator reads before settling it on-chain.
The component library
Behind all of it is a component library built around the real states, not just the happy path: deposit and redeem inputs and their variants, vault tables and cards, composition and activity tables, four chart variants, position and action panels, transaction modals, six toast states, alerts, tooltips, and the curator-only pieces (whitelist, deposit limit, rewards, referral).
