degenie

Case · 2021–2022 · Head of Product & Design

De.Fi

Everything you own in DeFi, and everything that can reach it.

The problem
In 2021 DeFi spread from one chain to many, and money spread with it: wallets, pools, stakes and loans, each in its own app. Every approval a person signed stayed open. Nothing showed all of it, or what could reach it.
What I did
Head of Product & Design, and the only product designer. I worked with the founder on what to build and designed all of it: twelve tools on one account and one system, the iPhone app, and the mark.
What happened
The cross-chain dashboard shipped in October 2021 and a new interface in February 2022, then the Scanner and Shield. Four years and a rename later, de.fi still runs on this design.
The De.Fi app: the sidebar with Home and Profiles, Investment, Security and Protection, and Audits, beside a portfolio of $302,251.61 net worth, up $4,416.06 on the day, made up of wallet, deposit, claimable, lending, debt and NFTs.
Role
Head of Product & Design
Team
The founder, engineering and management; I was the only product designer
Scope
Twelve web tools on one system, the iPhone app, the logo and identity
Period
January 2021 – June 2022

When I joined in January 2021, DEFIYIELD, as it was called then, was a young yield product with a tool for checking approvals. Over the next eighteen months I designed it into one app for seeing, growing and protecting money across chains, and drew the mark it still carries.

In its time

DeFi left Ethereum, and the risk went with it.

In January 2021, 98% of the money in DeFi sat on Ethereum. By October DeFi held more than $200 billion and almost a third of it was on other chains, each with its own apps and wallets. An approval signed to use any of them stayed open until someone revoked it, and $2.2 billion was stolen from DeFi that year.

2021

  1. I join DEFIYIELD as Head of Product & Design, the only product designer.

  2. The cross-chain dashboard ships. De.Fi

  3. DeFi passes $200 billion; almost a third of it is off Ethereum. The Block

  4. BadgerDAO: approval requests injected into its own website drain about $120 million. Rekt

2022

  1. A new interface goes live. De.Fi

  2. Shield, for reviewing and revoking approvals, goes into development. De.Fi

2023

  1. The company renames itself De.Fi, after I leave, and keeps the product and the mark. De.Fi

My workThe field

The product

Two questions, one app.

In 2021 a portfolio tracker told you what you owned, and an approvals checker gave you a list of contract addresses you had once signed for. The bet was to answer both in one place: what do I own, and what can reach it?

I made the sidebar the map of that bet: what you have, where it could earn, what could hurt it, what went wrong elsewhere, and how to move it. All twelve tools open on the same account, so protection sits beside the money it protects.

The DEFIYIELD wallet page in the 2021 working file: net worth and the day, then every token on Ethereum with its balance, price, change and value; the sidebar groups Investment, Security and protection, Audits and the DeFi token.
The 2021 working file, under the name DEFIYIELD.

The dashboard runs in your browser; with scripts off, the case’s text and the Shield below still read.

USDFeature RequestCareersContact Us

Try it

  1. Open a pool in Explore Opportunity and scan its contract.
  2. Scan SushiSwap in the Scanner, then follow it to Shield.
  3. Swap ETH for USDC, then find it in the history.
  4. Watch a wallet in Profiles and bundle it with yours.
  5. Switch networks off in Networks: every total follows.

Sample portfolio; every total adds up across the pages.

The system

One set of rules for twelve tools.

Twelve tools designed by one person stay one product only if they share rules. These six run through every screen, from the dashboard to Shield to the phone, each shown with the part that keeps it.

  1. 01

    One number first.

    Every page opens on a total and its day, then what makes it up: networks, protocols, positions.

    Net worth
    $302,251.61
    24h P/L
    $4,416.06 +1.48%
    Wallet$142,848.33$2,508.89 (+1.79%)
    Deposit$127,529.16$686.81 (+0.54%)

  2. 02

    Every position reads the same way.

    Name, network, what it holds, what it’s worth, in that order, whether the money sits in a wallet, a pool, a stake or a loan.

    Four positions of four kinds, read the same way
    PositionHoldsValue
    ETHEthereumWallet21.421 ETH$71,208.33
    UniswapEthereumPool · 50% DAI + 50% USDC2,542.46 DAI
    2,603.11 USDC    		$5,145.57
    Avalanche StakingAvalancheStaking956.85 AVAX$73,007.65
    VenusBNB ChainLending · supplied82.9 BNB$35,258.20

  3. 03

    Colour has jobs.

    Blue for where you are and what you can press. Green and orange for up and down, and for safe and at risk.

    • ShieldYou are here
    • You can press it
    • +2.84%Up
    • –2.06%Down

  4. 04

    Risk sits with the money.

    A position in a flagged contract says so in its own row, in the orange of a loss, not on another page.

    A deposit in a flagged contract
    PositionHoldsValue
    YearnEthereumVault · 100% YFIHigh-risk contract0.0154 YFI$379.35

  5. 05

    The price before the button.

    Revoking and swapping are transactions, so the fee shows before you confirm. A safety action shouldn’t hide its own price.

    You are going to revoke 6 contracts

    Chain
    Ethereum
    Transactions
    6
    Network fee, at 250 gwei
    0.069 ETH $229.37

  6. 06

    Every state is designed.

    Scanning, failing and empty are screens with words, not blank space.

    • Scanning contracts and tokens (4/20)

      Scanning

    • Our data disappeared, but it promised to return! Try again

      Failed

    • You do not have any assets above the limit you have set in the “Customize” section.

      Empty

