Design: tribe badges

[soup20]

@Antanasijevic @pitoi

We need an interface in the apps for tribe admins to create badges for their tribe. These badges will then be transferred to tribe members when they meet the requirements for each specific badge.

• They should be able to choose from preset options for icons and requirements (what is needed to achieve each badge), and should be able to set a custom badge title and choose an amount of badges to create.
• We should show an inventory of current badges created for the tribe (including icon, title, quantity, and maybe the requirements). We should also have buttons next to each currently existing badge to add more of that badge type.
• We could charge 1 sat per badge created, so when the admin fills out the quantity field when creating a new badge, we show the price they will be charged next to the "Create" button.

Here is a wireframe:

[soup20]

some examples of requirements we could have:

• post 1000 non-consecutive messages in the tribe
• earn 5000 sats from boosts in the tribe
• contribute 10000 sats to the tribe
• add 50 nodes the the tribe knowledge graph
• post a message in the tribe for 100 consecutive days
• reach number 1 on the tribe leaderboard

[Antanasijevic]

@pitoi @soup20 Here is a first rough version. Price is missing at the moment, but i will add it in next version. If i understood correctly, users can only choose requirements set by us, but they can edit name, icon and quantity. If that is the case, i suggest we create a badge for each requirement, so they are ready for use, and allow them to customize name, icon and quantity. In that case, user will never create badge from scratch, but only edit existing ones.

Here is how that may look. This version also has option to create new badge in case that option is needed later. What do you think?

https://user-images.githubusercontent.com/13258550/206329046-49b88a13-cbc5-43e6-a596-b8d63e23bc14.mp4

[soup20]

@Antanasijevic Looking good, maybe we should allow the user to "Add More" of a badge they're already created if they're running low (maybe a "+" button next to each one in their inventory?

[soup20]

@Antanasijevic

Badge list

*just suggestions. not any kind of final list, and don't pay attention to the exact numbers, since those might need to be changed.

Tribes

• reached number 1 on the leaderboard
• reached number 2 on the leaderboard
• reached number 3 on the leaderboard
• reached top 10 on the leaderboard
• posted 200 non-consecutive messages
• posted 1000 non-consecutive messages
• posted 10000 non-consecutive messages
• received 20 boosts
• received 100 boosts
• received 1000 boosts
• added 10 nodes to the graph
• added 50 nodes to the graph
• added 500 nodes to the graph
• posted a message every day for 30 days
• posted a message every day for 90 days
• posted a message every day for 365 days
• spent 10k sats
• spent 100k sats
• spent 1M sats
• earned 10k sats
• earned 100k sats
• earned 1M sats
• received 10k sats in boosts on a single message

Bounties

• completed 5 bounties
• completed 10 bounties
• completed 25 bounties
• completed 100 bounties
• earned 10M sats
• earned 25M sats
• earned 100M sats
• led all developers in completed bounties
• led all developers in sats earned
• led all developers in turnaround time (time from assignment to payment as a % of expected time)

[Antanasijevic]

@soup20 Thank you Sam. Regarding Bounties, i need just one more thing. We will have badges specific to coding language. Can you please consult Kevin, and let me know what coding languages should be taken into account for this?

[Antanasijevic]

@soup20 @pitoi Here is updated version of tribe badges flow. This version shows how it may look if we offer only customisation of existing badges. Beside few minor changes, I have modified a way quantity is presented on badge list, so it is clear how much badges is left vs total created. Also, price is included on the bottom of "Customize badge" screen.

https://user-images.githubusercontent.com/13258550/209179629-979f32cf-45f8-480d-adbe-5239915c7d38.mp4

[soup20]

Looks good Milan!

[Antanasijevic]

@soup20 @pitoi Final design (Dark and light skin) is posted in this figma project https://www.figma.com/file/L1oq8hh8kYU90bQxPAin3G/Mobile-Design-System---Dark-Version?node-id=0%3A1&t=4GT2Y7QjhFdwBb3y-0