# Initial Discourse badge design spec

**URL:** https://meta.discourse.org/t/initial-discourse-badge-design-spec/13088
**Category:** Feature
**Created:** [2월 26, 2014, 9:55오전 UTC](https://meta.discourse.org/t/initial-discourse-badge-design-spec/13088 "2014-02-26T09:55:39Z")
**Posts on this page:** 1
**Showing post:** 65

<div class="post-metadata">

### Author: ![haiku](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/haiku/32/103858_2.png) [@haiku](https://meta.discourse.org/u/haiku)
#### Post date: [3월 2, 2014, 2:09오후 UTC](https://meta.discourse.org/t/initial-discourse-badge-design-spec/13088/65 "2014-03-02T14:09:03Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/2X/4/4e1f53ac81321d16eac729269445d2ad153e25a8.png) 

### Mockup of a profile popout

 ![](https://global.discourse-cdn.com/meta/original/2X/b/bd65ede5ab2e301fbb73b34d65aab8f20b2d5ce6.png) 

* * *

## 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. ![](https://global.discourse-cdn.com/meta/original/2X/b/b9fe8804787947c0c6c66f584a5bfe2dbb14544c.png) read a 1000 post thread from beginning to end! Yeah!
2. ![](https://global.discourse-cdn.com/meta/original/2X/c/ce8929b85968f0914bd59b6cba516cc20ef66414.png) read a 5000 post thread from beginning to end! Yeesh!
3. ![](https://global.discourse-cdn.com/meta/original/2X/6/6f4cbea99a3ac1491ad3af3e436f4836c9f26f21.png) 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](https://meta.discourse.org/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.

---

_[View the full topic](https://meta.discourse.org/t/initial-discourse-badge-design-spec/13088)._