Product Center

Visual Prototype of the THX Reward Gamification

We know that gamification is a major buzzword, that you’ve heard often but this article will — continue reading
Posted by Taco Potze
December 28, 2018

We know that gamification is a major buzzword, that you’ve heard often but this article will be worth your time. Previously, we introduced Gamification 3.0 and demonstrated how this solution works using THX tokens to reward members in your communities.

This time we’ll show you how Gamification 3.0 could be implemented into Open Social, our own community software. This includes how it could be set up in by an administrator and what the earned tokens will mean for users. One could call this a look at our very first (very informal) prototype.

If you are looking for more information on the THX project, please see www.thxproject.com.

TL;DR In a hurry? Check out the result of our prototyping in this 43-second video or click-through the online prototype

 

Why do we need a visual prototype?

Blockchain projects tend to have rather long and technical white papers, which we have too! But sometimes seeing is believing. This is why we want to show you how THX and its reward system would work in Open Social. This way, we can also discuss the THX project, features, and design in an early phase and make the end-result better.

We’d love to hear your feedback in the comments!

Writing detailed user stories

User stories are short descriptions of a feature from the perspective of a user or a customer. It usually follows the following structure:
User stories for gamification 3.0

This helps us understand the feature from the user perspective and shift the focus from writing to discussing. We started writing the users stories for THX in Open Social where SM refers to a Site Manager of a community, AN is an anonymous (not logged-in) user, and LU is a logged-in user.

We chose two common scenarios to show you how exactly THX could work.

Setting a new reward as a Site Manager

This user story requires the following steps:

  1. As an SM I want to see a ‘Setup Rewards’ admin interface that is reachable through the community dashboard.
  2. As an SM I want to see the pool of THX my platform has or receives monthly.
  3. As an SM I want to fill out the amount of THX reward that each user receives when they a) connect their Wallet to their THX account and b) finish filling out a profile.
  4. As an SM I want to save this information.

Earning THX tokens as a community member

This user story requires the following steps:

  1. As an AN I want to create a new Open Social account and be directed to the edit profile page.
  2. As an LU I want to see that when I connect my Wallet, I get an X amount of THX after connecting my Wallet.
  3. As an LU I want to connect my THX Wallet to Open Social.
  4. As an LU I want to see that when I fill out my profile, I get X amount of THX.
  5. As an LU I fill out my entire profile.
  6. As an LU I save my profile and get a message saying it’s completed.

Sketching the visual screens and workflows

We use Sketch for the lightning fast prototyping of new Open Social features or specific client requests for custom features. The following screens were made by our interaction designer Xinyu Ma and were also discussed intensively with our developers, product owners, and other team members.

1. Setting up rewards in Open Social

Since THX is being developed under the leadership of Open Social, the project will be open-source by nature and should be able to be used in a variety of social software tools. For the administration part, we let go of some of the typical Open Social structures and look-and-feel.

Keep in mind that this is just a prototype and that there will be many more iterations before the final development..!
THX administrator dashboard prototype

 

This initial page should give the community managers a quick overview of the THX funds that are going in and out of the community and the total size of their community pool. If you want to know more about this in detail I advise to read our white paper – it will answer more questions on THX than we will be able to in this blog post.

Let’s add a new reward rule to the community. We do so by opening the Rule Configurator:
Rule Configurator

One active reward rule has already been set up: when a user connects their THX Wallet to their social community account they receive 100 THX tokens. Since the value of connecting a THX Wallet to the community differs per community, this value is variable.

Now, we can add a new rule, such as rewarding a user when they complete their user profile:
Profile completion

 

Next, we set the THX value that we think a complete profile is worth to us and save the rule.

 

Save complete profile rule

 

After saving the rule it becomes active on the platform. When users complete one or more of these goals they will earn THX tokens!

2. Connecting your THX Wallet to your community account

It is up to the user to decide if he or she wants to share their THX information with the community. To protect a user’s online identity they can also use multiple THX wallets, for example, one for professional and one for personal usage.

To start earning THX, we connect our THX Wallet to the community:

 

Connecting a THX Wallet to Open Social

 

In this example, we use MetaMask to connect our Wallet to the website. Read more on MetaMask and why it’s important, but in short:

MetaMask is a browser plugin that allows users to make Ethereum transactions through regular websites. It facilitates the adoption of Ethereum because it bridges the gap between the user interfaces for Ethereum (eg. Mist browsers, Dapps) and the regular web (eg. Chrome, Firefox, websites).

It’s ok if you don’t fully get the tech behind this concept. What we are doing is making sure the community app, say Open Social, can interact with your wallet to store and pay THX, store additional information on your reputation, and share any necessary information with the community.

 

Connecting Open Social to THX Wallet with MetaMask

 

After connection the user is informed and encouraged to take the next step on the platform, for example, to fill out their profile:

 

THX Wallet connection Open Social

 

Also, a notification has been created to inform the user that they just earned their first 100 THX tokens by connecting their wallet. How cool is that?!

 

Notification of THX receivement

3. Earning THX tokens in Open Social

So the user continues interacting with the platform and hitting our created THX rule reward markers. For example, by filling out their profile information:

 

Profile completion

 

And so they receive another 200 THX for their contributions to the social community!

 

Receiving THX tokens Open Social notification

 

This concludes our visual prototype of setting up THX rewards and receiving THX in an Open Social community. You can see the entire workflow of the prototype online and experience the entire journey for a community manager and user of the THX Project here.

Being able to visualize a project makes all the difference. It makes it tangible.

Having this prototype also makes it easier for us to explain the THX Project to Open Social clients and everybody that’s interested in seeing what THX can do in action. We would love to hear your feedback and thoughts on the prototype. Where can we improve? What are you still missing?

Next up in this blog series: how would this work with your mobile THX Wallet app where multiple communities using THX gather your incoming and outgoing THX tokens? We will prototype the following stories:

  • As a THX Wallet App user I want to create a new THX Wallet account.
  • As a THX Wallet App user I want to receive a notification from the THX Wallet.
  • As a THX Wallet App user I want to open my Wallet app and login.
  • As a THX Wallet App user I want to see I received THX for connecting my Wallet to Open Social and filling out my profile.

More about THX at www.thxproject.com.

In this article we discuss

Related articles