Type

  1. $5.48B32 / 40 · 600 · Lead figures
  2. $142,848.3324 / 32 · 600 · Figures
  3. Account overview20 / 28 · 500 · Card titles
  4. Portfolio16 / 24 · 600 · Tabs, controls, reading
  5. Wallet · 21.421 ETH14 / 20 · 500 · Rows and labels
  6. Investment12 / 16 · 600 caps · Groups and table heads

Six sizes, two weights. Figures in tabular numerals, so columns of money line up.

Colour

  • Blue #1452F0The mark, where you are, what you can press
  • Ink #050F19Money and names
  • Slate #5E6F8CLabels and everything secondary
  • Green #087A3EUp, safe
  • Orange #C43E00Down, at risk
  • Amber #8A4F00Worth a look
  • Selected #F5F8FFThe row or item you are on
  • Line #EDEFF1Every border and rule

Numbers

  • $302,251.61Dollars, always to the cent
  • +1.48% · –2.06%A sign on every change, and a true minus
  • $1.12B · $96.3MShort where a column is tight
  • 21.421 ETH · 0.0154 YFITokens to as many places as their size needs
  • 12,314.00 USDCStablecoins to the cent, like dollars
  • 0xa4d8…76e7Addresses: four and four
  • 19 Apr 2022Dates: day, month in words, year

As tokens

// colour has jobs
blue    #1452F0  where you are, what you can press
ink     #050F19  money and names
slate   #5E6F8C  labels
green   #087A3E  up, safe
orange  #C43E00  down, at risk

// size
type    12 14 16 20 24 32 · 500 600
control 44 · 52 the page’s one action
radius  8 · 4  alone, inside

Controls

Specimens of the controls: primary, secondary, disabled and working buttons; a select; a filter field; network chips, issue badges and a risk badge; a segmented control; tabs.

Controls are 44 pixels tall, 52 for the one action a page is for. Corners: 8 on anything that stands alone, 4 on what sits inside it.

The system’s parts, with the sample portfolio’s figures.

Decisions

Five calls that shaped it.

Each could have gone the other way, and each is about the same thing: trust before money moves.

  1. 01

    Look before you connect.

    In 2021 connecting a wallet to a new site was the step people had learned to fear, because it came right before an approval. So any wallet opens from its address or ENS name, read only, and connecting is needed only to act. Your own wallet, the ones you watch and bundles of both sit in one address book.

    Address or ENS nameWatch
    • demo.ethConnected · can act
    • 0×3f1e…b2c9Watched · read only
    • FamilyBundle · two wallets added up

  2. 02

    Exposure, not a list.

    Approval checkers listed contract addresses, and most people can’t judge an address. Shield shows what each risky contract could take, in dollars, and why it is flagged, with revoke on the same row. The total at the top is the number that makes the risk real. An approved-contracts tool existed before I joined; the work was turning that list into a decision.

    Total risk exposure

    $7,754.06

    Risky contracts, with what each could reach
    ContractCould reachAction
    SushiSwapContract-owned +2$1,168.23Revoke
    YearnContract-owned +2$650.74Revoke

  3. 03

    Simple first, advanced on request.

    Shield opens on one question: these contracts are high risk, revoke them? Advanced mode adds risk tabs, filters, the issue behind every flag, and editing an allowance instead of revoking it. Most people need the first view; the people who need the second know to look for the switch.

    Advanced modeOff: one list, one decision

    Advanced modeOn: tabs, filters, allowances

    • All contracts 10
    • High risk 7
    • Medium risk 2
    • Low risk 1

  4. 04

    Research next to the money.

    Before a deposit the questions are who audited it and what went wrong at protocols like it. The Scanner and the audit history open from the pool itself in Explore, and the REKT Database is one step away in the same sidebar, so the check happens where the decision does.

    A pool in Explore Opportunity
    PositionPoolTVL
    CAKE / BNBBNB ChainAutofarm · APR 38.60%LP staking$96.3M
    Scan the contractAudit historyImpermanent loss

  5. 05

    The phone watches, the web acts.

    On a phone people check far more often than they act, and a wrong tap on a small screen is an expensive mistake. The iPhone app reads: add a wallet from the clipboard or a QR code, then the total, networks, protocols, NFTs and history. Moving money stays on the web, with its fee in front of it.

    Add your wallet

    • From the clipboard0xa4d8…76e7
    • Scan a QR codeFrom another wallet’s receive screen
    • Type an address or ENSRead only, nothing to sign

