Anar Seeds Bar Concepts

 

Notes:

I started with this concept. 

Problems:

• The plus or minus number that represents the difference from the average anar seeds that should be earned by the student can overlap the flag icon or the top anar seed student picture.
• The "350 of 500 anar seeds" area can overlap the top anar seed student picture.

---

Notes:

To make the previous design work, the top anar seed student picture needs to be below "350 of 500 anar seeds". This wastes too much vertical space. 

Also, the + or - number needs to be moved away from the bar, to the earned/total area. This makes it way too wordy and hard to read.

---

 

Notes:

I think we should go with this design. It's clean and simple. If the user wants to learn more information about the bar, they click the "?" button to the left of the bar (people read from left to right, so I think the left side makes sense). This also can give you the entire screen space to explain in detail how the +/- from the average anar seeds number works, how the lowest / highest anar seed students works, and bonus points for reaching the goal (if the instructor sets a goal for the course).

I also show the flag overlapping the top anar seed student picture. I put a white glow around it so it is still visible. In this case, the goal is 500 and the top student has 510.

I placed the +/- number below the total number earned, because if the current user is all the way towards the right edge of the screen, the number might be cut off if it's centered below the profile picture.

---

  

Notes:

Either blue or orange could be used if the instructor does not set a goal for anar seeds. This will also hide the +/- number and the flag icon.