Tokenomics Page (NOTE Token)
Notional Finance, Defi's top leveraged yield protocol.
UX Researcher, UX/UI Design, Dev Handoff
2 months - Research & Design
Designed and shipped a dedicated NOTE token page to improve transparency, reduce user confusion, and centralize token data. The launch led to a noticeable reduction in support questions and strong internal adoption, establishing a clear, trusted reference point for users interacting with the protocol.
Context
Notional Finance is a decentralized finance (DeFi) protocol that enables users to lend, borrow, and earn yield on crypto assets.
The NOTE token sits at the center of the ecosystem. It is used for governance, distributed through incentives or bought outright, and is core to long-term protocol alignment.
Users
- Retail crypto users
- Yield seekers
- Advanced DeFi participants
Business Model
- Protocol generates revenue through lending/borrowing activity
- NOTE incentivizes participation and governance
Why this project mattered
At the time, transparency and trust were critical to survival. The token’s declining price and low staking participation signaled a lack of user confidence. The team needed a way to clearly communicate:
- Token utility
- Supply dynamics
- Incentives
- Governance activity
The Problem
Before this page:
- Token data was fragmented or missing
- Users relied on Discord for basic questions
- Tokenomics were confusing and misunderstood
- Lack of clarity led to low trust and low participation
Key symptoms:
- Declining NOTE price
- Low staking participation (sNOTE)
- Reduced engagement with yield products tied to NOTE
- Frequent support questions about token mechanics
Core problem:
Users didn’t have a clear, trusted place to understand the value and mechanics of the NOTE token.
My Role
I was the sole product designer on this project.
Responsibilities included:
- Defining the structure and hierarchy of the page
- Partnering with the founder to determine which metrics actually matter
- Translating complex tokenomics into digestible UI
- Collaborating with engineering to scope feasibility
- Designing desktop and mobile experiences
- Presenting concepts and iterations to the full team
Constraints
- Limited engineering bandwidth → required simplifying data visualizations
- Complex financial data → needed to balance accuracy with clarity
- No existing design pattern for this type of page
- Time pressure due to declining token performance
Strategy & Thinking
Insight
Users don’t distrust tokens, they distrust unclear systems.
Hypothesis
If we create a clear, structured, and transparent view of NOTE, users will:
- Better understand its value
- Be more likely to buy or stake
- Trust the protocol more
Key Design Decisions
1. Section-based layout instead of a single dashboard
- Reduced cognitive overload and aligned with different user intents (buying, staking, governance)
2. Lead with a high-level summary + CTAs
- Immediately answers: “Why should I care?”
- Positioned “Buy NOTE” and key metrics at the top
3. Anchor navigation
- Allowed users to quickly jump to what they care about
- Especially important for repeat and advanced users
4. Emphasize staking (sNOTE)
- Directly tied to protocol health and user commitment
5. Include governance prominently
- Reinforced transparency and decentralization
- Showed the protocol is active and evolving
Trade-offs
- Removed advanced visualizations due to engineering constraints
- Cut additional sections to prioritize clarity over completeness
- Avoided animations despite initial exploration
- Simplified certain financial metrics to improve accessibility
Process
Step 1: Wireframing
Started with a low-fidelity wireframe focused on:
- Information hierarchy
- Section structure
- Data prioritization
Step 2: Iteration
- Collaborated with founder to refine which metrics mattered most
- Validated internally with team feedback
- Worked with engineering to ensure feasibility
2 key iterations followed the initial wireframe.
Step 3: Final Design
Delivered:
- Full desktop design
- Mobile-responsive layouts
- Clear component structure for development
Final Solution
The final page is structured into clear, digestible sections:
1. NOTE Overview (Top Section)
- Price + link to CoinGecko
- Burn metrics
- High-level summary
- Primary CTA: Buy NOTE
Why: Anchor the page with immediate value and action.
2. Staking (sNOTE)
- sNOTE price
- Yield metrics
- Annual reward rate
- CTA: Stake NOTE
Why: Encourage deeper participation and long-term engagement.
3. Supply Schedule
- Circulating supply chart
- Emissions data
Why: Increase transparency around dilution and long-term value.
4. Governance
- Latest proposals
- Key details
- Link to full governance
Why: Reinforce decentralization and active protocol management.
5. Delegation
- Featured delegates
- CTA to explore more
Why: Lower friction for governance participation.
Design Principles Applied
- Clarity over completeness
- Progressive disclosure of complexity
- Action-oriented hierarchy
- Trust through transparency
Results
- Reduced support questions related to NOTE token mechanics
- Positive internal feedback across product and leadership
- Established a single source of truth for the token
- Improved clarity around staking, governance, and supply dynamics
While external metrics (price, adoption) were influenced by broader market conditions, the page successfully:
- Improved internal alignment
- Reduced user confusion
- Strengthened the protocol’s transparency narrative
Reflection
What I’d improve
- Add deeper analytics to measure engagement and conversion
- Explore more advanced data visualizations if engineering allowed
- Run external user testing instead of relying primarily on internal feedback
What I learned
- In complex systems, clarity is the product
- Strong hierarchy matters more than more data
- Transparency is a design problem, not just a data problem
Next project
Do you have an idea? Let’s talk about it.
Schedule a pressure free strategy call at your conveinence to explore ways we can grow your business.
