Initial Discourse badge design spec

Feature
65

So this is what I was thinking.

UI presence

  • a user selects their “spotlight” badge, and this is shown underneath their name in the gutter on the topic page. generic icon, with the badge name. (hopefully this addresses @radq’s points about @pakl’s mockup)
  • clicking on the username/ badge expands the profile card, which has the user’s selected badge spotlighted. there are links to the users’ other badges.
  • each badge is gold/silver/bronze and has an associated “artwork,” which is shown if it is featured. There is a default artwork if one isn’t set.
  • clicking on an individual badge shows who has that badge (like stackoverflow).
  • there’s a badge display cabinet on a user’s full profile page, which would look a lot like the profile popout.

Mockup of a post on topic page

badge-context_01.png899×151 5.92 KB

Mockup of a profile popout

badge-context_02.png899×448 42.1 KB

Badge levels

The gold/silver/bronze system implies the concept of levels within a badge. Each could have a different name/ artwork/ description text, but that’s not necessary. To illustrate the concept:

__“Read a long thread all the way to the end” __

  1. read a 1000 post thread from beginning to end! Yeah!
  2. read a 5000 post thread from beginning to end! Yeesh!
  3. read a 10,000 post thread from beginning to end! Yowzer!

I think this is a neat way to show progression in an area*.

Badge groups

I like the idea of each badge belonging to a category, suggested by @erlend_sh. So for example if there were a forum game, like Mafia, you could create a bunch of Mafia badges which would all be linked together. I haven’t shown this in my mockup but I’m thinking a little label above the badge name in the popout would do. Maybe not necessary for v1.

Actual badges

So in my other post I was talking how badges should be meaningful (perhaps the tone was unfair but I still agree with the general gist), this final section is an attempt to transform @codinghorror’s original list.

Ain’t no scrub
Level: bronze
Casted 1 like, quoted a post, read the community guidelines and FAQ, and filled out your user profile.

Arborist
Levels: bronze (1), silver (10), gold (50)
Replied as a new topic x times.

127 hours
Levels: bronze (1000), silver (5000), gold (10,000)
Read a long topic with x posts from beginning to end.

Good citizen
Level: bronze
Flagged a topic or post, and it was accepted.

Trusty
Levels: bronze (2), silver (3), gold (4)
Reach trust level x.

Socialite
Levels: bronze (5), silver (20), gold (100)
Get x new unique visitors from topics you’ve shared.

Perfectionist
Levels: bronze
Edit a post.

Frequent flyer
Levels: bronze (3), silver (14), gold (31)
Visit the forum and read posts for x consecutive days.

.* with thanks to StackOverflow and Advance Wars.

4 Likes