Oddbean new post about login | logout Badges - Design Journey
Have a read and join the conversation 👇
<author: Lana> #BuildOnBitcoin
Read story: https://bolt.fun/story/badges-design-journey--1077 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 😄
Hey MTG, thank you for these insights. I agree with you, we should change the layout of the profile cards for the badges. For sure more lines of text, and the progress bar needs more updates haha. This one in the post was a concept to see what is possible to incorporate, I will definitely work more on that structure :)