YieldNest Staking App — Progressive DeFi

YieldNest — Product Design

One designer. Full product scope. Simple Mode to Advanced. Governance to RWA. Every surface designed across desktop and mobile, with complete state coverage.

This section covers all UI/UX design work for the YieldNest app — the staking surfaces, advanced analytics, governance flows, RWA product, and growth campaigns. Work was structured as a solo contributor engagement with direct design-to-engineering handoff.

Home / Simple Mode — Card selection flow. First deposit in under 60 seconds.

Advanced Product Page — Full analytics, multi-strategy, position management.

Asset Selector & Swap — Search-first, chain-aware, cross-protocol.

Earn Page — Strategy discovery and active position management.

YND Stake — veYND / sdYND governance staking, Simple and Advanced flows.

ynRWAx — Real-world asset product: junior/senior tranches, maturity calendars.

Governance — Stake, claim, rewards. Desktop and mobile.

Withdrawal Flow — Multi-protocol unstaking with competitor research baseline.

Deposit Flow — On/off ramp integration. MoonPay and Ramp Network research.

Portfolio — Account value, margin, risk. Five versions across the engagement.

Seeds — Campaign surface and lead form.

Landing Page — Nest lead form and product landing.

01 — Home Page / Simple Mode

Problem: The home page is the highest-stakes screen in a staking product. The previous design presented too many choices at too high a cognitive load — users weren't dropping off because the product was bad; they were dropping off because the entry point was unclear.

Solution: Rebuilt around a card selection pattern. Each card represents a strategy with the essential metrics (APY, risk profile, TVL) needed to make a decision without navigating away. Iterated through five concept variants, each stress-tested against the same question: can a user who has never staked before make a confident first choice in under 60 seconds?

The card selection flow connects directly into Simple Mode — a streamlined deposit funnel that pre-selects the optimal strategy and defers all complexity to post-stake. The flow: browse cards → select strategy → connect wallet → enter amount → confirm. Every additional step was eliminated or deferred.

Key decisions: Wallet connection is deferred until after asset selection. Users need to know what they're committing to before they're asked to connect. The layout adapts cleanly across desktop, tablet, and mobile without information hierarchy collapse.

State coverage: Default (no wallet), connected (balance shown), mobile responsive variants, tab navigation states, multi-asset layout.

02 — Advanced Product Page

H5

Problem: Experienced DeFi users need depth — yield analytics, strategy breakdown, historical APY data, multi-protocol comparison, granular position management. The simplified card UI actively frustrates this audience.

Solution: The Advanced Product Page surfaces the full information architecture on one screen: token price and chart, APY with performance data, Earning Possibilities (multi-protocol yield listing with sortable columns), Asset Allocation breakdown, and a Risk Assessment Protocol section. The design is calibrated to high information density without becoming a data dump — each module is independent and scannable.

Key decisions: APY is never shown without risk context. Lock duration, slashing probability, and protocol audit status are adjacent to every headline number by default — not in a tooltip, not in a modal, on the page. The product page also surfaces the full protocol stack underneath the yield: which protocols are used, what the allocation percentages are, and what the risks of each are.

Multiple breakpoints were designed and handed off: desktop (full layout), tablet (two-column reorganisation), mobile desktop variant, mobile drawer variant. The advanced page must be fully operational on mobile — yield management has become a mobile-first behaviour.

Versions: Desktop revamp, V1.1, ynRWAx product page adaptation, mobile revamp.

03 — Asset Selector & Swap Form

Problem: YieldNest operates across multiple chains. A user trying to stake ETH might hold it on Polygon, Ethereum mainnet, or Arbitrum — and an asset selector that doesn't surface chain context forces users to know the answer before they've asked the question.

Solution: A search-first asset selector with chain context baked in at the component level. The selector shows asset name, chain, and available balance simultaneously. Chain-switching is integrated into the same component — not a separate step. The search flow handles no-result states with suggestions and alternate chain options rather than an empty state.

The swap form was designed around the Enso integration — a meta-aggregator routing swaps across multiple protocols. The swap form design went through multiple iterations, from initial wireframe sketches through to production-ready UI with slippage controls, route display, and gas cost preview.

Key decisions: Chain identity is surfaced at every step, not only at confirmation. Users who have made cross-chain errors in other products arrive with anxiety — the design acknowledges this by making chain impossible to miss. The density toggle on the asset selector allows compact and expanded layouts for different screen sizes and user preferences.

