Hey, I'm Waël.I shape products, from the idea to the interface.

Context

Lagoon runs curated on-chain vaults on Ethereum and other EVM chains. I came in as the founding designer and owned the product, the brand and the design system.

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 design system, 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 and system. 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 modelled the money-movement layer as an explicit state machine. Four processes (Deposit, Redeem, Claim, Withdraw), each going Confirm, then Loading, then End. 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 stays on screen through loading and completion. There's no fake success the second you click.

Never hide where a request is. Back on the vault page, the position panel reflects every step as a named state, through the full cycle of a position.

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 shown 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. A vault the team hasn't verified carries a banner: it was built with Lagoon's open tools, it hasn't been checked, and you should be sure you trust the curator before depositing. The vault's own figures stay visible right under the banner.

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 design system

I built a component library that covers the real states, not just the happy path: deposit and redeem inputs with their variants, vault table and card views, composition and activity tables, four chart variants, position and action panels, transaction modals, six toast states, alerts, tooltips, plus the curator-only pieces (whitelist, deposit limit, rewards, referral). The product is desktop-first on purpose: like most DeFi apps, the real work happens at a desk, where people manage actual money.

Outcome

At peak, the protocol held more than $300M in deposits.