How I designed a DeFi portfolio platform for two completely different users at once

ROLE

PRODUCT DESIGNER

SERVICES

UX/UI, Product Design, Web App Design, Design System, Flows

Goal

One platform for two user types. An owner runs a single Safe. An associate runs positions inside many client Safes. Each gets its own homepage, permissions and version of the explore to execute flow. Splitting those two paths was the core design task.

Problem

NMT already existed and it held no one. Jonathan kept four to six other tools open to do what this app was meant to do, so it was one of the tabs, not where the work happened. Associates had it worse: ten to thirty client Safes each, a subscription on every one, and no platform built for that, so they worked by hand. Almost every function already existed somewhere in the product. The trouble was where it sat, how much arrived at once, and who was never accounted for.

Too much on one screen

The first overview table carried value, APR, P&L, projected and actual earnings, range status, protocol and chain inline. CT: “It kind of loses its structure. There are just too many options displayed.”

Too little in the live product

APR needed a hover. Range status was not visible at all. Close position, withdraw fees and add liquidity were buried. Nobody could tell how a position was doing without clicking through.

The people signing are fifty plus

CT: “The clients are 50+ year olds. They might not notice something if it is too subtle. They know how to use a dropdown, they have been using computers. But they will panic if a transaction goes silent.”

The advisor had no product

Associates manage positions for ten or more clients and want the same position applied to every Safe at a different amount. No platform was built for that, so they did all of it manually.

Research

Benchmarking

I put every function of the new product in one table against Zapper and DeBank, the two trackers people keep open beside their wallet, and the live NMT. Forty one functions, scored 1 to 5.

Zapper and DeBank both show the whole portfolio, only Zapper can act on it
The live product had the actions but hid APR and range status behind a hover
Nothing anywhere tells you what a position will earn before you sign
Twenty three of the forty one exist only in the new product: the advisor workflow and the minute before signing

Competitor summary analysis

Sessions

I spoke to Jonathan, who runs his own Safe, and the product lead, who watches clients use the live app every week.

What i understand

Show the number, do not hint at it
Never let a transaction go quiet
An extra click for an advisor is not one click, it is thirty

Session record

2 sources7 insights8 decisions

Personas

Three personas. Jonathan runs his own Safe across Base, Ethereum and Arbitrum. The associate runs ten to thirty client Safes. Behind the associate is the client, fifty plus, who never opens the app.

Personas

Scope

From research to a design system for two user types: the owner running one Safe, the associate running many.

Research and structure

Defined the two users, took the live product and the tools around it apart function by function, kept a record of every weekly session, and wrote both paths out before drawing a screen: owner from connect wallet to an open position, associate from one position to many client Safes.

Screens

Onboarding, overview, exploration, pool detail, configuration in three modes, the associate client list, settings with Safe permissions and roles. Each one empty, loaded, expanded, in error and in the three transaction states, which is where the twenty six plus states come from.

Design system

Components and their states in light and dark, so a new screen is assembled from the kit instead of drawn again. The connect flow covers 730 plus wallet providers, plus email, Google and phone.

Process

CJM and user flows

Walked the owner journey from first contact to a running position, then wrote the owner and associate paths as two separate flows before drawing a screen

CJM, owner flow and associate flow

Reviewing the live product

Went through the live product screen by screen, then scored its functions against Zapper and DeBank in one table

Structure

Mapped the whole product as one diagram, so the configure branch could be seen next to settings instead of imagined

Screens and states

Drew every state of every screen: empty, loaded, expanded, error, and the three transaction states

Weekly sessions

Three to five options per problem, compared on the call with the product lead and narrowed down the same session

Decisions

[1] The Explore page: grid, categories row and a live count

Problem

A left hand sidebar filter wasted space, the category chips were invisible, and nothing told you how many results the filters returned.

Options

Keep the sidebar, move filters into a top bar, or stack the whole header above the grid.

Decision

A stacked header: stats strip, filters, categories as horizontal chips, then the grid with Showing 326 Results updating as filters apply. Associates Pick went into the categories row as a basket, because treating it differently would confuse the mental model.

[2] The swap card: the big option won

Problem

The swap card had no settled form, and the rest of the product had already gone bold: full width chart, large KPI numbers.

Options

The standard small box, two cards side by side, charts integrated into the card, or micro-interactions on the swap arrow.

Decision

A chart under each token. CT: “It is big and it is stupid. In the best way, it is really obvious what is going on.”

Final design

Onboarding and overview

Connect wallet with MetaMask, Phantom and Ledger surfaced, 730 plus providers behind one link, and email, Google and phone underneath
Overview, empty state: the Safe is connected and has nothing in it, so the screen offers one action and no dead ends
Overview, loaded: KPI cards, allocation bar, net worth chart and the full assets table

Explore and pool detail

Explore, DeFi positions view: stats strip, category chips, filters, grid and Showing 326 Results
Pool page: APY chart, currency reserve, base APY, APR and the DeFi positions attached to it
Every screen is shown in its flow, not as an isolated component

Configure position

LP mode: deposit tokens, the WETH and ZRO price range, narrow, wide and full presets, estimated earnings
Swap mode: single token entry, live exchange rate, network fee, no price range needed
Zap mode: one asset out of the Safe, and the price range chart owning the page

Dark mode

Overview loaded: DeFi, stablecoin, assets and others in the allocation bar
Open position expanded: ETH and USDC, In Range, the price range, the earnings breakdown and the three actions
Open positions, wishlist, chat and account, all carrying the same components as the light theme

Result

NMT went from an existing product that held no one to five core flows, two user types, more than twenty six screen states, in light and dark, with every decision kept in the session record.

Twenty three of the forty one functions in the table exist only here, and all of them sit in two places: the advisor workflow and the minute before a signature.

Learnings

The most useful sessions were not the ones where CT said yes. They were the ones where he said “I keep coming back to this one weird option and I do not know if I like it because it is weird or because it is actually good.” The zap page was the hardest problem and looked like the easiest screen: the question was which element is primary, and fifteen iterations answered that it is the chart. The associate flow taught me that a power user is a different problem, not a variation, because every extra click costs them real time on every Safe they manage.