State coverage: Default, search active, chain selector open, no results, loading, error, mobile variants.

04 — Earn Page

Problem: The Earn page needed to serve two jobs simultaneously: help users discover strategies they haven't tried yet (exploration), and give them a clear view of what they're already in (position management). Most DeFi products optimise for one at the expense of the other.

Solution: Built around the Explore Card component — a modular unit that displays a strategy with key metrics (APY, TVL, rewards, protocol) filterable by Protocol, Chains, and Category. The Earn page refactor reorganised the IA to separate discovery (All Opportunities) from management (Active Positions), accessible from the same screen with a tab switch.

The mobile Earn page was redesigned specifically for the mobile bottom-nav context: Stake · Earn · Portfolio · Swap · Seeds, with the Earn tab loading the opportunities list directly without intermediate navigation.

Key decisions: The veYND/sdYND cards were designed as separate surfaces — governance staking has a different mental model than simple yield, and conflating them in the same list increases cognitive load for users on the simpler path. Empty states for first-time visitors include a clear CTA back to the home page card flow.

Versions: Earn page refactoring (architecture), explore card instances, mobile redesign, mobile w/ balance shown.

05 — YND Stake (veYND / sdYND)

Problem: YND is YieldNest's governance token. Staking it is not the same as staking ETH for yield — the user is locking tokens to receive voting power and protocol revenue. Two staking derivatives (veYND for governance weight, sdYND for yield) with different lock mechanics and different reward structures needed to coexist in one product flow without confusing users who only want one of them.

Solution: Built two parallel flows — YND Stake Simple and YND Stake Advanced — each with a distinct entry point but shared underlying components. Simple Mode: single token, one input, clear expected return. Advanced Mode: full breakdown of veYND vs. sdYND conversion rates, lock duration selection, reward projection, and reconversion mechanics.

The Curated MAX Vaults homepage was designed as an extension of YND staking — users who have locked YND can allocate their staking weight to curated vaults directly from the homepage, creating a yield optimisation layer on top of governance participation.

Key decisions: Toast notifications were designed for every state transition: YND purchase confirmation, veYND stake confirmation, sdYND stake confirmation. The withdrawal wireframes map out all exit paths — standard withdrawal, early exit (penalty), and reconversion.

State coverage: Simple flow (9 frames), Advanced flow, Curated MAX Vaults (4 versions), withdrawal wireframes, toast states, QA annotations, edge case empty states.

06 — ynRWAx — Real-World Assets

Problem: ynRWAx is a tokenised real-world asset product — fundamentally different from a standard DeFi yield position. It has maturity dates, senior and junior tranches, fixed yield periods, and asset allocation across multiple underlying instruments. None of these concepts exist in standard DeFi product patterns.

Solution: Designed the ynRWAx product page as a variant of the Advanced Product Page, extended with RWA-specific modules: a yield chart with maturity endpoint, a Curated MAX Vaults section (underlying allocations), Junior and Senior tranche selectors with independent risk/yield profiles, maturity display cards across multiple time states (T-1, T0, T13), and a withdrawal flow calibrated to fixed-duration positions.

The asset allocation card was designed across multiple instances — open states, maturity states, expiry states — with a visual timeline communicating the position lifecycle at a glance.

Key decisions: Maturity dates are surfaced as the primary position parameter, not APY. This is deliberate — in a fixed-duration product, knowing when you can exit is more important than the headline yield. The tranche selector gives users explicit control over their risk tier, with clear labelling of what junior vs. senior means in practice.

07 — Governance

Problem: DeFi governance interfaces are notoriously hostile — full of protocol-native terminology, opaque voting mechanics, and reward flows that require understanding the token model before you can participate.

Solution: Designed the YN Governance surface with three entry points: Stake (convert YND to veYND or sdYND), Claim (collect accumulated protocol revenue), and Rewards (view and manage reward streams). Each flow is self-contained and legible without prior governance knowledge — the interface explains what the action does at the point of action, not in a separate docs link.

Desktop and mobile variants were designed in parallel, with the mobile version using a bottom-sheet pattern for complex parameter inputs.

08 — Withdrawal Instances

