In my app, each player performs a task called a Skill Set, levels 1 - 8. A team leader can view all the players on the team to see each task status, which can be:

  1. Incomplete
  2. Complete and has not yet earned the badge (which must be explicitly granted by the team leader).
  3. Complete and has earned the badge.

I'm trying to design the UI for the team leader to indicate each of these three states, with a suitable indicator for state 2 so the team leader can click it to grant the badge.

So far, I've got this, but it's terrible:

enter image description here

  1. Incomplete: -Blank-
  2. Plus icon
  3. Checkmark icon (an image of a badge would probably be better)

What would be a better way to indicate each state, and especially state 2, where there's an action for the team leader to take?

Update to show my implementation of accepted answer:

Taking the suggestions below, I opted to show nothing for state 1, a gray checkmark for state 2, and a blue checkmark for state 3:

enter image description here

Each state has a custom tooltip (not shown) that explains what each state means and what you can do next.

  • What does the existing flow looks like for a team leader to assign a badge to a completed 'Skill Set'?
    – Igorek
    Nov 2, 2015 at 16:14

4 Answers 4


You could even go the route of:

1: Grayed out/faded checkmark 2: Green checkmark at full opacity 3: When the team leader clicks the checkmark, you could add a small badge/symbol to the checkmark.

Rough idea attached. enter image description here

Or where there is no faded checkmark at all, which would probably help clean up a lot of visual distractions, even if it was faded, and then a blue checkmark that when awarded the badge, changes to green with the decoration. Like so.

enter image description here

  • I'd use the grey checkmark icon for state 2 and the green one (without star) as state 3. As it is to be placed in some sort of spreadsheet the star will probably be too small to be visible.
    – Martyn
    Nov 2, 2015 at 23:09
  • Ah good point, @Martijn. Forgot about how small that would be. Yeah, that combination would work too.
    – Charles
    Nov 3, 2015 at 14:51
  • I did essentially what I think is essentially this. Marking this as the answer and updating my question to show my solution. Nov 5, 2015 at 16:08

What about using a progressbar indicator, where it at first is grey?

When the progress is approved for badge, it changes over to another color: green. Badges then appear on the user profile. This saves you the hassle of implementing glyphicons and the users wont mistake the glyphicons for actions that they might think are not working.


We're not in the business of designing icons here. But I think it would be economical and clear to have separate icons for Complete and Badged, and show both icons for #3.

That way, "Got the Badge" status is obvious not just because of the icon, but because there are two icons. It's easy at a glance to see the differences between no icon, one icon, and two icons.


I would put a priority highlight on the "Completed, but not badged" state, since this is the one the administrator has to put HIS focus on - it's the most important information for him. So assuming the table can be as complex as possible, instead of only using an icon, I would also color code the table (colored background, colored space in front, "give me some attention label", ... ).

I would have the badge fancy, but not the most prominent one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.