Algorand DeFi Ecosystem · UX Case Study
BCL Staking DApp:
Wealth Through DeFi.
The Project
A simplified staking interface for $Cycle token holders.
What Was Built
Wallet connection (Pera Algo), staking & unstaking, real-time reward visibility, transaction confirmation states, and a structured onboarding flow — all within a clean, mobile-responsive dApp.
Collaboration
Designed responsive flows for web and mobile in 4 weeks alongside a Web3 developer — implementation tracked through GitHub.
Blockchain
Algorand. Designed for compatibility with the Pera Algo wallet and ecosystem-specific tokenomics restrictions.
Stakeholders
$Cycle token holders — ranging from casual investors and daily DeFi users to long-term community supporters.
The Design Problem
Why are users dropping off before they even stake?
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
Two phases. One recurring theme: confusion.
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
Who I designed for.
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 Pera Algo wallet daily. 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 ALGO in Pera wallet but never used a dApp before. Needs a guided onboarding flow with plain language and clear next steps.
Competitive Analysis
What the staking landscape gets wrong.
Reviewed staking flows across Algo ecosystem DApps, Solana tools, and Ethereum staking interfaces to surface gaps in wallet connection, transaction clarity, and real-time reward visibility.
Key Pain Points
Three barriers.
One redesign.
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, limiting how rewards and staking information could be displayed. Design had to work within these hard constraints.
What I Designed
Clean, mobile-responsive, built for confidence.
The redesigned BCL staking dApp emphasises readability, transparency, and confidence — for both new and experienced token holders.
Swap & Liquidity Interface
NFT & Token Staking Dashboard
Mobile Experience
Pera Algo wallet. Seamless on every screen.
Designed for accessibility — users connect, swap, and stake directly from their mobile devices with total security.
Key Design Decisions
Every choice had a reason.
01
Step-by-Step Staking Flow
The recurring insight "How do I stake my tokens?" shaped a simplified, guided staking flow that reduced mental load. Each step is named, numbered, and explained — eliminating the cognitive work users were previously doing themselves.
02
Real-Time Transaction Feedback
Transaction confirmation was the #1 drop-off point. I designed explicit loading, pending, and success states tied to the Algorand chain — giving users continuous, honest feedback throughout the irreversible on-chain process.
03
Token Balance Clarity
Staked, available, and reward balances were previously buried or combined. I separated them into clearly labelled cards — a pattern borrowed from mobile banking that immediately reduced confusion during testing.
04
Pera Wallet Connection Simplification
The wallet connection flow was stripped to its minimum necessary steps. Gas fee breakdowns made explicit and framed in plain language — addressing the "fees keep confusing me" insight directly in the critical conversion moment.
Design Responses
User said it. Design solved it.
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, clear "reversible vs. irreversible" labels, and persistent balance displays at every step.
"Gas fees keep confusing me."
User Concern → Response
Fee breakdowns shown in plain language before every transaction — labelled as a flat amount, not a percentage or technical formula.
"This looks too technical for me."
User Concern → Response
Removed all blockchain jargon from primary UI surfaces. Terms like "on-chain" and "smart contract" moved to a tooltip layer — accessible, not front-and-centre.
Validation · Useberry Testing · 4 Participants
Meaningful improvements in user interaction. First round.
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
Testing results.
Round one.
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 and rewards — participants correctly identified all three balance types unprompted
→Better interaction success during testing — all 4 participants completed the primary staking task
→More confidence expressed by token holders — particularly around transaction confirmation and fee visibility
→Reflection