TG Mining Game

-How I designed a game for MIZU played by 100k+ users
Role

UX design, Interaction design, UI design

Time

2 weeks in design

Team

1 designer, 1 product owner, 1 marketing specialist, 1 developer

Stats

Client project

Shipped
Background
Overview

MIZU is a decentralized platform empowering AI with high-quality, community-driven datasets through incentivized data sharing and decentralized infrastructure.


This project is designed to be a lightweight application focused on rewarding users through mining incentives. Our goal is to build an early user base, boost brand awareness, and foster strong relationships with our users.


We aimed for the entire user experience to be fun, rewarding, and effortless, all while conveying a strong brand image. We started with a straightforward test model, dedicating two weeks to UX and UI development. Just one week later, we launched the application officially.

MIZU is a decentralized platform empowering AI with high-quality, community-driven datasets through incentivized data sharing and decentralized infrastructure.


This project is designed to be a lightweight application focused on rewarding users through mining incentives. Our goal is to build an early user base, boost brand awareness, and foster strong relationships with our users.


We aimed for the entire user experience to be fun, rewarding, and effortless, all while conveying a strong brand image. We started with a straightforward test model, dedicating two weeks to UX and UI development. Just one week later, we launched the application officially.

Design Process
Impact

250K+ Users

We are very glad that it went viral quickly after launch, it gained 10K+ users about 3 weeks later and it has reached 250K+ users in December.

Problem
Issues

Confusing for Amateurs

Our fans are not experts and may have no knowledge in Web3.

Untrustworthy Appearance

It looks kind of sketchy and doesn't show any branding.

Rewarding System Not Working

Why users collect points, and what can they do about it?

Goals

Clear User Guidance

Establishing a clear hierarchy and well-defined (CTA).

Gamify UI with Branding

Enhance visuals with a game-like MIZU brand identity.

A Ranking System

Including a leaderboard to allow users to view their positions.

Design Process
Wireframe
1
1

Turn mining procress into steps

Users are confused about the mining process. We should simplify it and clearly inform them about what is happening.

2
2

A clear level & rank system for everyone

A leaderboard shows users where they stand in the community and encourages them to mine more.

Iterations
1
1

Get everyone onboard

Our stakeholders has a designer, a founder and developers, marketing and friends haha, and we work from different time zones.

2
2

Rapid test and feedback for iterations

The develop teams are amazing that they rapidly build out the test version Telegram app and share with us. Sometimes I updated the design during work, and when I got up I already see a new version live. This allowed quick feedback and accurate iterations.

See some major iterations below

Visual Improvements

Mechanism

Mechanism
1
1

Game-style progress tacking for user engagement

Our initial vision was a progress bar to showcase daily mining activity, adding dynamic visuals and keeping users engaged with their status.

2
2

Logic over limits choice of a hidden value system

Due to rewards earned from referrals and staking, setting a clear cap was challenging. To ensure fair and accurate tracking, we opted for a hidden value system over a visible progress bar.

Assets

1
1

Shiny graphics for visual appeal

We added vibrant, eye-catching graphics for points to capture attention and make the experience more visually engaging.

2
2

Adding motion for a dynamic feel

Movement catches the eye, so we added subtle animations, like a dynamic boost icon, to keep the interface lively and appealing.

3
3

Depth for clearer CTA

Depth in CTA buttons makes them stand out as interactive elements, giving users a more tactile and intuitive experience.

4
4

Themed colors interactive icons

Color adds meaning—icons like the home icon use warm yellow for a cozy vibe, helping users navigate intuitively.

The Warmth of Yellow

In UX, it conveys friendliness and approachability, making it ideal for elements like a home icon where the aim is to create a cozy, welcoming feel.

5
5

From flat to 3D for engaging progress

Each mining progress state has a unique, 3D icon with distinct colors, making waiting more engaging and progress easier to track.

Solution

Start mining directly

Users can view their status and starting mining to gain rewards.

Who is leading the game?

Users can view the top 100 leaders, encouraging them to gain more rewards.

Reliable history

Clear proof of all user activities and rewards to build trust.

Takeaways
Learnings
1
1

Quick testing and quick iterations

Be ready to quickly design, test and iterate helps to build high-quality product in an efficient way. Don't insist on one idea or version for too long.

2
2

Approaching goals with both UX&UI

UX&UI should work together to achieve the ideal experience for users. Those two fields have their own strengthenes.