Problem: Withdrawal UX in DeFi staking is where trust breaks down. Users who don't understand lock periods, cooldown windows, or buffer mechanics during unstaking become support tickets and churn. Lido, Renzo, and EtherFi all had well-documented pain points in their unstaking flows.

Solution: Ran structured competitor research across four major withdrawal flows (Lido, Renzo, EtherFi, Rocket Pool) before designing. Built a withdrawal card that surfaces: available-to-unstake balance with inline buffer messaging, estimated arrival time, expected return amount, and exchange rate — all before the user confirms anything.

The withdrawal card is designed across six state variants: zero balance (disconnected), empty state (connected), input state, price impact state, pending/loading, and complete. The "available to unstake" inline message with buffer was a deliberate addition after identifying that most withdrawal support issues stem from users not understanding partial availability.

Key decisions: The buffer state is a first-class UI element, not a tooltip. If 12,325 ynETH is available but the buffer means only 12,392 will be returned — that number is on the screen before confirmation, not after.

09 — Deposit Flow

Problem: The deposit flow is where user acquisition converts to retained value. Friction at this step — unclear gas costs, ambiguous asset routing, missing on-ramp options — directly costs TVL.

Solution: Designed the deposit flow around two entry paths: wallet-native deposit (for users with existing crypto) and on-ramp integration (for users converting fiat). The on-ramp research covered MoonPay (widget UI, FX buy/sell flows, fee structure) and Ramp Network (KYC flows for Europe/Global/US, fee breakdown, payment methods, partner network) before any design decisions were made.

Jupiter on-ramp UX flow

Sushi Swap on-ramp UX flow

The deposit form handles multi-chain routing — chain selector with submission blocking for unsupported chains, max button with gas deduction, and a clear preview of expected output before signing.

10 — Protocol Revenue

Problem: A stats dashboard page to list down all key metrics for the protocol.

Solution: Played around with different page layouts and structures in order to get the most suitable and easiest navigate across different device breakpoints.

11 — Seeds Campaign

Problem: Seeds is YieldNest's loyalty and points programme — users earn Seeds by depositing into the protocol, with multipliers for different vault types and referral activity. The Seeds page needed to surface point balances, multipliers, eligibility, and the referral mechanic without overwhelming users who only want to know their current tally.

Solution: Designed the Seeds page with a headline balance card, multiplier breakdown, eligibility criteria, and a leaderboard component. The page doubles as a campaign entry surface for growth initiatives — the design was built to accommodate time-limited campaign modules without a layout rebuild.

The Seeds background was custom-designed: SVG variants for different display contexts (desktop, mobile, compressed).

YieldNest — UX Research

Data-first design. Every major product decision was anchored in behavioural evidence before a frame was drawn.

UX research across this engagement covered four layers: quantitative product analytics (Google Analytics, conversion funnels), behavioural session analysis (Smartlook heatmaps and recordings), structured on/off ramp competitor research, and direct user interviews. The research findings directly shaped the V2 redesign priorities.

01 — Google Analytics — Conversion & Retention

Conversion funnel (March 25–31, 2025):

• Purchaser rate: 10.3% ↑ 54.3% vs. prior period
• First-time purchaser (FTP) rate: 9.6% ↑ 78.7% vs. prior period

The conversion spike on March 29 was attributable to a specific campaign push — the data confirmed that the YieldNest user base responds strongly to external triggers but has a retention problem once the trigger fades.

User retention by cohort (6 weeks ending March 29):

• Week 0 (activation): 100%
• Week 1 retention: 7.7%
• Week 2 retention: 4.4%
• Week 3 retention: 2.2%
• Week 4 retention: 1.8%
• Week 5 retention: 1.5%

The steep drop from Week 0 to Week 1 (100% → 7.7%) was the primary design problem. Users were activating and not returning. This finding drove the redesign of the Earn page and Seeds programme as repeat-engagement surfaces — the product needed reasons to come back, not just reasons to arrive.

Search queries analysis: Identified which search terms were driving qualified traffic vs. high-bounce traffic, and which product surfaces those users were landing on. Informed the landing page and SEO-accessible entry points.

02 — Smartlook — Behavioural Heatmaps

Smartlook session recordings and heatmaps were run across key product surfaces:

Earn page (mobile heatmap): Click and scroll density on mobile. Identified that users were tapping the Earn card's APY figure expecting more detail — but it wasn't interactive. This was corrected in the V2 redesign with a tap-to-expand mechanism on the metric.

