Staking Experience

I played a key role in redesigning the staking experience for a leading Web3 sports platform, streamlining the process for users to earn rewards by holding cryptocurrency tokens and NFTs of their favourite athletes. The new design introduced a simplified staking system while maintaining transparency and trust, ensuring seamless participation for both new and experienced users. By enhancing usability, I helped create a more intuitive experience that promotes long-term participation that strengthens the platform’s ecosystem.

UI/UX Methodologies
UX Research, Community Participation, UI Design, Interaction Design, Moderated Usability Testing, Iterative Prototyping

Duration
May 2022 - August 2022

Company
Blockasset

Problem

How can the staking process be engaging for the users?

Features

Here’s a quick sneak peek at our revamped features:

  • Gamification

    Since games are engaging and less intimidating, we incorporated elements from the gaming world into the staking experience.

  • Transparency

    Transparency is essential, particularly when it comes to educating users about their rewards and how they are calculated. To address this, we built an in-platform reward calculator.

  • Dynamic CTAs

    An element borrowed from the gaming world, dynamic CTAs guide users on the next steps, helping to prevent confusion.

  • Dashboards

    Real-time display of users’ cryptocurrency tokens and NFT holdings are displayed.

  • $ASSET and $BLOCK

    $ASSET and $BLOCK are two types of tokens, with a clear distinction made through design for easy identification.

Design Evolution

Getting to Know the Users 🧑‍🎤

01

Usability Testing the Live Experience 🧐

02

Defining Need and Mapping Flows 🔍

03

Lo-Fi Wireframes for Feedback  ✍️

04

Hi-Fidelity Mockups 🖌️

05

01. Getting to Know the Users

The company and its products foster a close-knit community across various social media platforms, consisting of users who are either here to support their athletes or to invest. Interviews and surveys were conducted within this community to identify and define the user base as follows:

New Users

These users are new to the world of crypto but are on the platform because it supports their favorite athletes.

Crypto Users

These users are experienced with crypto but new to the platform.

Enthusiasts

These are experienced crypto users who have been active on the platform for an extended period, purchasing athlete tokens and NFTs.

I'm a UFC fan, but a beginner trying to grasp crypto concepts. I feel overwhelmed when I navigate web3 spaces.

- A new user

“Is there a way to calculate rewards here (BA’s token staking)?”

- A crypto user

“I own numerous NFTs I like to handle them collectively. It's disappointing that there isn't an option to stake or unstake BA NFTs in batches”.

- Enthusiast

02. Usability Testing the Live Experience

Since this is a redesign project, moderated usability testing was conducted on the existing experience to identify key areas for improvement.

Pain Points:

❗️Staking can be intimidating for new users.
❗️Even crypto users found it confusing to determine what could be staked, unstaked, and claimed.
❗️The navigation between token staking and NFT staking in the legacy experience was notably confusing.

03. Defining the Need

Before exploring the need for improvements, here’s a brief introduction to staking at BlockAsset. Users can stake digital assets, including tokens and athlete NFTs created by world-renowned artists. By locking these assets, users earn rewards while athletes build stronger connections with their fanbase. For the platform, this boosts user retention and engagement, creating a more dynamic and sustainable ecosystem.

What is staked?

How It Works?

🔗 Locking Assets – Users stake (hold) their tokens or NFTs in a smart contract for a set period.

🤑 Earning Rewards – In return, they receive rewards, often in the form of additional tokens, based on factors like the amount staked and duration.

⛓️‍💥 Unstaking – After the staking period, users can withdraw their assets.

The Need

The goal is to implement a simple, non-overwhelming way to display the staking process, ensuring clarity and ease of use for all users, whether they are experienced crypto holders or new to the Web3 space. The approach is designed to make the staking process more engaging, motivating users to participate actively while enhancing their overall experience:

Clear Visual Indicators

Using clear labels, progress bars, and feedback mechanisms to guide users through each stage of the staking process, making it easier to follow and track.

Simplified Language

Using straightforward, easy-to-understand language, avoiding complex crypto jargon to make the experience more accessible.

Transparent Reward Structure

Showing users exactly how rewards are calculated and what they can expect to earn based on their staking actions.

Incentivized Simplicity

Keep the process simple by limiting the number of steps or actions needed to stake, while still offering value

User Flows

04. Lo-Fi Wireframes for Feedback

Here are some lo-fi wireframes I created, along with design iterations based on usability testing results.

I also led the recruitment of a sample of participants from the Blockasset community, ensuring a mix of all three user personas mentioned earlier.

❗️Feedback 1 - NFT STaking: Most users found decision-making difficult as they had to switch between tabs and NFT collections to get a complete view of their standing.
→ Led to simplifying the navigation and displaying all NFTs together.

❗️Feedback 2 - NFT STaking: Users commented on insufficient metrics to encourage NFT staking.
→ Led to identifying key metrics and adding them to the interface.

❗️Feedback 3 - Token Staking: Users found it difficult to manually calculate staking returns.
→ Led to the creation of a rewards calculator

05. Hi-Fidelity Mockups

Key Takeaways

  • The use of subtle animations increases engagement, encouraging users to explore further and making the experience enjoyable rather than intimidating.

  • The importance of softening technical jargon to build trust and increase adoption.

  • Selecting the right participants and ensuring diversity in their familiarity with the service.

Other Works

Employee Advocacy

Content Planner