top of page

Xuan
Zhang.

Decentralized Reputation Application (DRApp) — Blockbate!

Meet Blockbate, a platform where you can debate just about anything and earn economic incentives from content contribution empowered by DREP’s decentralized reputation ecosystem. As a debating platform established for all, especially Blockchain researchers, crypto enthusiasts at this stage, Blockbate is the perfect place for users to discuss meaningful topics and express their constructive, accountable opinions as well as authentic ideas online. With Blockbate, we want to encourage heated discussions within civil conversations!

Screenshot 2025-02-28 at 14.16.13.png
Blockbate will demonstrate three core features of our decentralized reputation mechanism:

including voting mechanism, reputation value quantification and monetization using reputation tokens to incentivize good conducts on the platform. We hope that this will help the community to understand a little bit more about the future potential of the system.
Block Highlights
1. Voting Mechanism

The content on Blockbate gets evaluated by an upvoting/downvoting mechanism that locks in your reputation points in order to give your vote a weight. Users endorse their supporting arguments by endorsing some of their reputation points, and in return will get awarded in tokens.

2. User Growth Mechanism

Deployed to promote and identify high-quality, influential content, the voting mechanism in Blockbate adopted the concept of “Reputation Cooldown”. When users want to upvote or downvote something, they will need to lock in a certain amount of their reputation value. Hence the number of votes would be limited, and negative influence of malicious votes will be offset or mitigated, helping Blockbate effectively avoid click farming.

Users of Blockbate undergo five levels of progression: green, blue, brown, silver and gold. The higher level you reach, the more powerful your vote becomes. In the reputation management system, not only can you track where you gain and lose your reputation points, but also you can review your reputation growth on a weekly or monthly basis, and compare yourself within the social community ranking list.

With the help of DREP reputation system, you will be given a calculated REP value (reputation value) and gain incentives of DREP Tokens depending on your behavior on our platform. The more positive contribution you make, the more your reputation value will grow, resulting in more economic rewards.

Know more about Blockbate, download Blockbate One-Pager
For more details of how Blockbate works, check out our latest Blockbate intro video below to find out!

Project Overview

As a UX designer, my goal was to create an intuitive and engaging experience for users passionate about online debates. While the final vision for Blockbate includes fully functional iOS and Android applications, the initial version was developed as an H5 web app to allow for rapid iteration and user validation.

Understanding the Audience

Defining the target audience was a crucial first step. Blockbate is designed for individuals who enjoy structured debates, with the initial version catering to users familiar with the blockchain industry. The platform revolves around user-generated content, allowing users to create debate topics, present arguments, and engage with others through voting and commenting. Ensuring these interactions were seamless and engaging was a primary focus of my design approach

Design Process

The design process followed an iterative approach, beginning with wireframes and paper mockups to explore different layouts and interaction patterns. These early concepts evolved into interactive prototypes, which were tested in multiple rounds of internal and external usability studies. Each iteration provided valuable insights, helping to refine user flows, improve information architecture, and enhance accessibility. The final designs incorporated high-fidelity prototypes that underwent rigorous usability testing to ensure a smooth and efficient experience.

Development Approach

To align with our agile development methodology, we implemented an iterative design process with usability testing at key milestones. The team worked in sprint cycles, with daily standups to ensure alignment between designers and developers. We conducted two internal and two external usability testing rounds to identify pain points and optimize the design. A key principle driving development was the elimination of major usability issues, ensuring that each release met high-quality standards before moving forward.

Content Strategy

Content played an essential role in enhancing the user experience. I collaborated closely with the content team to structure key sections, including user terms, privacy policies, and a comprehensive help center. To improve user onboarding, we incorporated tutorial videos and interactive pop-up guides to familiarize new users with the platform’s core functionalities. Clear, concise, and accessible content was essential to ensure users could navigate the platform effortlessly.

Usability Testing & Validation

The usability testing phase aimed to validate the effectiveness of the design. We recruited over 50 participants to complete representative tasks that simulated real-world interactions. Participants signed up, explored the homepage, watched tutorials, posted arguments, engaged in debates, and utilized the platform’s voting and reputation features. These sessions were conducted remotely, allowing participants to use their own devices in natural settings.

 

Key usability metrics included task completion rates, time on task, and error-free interactions. Our goal was to ensure users could complete all tasks efficiently within a 40-minute session. We also collected qualitative feedback through pre-test and post-test surveys to assess user sentiment and identify areas for improvement. The final usability report compiled these findings, highlighting usability concerns, analyzing user behaviors, and providing actionable recommendations for further iterations.

Conclusion

By adopting a user-centered design approach, the Blockbate project successfully balanced functionality, usability, and engagement. The iterative testing and agile development process enabled continuous refinement, ensuring an optimal experience for users passionate about structured debates. Moving forward, insights from this project will guide future enhancements, expanding Blockbate’s capabilities and impact.

App UI Design

First Version

Forgot passowrd – 1.png
home (2).png
Side-no – 2.png
Side-no.png
Side-no – 3.png
Side-no – 13.png
sorting arguments.png
create new debate – 1.png
add an argument – 1.png
home – 3.png
home.png
sorting arguments – 5 (1).png

Second Version

Screenshot 2025-02-28 at 23.43.00.png
Screenshot 2025-02-28 at 23.42.50.png
Screenshot 2025-02-28 at 23.41.18.png

UI CONCEPT ON PC

blockbatepcbanner.png

USER GUIDE

onboarding2_4x.png

UI CONCEPT ON MOBILE

blockbate-updates.png

SIGN IN & SIGN UP

login_4x.png

Website design and content @ 2025 Xuan Zhang

bottom of page