Shield

Total risk exposure

$0.00

High-risk threats detected

…

High-risk contracts

You have approved these high-risk contracts to spend your tokens.
  1. SushiSwap0×215…c32eLast change9 Mar 2022Risk exposure$1,168.23
  2. DODO Finance20×215…c32eLast change24 Dec 2021Risk exposure$845.23
  3. DODO Finance0×543…a34fLast change16 Dec 2021Risk exposure$765.00
  4. Growth DeFi0×06a2…63caLast change6 Nov 2021Risk exposure$707.11
  5. Yearn20×06a2…63caLast change30 Oct 2021Risk exposure$650.74

High-risk tokens

Tokens in your portfolio with dangerous or possibly malicious functions.
  1. CREAM0×215…c32eLast change9 Mar 2022Risk exposure$1,122.23
  2. MIM0×06a2…63caLast change24 Dec 2021Risk exposure$677.19
  3. BUNNY0×215…c32eLast change16 Dec 2021Risk exposure$362.11
  4. MONOX0×215…c32eLast change30 Oct 2021Risk exposure$154.74

NFTs at risk

You have given these high-risk contracts access to your NFTs.
  1. CryptoWax3OpenSea0×06a2…63caLast change9 Mar 2022
  2. Good Morning CafeX2Y20×06a2…63caLast change24 Dec 2021
  3. LetsWalk2Looksrare0×06a2…63caLast change16 Dec 2021
USDFeature RequestCareersContact Us

Try it

  1. Revoke one contract: the exposure falls by what it could reach.
  2. Revoke all six NFT contracts: the fee is shown first, then each goes as its own transaction.
  3. Open a flag such as Contract-owned to read what it means.
  4. Turn on advanced mode for risk tabs, filters and allowance editing.

Sample protocols and figures; nothing connects to a wallet. A revocation costs 46,000 gas at the header’s 250 gwei.

On the phone

The same portfolio, in a pocket.

Twenty-two screens: the total and its day, networks, protocols, NFTs, history and the address book, built from the same tiles and rows as the web.

The app runs in your browser; with scripts off, the case’s text still reads.

Portfolio Home

The portfolio on one page: the total and its day, what makes it up, then networks, protocols, NFTs and history. The header and the tab bar stay put.

All 22 screens
De.Fi for iPhone, all 22 screens, on the same sample portfolio as the dashboard, to the cent. The NFT collections are invented.

The brand

A D in two halves.

I designed the mark with the product: a D cut into two halves of equal width, the lower one shifted left by a quarter of that width, inside a hexagon, in one blue with near-black type. In the app the same blue marks the section you are in and the tab you are on.

When the company renamed itself De.Fi, only the wordmark changed.

The original DEFIYIELD lockup: the blue hexagon with the split D, and the name DEFIYIELD in near-black capitals.
2021: DEFIYIELD.

Construction

The logo as it runs at de.fi

  • Blue #1452F0
  • Ink #050F19

2026: De.Fi. The mark as it runs today.

What lasted

Four years on, the same product.

I left in June 2022. In February 2023 the company renamed itself De.Fi and kept the mark, the sidebar and its groups, and the pages behind them. Its documentation still walks new users through the sidebar’s Investment section, Wallet, Deposit and Lending, and the security toolkit of Shield and the Scanner.

The two questions outlived their time. Anyone who hands a wallet to software, a person in 2021 or an agent now, needs the same answers before it acts: what can it reach, and what will this cost.

Credits

Product, design, system, iPhone app, logo and identity: me, as Head of Product & Design. Built and shipped with the founder, engineering and management.

Sources

  1. The Block: DeFi is now a $200 billion industry, October 2021
  2. The Defiant: $2.2 billion lost to theft in 2021, January 2022
  3. De.Fi: a year of growth, June 2021
  4. De.Fi: two years of progress, September 2022
  5. De.Fi: the rebrand, February 2023
  6. De.Fi documentation: getting started, checked October 2026
  7. Rekt: Badger, the December 2021 approvals attack

Figures in the prototypes are sample data. REKT and audit entries are real, up to April 2022.

Next caseWaves A wallet, an exchange and a token launcher, in one app, in 2017.