Portfolio page (mobile heatmaps, 3 variants): Tracked across three portfolio iterations to measure whether layout changes resulted in expected interaction pattern shifts. Confirmed that moving the sort control above the position list (not below) increased its usage rate.

Position card analysis: Heatmap evidence showed that the position card's secondary metrics (lock duration, slashing risk) were being ignored on mobile — not because users didn't care, but because the visual hierarchy was treating them as tertiary. Fixed in V2 by elevating them to the same line as APY.

Smartlook report (March 27, 2025): Overall session quality metrics, rage clicks, dead clicks, and navigation confusion paths. The report identified the deposit flow's chain selector as the highest-friction step — users were clicking the chain badge expecting a selector to open, but it was static. Informed the chain-aware asset selector redesign.

03 — On & Off Ramp Research

Fiat on-ramp integration was a major product requirement — YieldNest needed to serve users who didn't yet hold crypto. Deep competitive research was run across two providers before any integration design decisions were made.

MoonPay:

• FX buy flow: currency selection → amount input → payment method → KYC → confirmation
• FX sell flow: reverse path from crypto wallet → fiat payout
• Widget UI: how MoonPay renders inside a third-party product (constraints, customisation options)
• Fee structure: spread, network fees, payment method fees by region

Ramp Network:

• KYC flows by geography: Europe (ID + selfie, lighter requirements), Global (full KYC stack), US (SSN verification, highest friction)
• Fee breakdown: transaction fee, network fee, FX spread by currency pair
• Payment methods: credit/debit card, bank transfer (ACH, SEPA, SWIFT), Apple Pay
• Partner network: which chains and tokens are natively supported vs. requiring bridging
• Supported cards: Visa, Mastercard, Amex availability by region

Design implication: The research revealed that Ramp Network's KYC variance by region (Europe vs. US) meant the deposit flow needed to handle three distinct entry states without showing users a confusing complexity wall. The solution: the on-ramp widget is loaded after region detection, so European users see a simpler flow and US users see the extended KYC prompts — the product makes the routing decision, not the user.

04 — Competitor Research

Competitor research focused on live DeFi products in adjacent categories:

Reserve Org: Analysed the Reserve Org interface across eight key screens — organisational structure, earn page listings, governance interface, stablecoin product list, yield/DTF listings, and tooltip interaction patterns. Reserve Org was the closest comparable for the ynRWAx product — both targeting users who want fixed-income-adjacent yield on-chain. Key takeaway: Reserve Org's information density is high but their mobile experience is significantly degraded — a competitive gap for ynRWAx.

Withdrawal flow benchmarking: Four major staking protocols (Lido, Renzo, EtherFi, Rocket Pool) were analysed specifically for withdrawal UX patterns — where users get confused, what information they expect before signing, and what happens when a withdrawal is queued vs. instant. Findings directly informed the withdrawal card state coverage (six states including the buffer message).

05 — User Research

Structured UX interviews and behavioural research conducted during the engagement to validate design assumptions:

Research questions: How do users evaluate yield strategies? What risk information do they need before committing? What does a withdrawal failure feel like? What brings users back to a staking app after their first deposit?

Key findings:

• Users consistently underestimated lock durations — they saw APY first and didn't register the lock period until they were at the confirmation screen. Implication: lock period elevated to the same visual level as APY on product cards.
• Power users were frustrated by the absence of a position-level P&L display. They wanted to know not just current balance, but gain/loss since deposit. Implication: yield delta added to portfolio position cards in V2.
• First-time users associated “Advanced” with “risky” — the word created hesitation even for users who wanted more data. Implication: terminology tested and adjusted; “Details” was explored as an alternative for the toggle label.

The PD-Engineering Workflow document formalised how research findings were translated into design requirements and passed to engineering with explicit acceptance criteria.

YieldNest — Graphic Design

Token economics. Brand identity. Financial infrastructure. The visual layer that explains the protocol to investors, partners, and users.

Graphic design work for YieldNest covered three distinct domains: tokenomics visualisation (the YND Token Unlock Schedule and TGE charts that went into investor materials and public documentation), brand identity work (the Nest AI mascot and hybrid logo system), and financial infrastructure diagrams.

01 — YND Token Unlock Schedule

The YND Token Unlock Schedule is a 10-year cumulative area chart communicating how the 1 billion YND token supply unlocks across six vesting categories:

