SophiaVerse Guardians are dedicated community members who stake SOPH tokens to earn protective equipment like shields, signifying roles and in-game effects within the ecosystem. As design lead I was tasked with designing the UX/UI for token staking.
SophiaVerse needed an intuitive staking UX for earning Guardian shields, as the process felt intimidating for users unfamiliar with Web3 mechanics, lacking clear steps and feedback to build confidence from token input to reward visualization.
The staking process is distilled into a linear four-step flow: users first select their SOPH amount using a horizontal input UI with fixed options, then choose a stake duration via a similar slider, preview the earned Guardian rank and shield effects, and finally review details before confirming all achievable in just three clicks total.
The design adopts a modern HUD style with glassmorphism, blue neon gradients, and dark backgrounds to align with in-game visuals, featuring horizontal sliders for fixed amount/duration presets, step-wise rank/shield previews, bold labels, minimal text, and confirmation modals for clarity. The Guardian logo two variants of a geometric shield with inner glow uses layered blues for futuristic depth, embodying protection while integrating into UI headers and previews.
The interface breaks staking into four labeled steps SOPH amount, stake duration, Guardian rank preview, and confirmation using horizontal input sliders for fixed options that require only three clicks total, including final approval. A modern HUD-style UI mirrors the game's aesthetic for ecosystem consistency, with clear progress indicators and previews reducing cognitive load and making Web3 actions feel accessible and game-like.
I created a step-by-step After Effects tutorial video demonstrating the staking UX flow, breaking down the three-click process with animated overlays to illustrate user interactions, slider presets, and reward previews enhancing developer handoff and community onboarding.
The simplified three-click flow and step-by-step clarity lowered barriers to staking participation, boosting Guardian shield adoption and community engagement by making token utility tangible and rewarding within SophiaVerse.
