Live on bcl.sannisanni.com · Sepolia Testnet
Live DAppEthereum DeFi · UX Case Study · Live on Sepolia Testnet
Live on bcl.sannisanni.com · Sepolia Testnet
Live DAppThe Project
What Was Built
Wallet connection, staking & unstaking $CYCLE, real-time reward visibility (accruing every second), transaction confirmation states, and a structured onboarding flow — all within a clean, mobile-responsive dApp deployed live.
Live Contracts
CYCLE Token: 0xBF059Bd2...38310A ↗
Staking Contract: 0xc30B9Bf7...F0FAF3 ↗
Blockchain
Ethereum. Deployed on the Sepolia testnet at bcl.sannisanni.com — fixed 12% APY, no lock-up period, rewards accruing on-chain every second.
Stakeholders
$CYCLE token holders — ranging from casual investors and daily DeFi users to long-term Block Cycle Labs community supporters.
The Design Problem
The conversion drop-off on the staking platform was critically tied to the infrequent, yet pivotal moment of on-chain transaction confirmation. Because users only stake or compound 2–6 times a year, the flow must be stress-free and secure.
Through foundational research, I confirmed this friction stemmed from the lack of transparent, real-time feedback on transaction status and persistent ambiguity surrounding wallet permissions and gas fee management — common points of failure across competitor dApps.
"I don't want to lose my tokens by mistake."
— User Insight
"Gas fees keep confusing me."
— User Insight
"This looks too technical for me."
— User Insight
Research Foundation
Every research decision was driven by a core question: where do crypto-native users lose trust during staking? The answer shaped the entire design — from onboarding flow to transaction confirmation.
User Personas
James, 38
Daily DeFi User · Advanced $CYCLE Holder
Goals
Stake tokens and compound rewards without friction. Needs real-time visibility into APY and reward accumulation. Trusts the ecosystem but not the UI.
Frustrations
Gas fee ambiguity, unclear transaction states, platforms that bury balance information behind multiple screens.
Behaviour
Stakes 4–6x per year. Uses MetaMask daily on Ethereum. Loses confidence when transaction confirmation is slow or unclear.
Amina, 27
Casual Investor · New to Staking
Goals
Understand what staking is and how to start. Wants reassurance at every step. Needs the platform to feel safe, not risky.
Frustrations
Overwhelmed by technical terminology. Doesn't know what "unstaking period" means. Afraid of accidentally losing tokens.
Behaviour
Has ETH in MetaMask but never used a dApp before. Needs a guided onboarding flow with plain language and clear next steps.
Competitive Analysis
Reviewed staking flows across Ethereum dApps, Solana tools, and Algorand interfaces to surface gaps in wallet connection, transaction clarity, and real-time reward visibility.
Key Pain Points
01
Low Conversion
Users consistently dropped off before completing staking interactions. The flow had too many ambiguous steps with no reassurance that their tokens were safe mid-transaction.
02
Bad Onboarding
Users couldn't navigate staking steps easily or understand what actions to take first. The entry point offered no guidance — technical by default, intimidating for newcomers.
03
Tokenomics Restrictions
Certain flows had to comply with ecosystem-specific rules around $CYCLE's fixed 12% APY model, limiting how rewards and staking information could be displayed.
What I Designed
The BCL staking dApp emphasises readability, transparency, and confidence — with real-time on-chain reward accrual and clear balance separation between wallet, staked, and pending rewards.
Stake / Unstake Interface · Your Position Panel
Protocol Overview · Fixed APY Stats
Mobile Experience
Designed for full mobile accessibility — users connect, stake, and claim rewards directly from their phones with complete transaction clarity.
Key Design Decisions
01
Step-by-Step Staking Flow
The recurring insight "How do I stake my tokens?" shaped a simplified, guided staking flow. Each step is named, numbered, and explained — eliminating the cognitive work users were previously doing themselves on competing interfaces.
02
Real-Time Reward Display
Rewards on the live dApp accrue every second on-chain. I designed the "Pending Rewards" counter to reflect this visually — giving users continuous, honest feedback that the 12% APY is actively working for them, not sitting idle.
03
Three-Panel Balance Clarity
Wallet Balance, Staked Amount, and Pending Rewards were previously combined or buried. I separated them into clearly labelled fields in the "Your Position" panel — a pattern borrowed from mobile banking that reduced confusion immediately during testing.
04
MAX Button & Transaction Transparency
A single-tap MAX button fills the available balance, removing manual input errors. Contract addresses and Etherscan links are surfaced directly in the UI — giving power users verifiability without cluttering the core staking experience.
Design Responses
Every user concern from research became a direct design decision. These were the three signals that shaped the most impactful changes.
"I don't want to lose my tokens by mistake."
User Concern → Response
Explicit unstake confirmation screens, "reversible vs. irreversible" labels on all actions, and persistent balance displays — Wallet, Staked, and Pending — visible at every step.
"Gas fees keep confusing me."
User Concern → Response
Fee breakdowns shown in plain language before every transaction. Etherscan links surfaced directly — not buried in settings — so users can verify independently without leaving the flow.
"This looks too technical for me."
User Concern → Response
Jargon moved to tooltip layers. Primary surfaces read: "Stake. Earn. Cycle." and "12% APY — Fixed, Rewards accrue every second" — confidence-building, not intimidating.
Validation · Useberry Testing · 4 Participants
4
Participants
Crypto-native users: casual investors, daily DeFi users, long-term $CYCLE holders — all tested the same prototype flow.
0
Critical Blockers
No participant encountered a task-blocking failure during the staking or wallet connection flows — a first-round achievement.
↑
Staking Confidence
Every participant expressed more confidence navigating the redesigned flow versus competitor platforms shown during testing.
Impact
Smoother onboarding — users understood what to do without instruction from the facilitator
→Higher staking completion rate — no drop-offs during the core staking flow in testing
→Clearer understanding of balances — participants correctly identified Wallet, Staked, and Pending Rewards unprompted
→All 4 participants completed the primary staking task — including the MAX button and Claim Rewards flow
→More confidence expressed by token holders — particularly around the real-time reward accrual display and Etherscan contract links
→Reflection