• Community & Rewards: 52.5% — the largest allocation, back-weighted to incentivise long-term participation
• Team & Advisors: 20% — standard 4-year vesting with 1-year cliff
• Private Sale: 18% — strategic investor allocation
• Ecosystem & Liquidity: 7% — protocol-controlled liquidity and grants
• Strategic Round: 2% — lead investors
• Public Sale: 0.5%
• Genesis Airdrop: 0.56%

The chart communicates cumulative unlock progression from TGE through 2032 — designed to be legible to both retail token holders (who want to know when supply expands) and institutional investors (who need to model dilution curves).

Produced across six versions (1.0 → 2.2 + M100 variant) incorporating feedback on allocation percentages, labelling precision, and export format requirements for both digital display and print.

02 — TGE Charts

TGE (Token Generation Event) charts were produced across four allocation scenarios to support YieldNest's fundraising and public communications:

Chart A — The baseline allocation scenario. Stacked area chart showing the initial unlock at TGE and the vesting curves for each category across the timeline.

Chart B — A revised allocation scenario with adjusted private sale and ecosystem weights.

Chart C — Community & Rewards front-weighted variant — designed to communicate a more aggressive early incentive structure.

Chart 3.3 — The near-final allocation scenario that informed the public token documentation. Used in investor decks, the YieldNest whitepaper, and community announcements.

Each scenario was produced with both a stacked area (unlock schedule) and a pie chart (snapshot allocation) — two different visual formats for two different communication contexts: the pie chart for quick allocation overview, the area chart for temporal unlock understanding.

Production standards: Exported at high resolution for both digital (72dpi, screen colour) and print (300dpi, CMYK) contexts. YieldNest brand colours (midnight blue, gold, white) applied consistently across all variants.

03 — Financial Infrastructure Diagrams

Protocol architecture diagrams communicating how YieldNest routes user deposits through underlying DeFi protocols:

Flow diagrams (4 versions + revisions): How deposits flow from user wallet → ynETH vault → allocation split across underlying protocols (Lido, Renzo, EtherFi, Rocket Pool) → yield generation → return to user. These diagrams were used in the whitepaper, pitch deck, and developer documentation.

Smart contract diagram: The on-chain architecture showing the relationship between the vault contract, the strategy contracts, and the underlying protocol integrations. Produced in collaboration with the engineering team to ensure technical accuracy.

Design approach: Isometric layout with directional flow arrows, protocol logos at each node, and percentage allocations shown at split points. Designed to be understood without reading the accompanying text — the diagram tells the complete story visually.

04 — Brand Identity

Nest AI — Brand Mascot:

Nest AI is an animated character asset developed for the YieldNest brand — a stylised owl figure representing the intelligence and yield-optimisation philosophy of the protocol. Produced across nine pose variants:

• Standing (neutral brand use)
• Tilted (conversational)
• Rich pose (aspirational / success state)
• Phone usage (mobile context)
• Dancing (celebratory, campaign use)
• Shooting (action / transaction)

Exported as both still PNG poses and animated GIF/MP4 for use on the landing page, social media, and in-app celebration states.

Hybrid Logo System:

The YieldNest hybrid logo covers multiple lockup variants for different use cases: full wordmark, icon-only, horizontal lockup, stacked lockup. Produced in both light and dark mode versions, with glow variants for dark background contexts and standard flat versions for document use.

Token Icons:

Custom SVG token icons for the full YieldNest token ecosystem — ynETH, ynBNBx, ynRWAx, veYND, sdYND, YND — plus third-party protocol icons (Lido, Renzo, EtherFi, Rocket Pool, Base, Taiko ecosystem). Produced in multiple variants: standard, glow, blue-cropped, for different surface contexts.

05 — Growth & Campaign Assets

TVL Milestone Banners:

Announcement graphics for TVL growth milestones — desktop (1200x628) and mobile (1080x1920) variants for Twitter/X and Telegram. Designed in the YieldNest brand style with the milestone figure as the hero element.

Marketing Audit:

A social media and website audit (produced with DNA Deal Desk) assessing the current state of YieldNest's growth messaging. The audit covered message-market fit, visual consistency across channels, and conversion pathway analysis from social posts to app deposits. Findings were incorporated into the landing page redesign and the Seeds campaign page design.