Hey Lana
I'm going to start developing the front-end components for this feature next week.
So I had a couple of thoughts on the UI of the badges components that I wanted to share with you.
\- We should consider that the badges description will in most cases be longer than 1 sentence. Since we will be using the badges to educate people about some parts of the platform that they might not have used.
So I think the description for some badges will be multiple lines.
\- The images are nice & neat. But I feel that they are a bit too "abstract" or "generic".
I saw the images at the top of the figma file (the ones that seem to be generated using mid-journey) & I think they look more "interesting".
\- The progress bar should be bigger so that in the case of badges that require a lot of progress steps (e.g. write 50 stories), the progress is kind of visible.
\- I think it would also be a good idea to have a progress count close to the progress bar somewhere (saying something like: "14/30")
For most of the points above, I think making the layout of the badges component list-like instead of grid-like would fix them.
So the items list would look something like:
\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLE
\\\\ IMAGE \\\\ PROGRESS BAR
\\\\\\\\\\\\\\\\\\\\\\\\\\ DESCRIPTION
Let me know your thoughts on my thoughts 😄