Improve badges title and make them more visual

[darechan]

Feature Request

1. Designing badges for achievements

Zubhub currently have a variety of Badges for creators on the platform as follows (Ascending)

1. Hatchling
2. Flying Bird
3. Master of the sky
4. Expert Builder
5. Helping Hand
6. Always Available
7. Expert Advisor
8. Getting Famous
9. Person of Interest
10. Popular Projects
11. Idea Factory
12. Interesting Projects
13. Favourite Kid
14. Captain Projects

But these badges currently are only in a form of text

Having visual badges that could be displayed on the profile and downloadable/sharable for the user would look a lot more pleasing.

Also if we could add in a few rewards like a custom frame unlocking or a special feature on earning a badge then that would make the website more interactive! Would love to have UI and UX assistance for the same!

[Rosietta-UIUX]

Wow @darechan I just opened an issue similar to this (Badge redesign) how can we merge it? I love the idea

[darechan]

@Rosietta-UIUX Please attach the idea here and add a comment on the other issue with a comment merging with #642 and press the close with comment button

[Rosietta-UIUX]

@darechan Alright let me do that

[darechan]

@Rosietta-UIUX Can you upload the proposed designs here?

[Rosietta-UIUX]

Hello @sethiastha, @srish, @tuxology

While browsing the Zubhub website with my younger sister, she pointed out that the badges on the site are plain and unattractive, resembling tags rather than fun badges. Therefore, I would like to request to be assigned to this issue along with @darechan so that we can redesign the badges and make them more visually appealing.

Current Badges

Proposed Redesign

[kan-ma]

badges design
hatchling
flying bird

[tuxology]

While you all think about it, please ensure that images should be open access/licensed under a creative commons or should be self drawn. We cannot use random birds and emojis from the internet. Look at https://openclipart.org for a starting point.

[Rosietta-UIUX]

Thank you @tuxology

[ferindesigns]

@darechan What do you think?
This

or this

[darechan]

@darechan What do you think?
This

or this

I think this badge is good but the doesn't matches the theme of the website don't you think so too?

[ferindesigns]

@darechan What do you think?
This

    [
      
    
        ![Blue Red Colorful Good Job Student Stickers](https://user-images.githubusercontent.com/108564127/225315976-00ebd3ba-78fb-483c-a2f5-1ea8e1da8c0a.gif)
      ](https://user-images.githubusercontent.com/108564127/225315976-00ebd3ba-78fb-483c-a2f5-1ea8e1da8c0a.gif)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://user-images.githubusercontent.com/108564127/225315976-00ebd3ba-78fb-483c-a2f5-1ea8e1da8c0a.gif)

or this

I think this badge is good but the doesn't matches the theme of the website don't you think so too?

okay will work on something else.

[comfy96]

what do you think about this? @darechan

I'm still working on some, just wanted to show you this first.

[darechan]

@comfy96 the may be you could use some graffiti fonts and make it more playful as our intended audience is young children

[comfy96]

okay, I'd work on something right away. @darechan

[Ami112-sketch]

Hi @tuxology
It will be a nice feature to add a brief description of each badge( what each badge means or entails) under each of the visuals and use a graphic image/ visual badge that gives meaning to the children( we are providing them with options i.e meaning via the image and also the brief description beneath the visual

[Ami112-sketch]

Hi @tuxology It will be a nice feature to add a brief description of each badge( what each badge means or entails) under each of the visuals and use a graphic image/ visual badge that gives meaning to the children( we are providing them with options i.e meaning via the image and also the brief description beneath the visual

@darechan

[comfy96]

what do you think @darechan

favorite kid: looking all cheerful

[ferindesigns]

@darechan what do you think about this for idea factory?

[darechan]

@ferindesigns Neat work!

[ferindesigns]

@ferindesigns Neat work!

Thank you

[ferindesigns]

@darechan what do you think?

[comfy96]

@darechan @tuxology @srish @AsthaSethi

[ladyami]

As a designer, my goal is to create badges for Zubhub creators that are not only visually appealing but also informative and meaningful. To achieve this goal, I first understood the purpose of each badge. The Flying Bird and Master of the Sky badges represent a creator's growth and development. The Expert Builder and Helping Hand badges represent a creator's ability to build high-quality content and help others. The Always Available and Expert Advisor badges represent a creator's positive attitude, willingness to engage with their users, and expertise in their field. The Getting Famous, Person of Interest, Popular Projects, Idea Factory, and Interesting Projects badges represent a creator's growing popularity and the unique and engaging content that they create. The Favourite Kid badge represents the creator's popularity with their users, while the Captain Projects badge represents the creator's leadership and ability to manage their projects.

After understanding the purpose of each badge, I brainstormed ideas for icons, colors, and text that would best represent each badge. I chose blue and yellow as the main colors for the badges, as they are both associated with the sky and flight, which are symbolic of growth and potential. I used a bird icon for the Flying Bird badge to represent a creator's growth and development. For the Master of the Sky badge, I chose a bird icon soaring through the sky and added black to represent luxury and excellence. which are both qualities of a master of their craft.

I applied a similar approach when designing the other badges, carefully considering the icons, colors, and text for each badge to create a design that is visually appealing and meaningful. I made sure that the badges were consistent with the overall branding of the Zubhub platform by using the same colors and fonts that are used throughout the platform. This helps to create a sense of unity and consistency for users.

In conclusion, I hope that the badges I designed we be both visually appealing and meaningful to Zubhub creators. I hope that these badges will encourage creators to continue contributing to the platform and creating high-quality content.

https://www.figma.com/file/CSYODN3L9Vp5BsokH611HI/zubhub-badges?type=design&node-id=2%3A480&mode=design&t=Hln4mXCMCDymNsdy-1

@srish Could you please review the badge proposal Your feedback and suggestions would be much appreciated.

[hdtouch101]

Hi, can I proceed with solving this issue?

[srish]

@DonPresh, it looks like your designs are in line with the website's theme, which is great. Would you be able to provide a few additional variations and maybe suggest alternative names for badges? We've been considering renaming some of them, as a few might be unclear to high school students.

@sethiastha, @Faridah-ux, could you please share your thoughts and ideas on this matter as well? Your input would be valuable.

[DonPresh]

@srish Thank you for the feedback. Yes, I can provide more variations for the badges.
About the renaming, which of the badges are you considering renaming? Maybe I can come up with some cool suggestions.

Personally, I think I like Captain Projects a lot. Sounds like a Disney or Nickelodeon character.

[productguyyy]

@srish I will love for you to see the ideals I have of the badges, please can you assign the task to me?

[N-TITIAN]

@srish i will love to work on the badges or even collaborate with another designer , can i start right away?

[outcast-02]

Hey @DonPresh I would like to collab with you if you are okay with it! Let me know and we can connect and share some ideas ^^

[pachougu]

@DonPresh can we collaborate on this i also have a good ideal that can march yours

[pachougu]

I love us to work on this

[Temabo]

@DonPresh Soild work! The badge designs look good, I have some design ideas and would love to collaborate with you on figma.

@srish here are some suggestions for alternative badge titles;
Newbie Explorer
Soaring High
Sky Commander
Skillful Creator
Friendly Guide
Ever-Present Buddy
Top Advice Guru
Rising Star
Community Influencer
Hot Picks
Creative Spark
Intriguing Ventures
Student Favorite
Project Captain

What do you think about these titles?

[outcast-02]

Hi @srish I have a few suggestions too for the title of the badge if you like it we can proceed with the design that will suit the term.
1.Discovery Dynamo
2.Tech Wizard
3.Team Spirit Trooper
4.Knowledge Ninja

[DonPresh]

Hey @outcast-02 @Temabo @pachougu

Sure, we can collaborate. Maybe bounce off ideas here so anyone else interested can join us.
Does that work?

[outcast-02]

@DonPresh Sure I am up! let me know if we can connect on zulip chat

[mehreeee]

@srish I have a few suggestions for the names
Hatchling ~ Novice
Flying Bird ~ Amateur
Master of the sky ~ Senior
Expert Builder ~ Enthusiast
Helping Hand ~ Professional
Always Available ~ Expert
Expert Advisor ~ Leader
Getting Famous ~ Architect
Person of Interest ~ Veteran
Popular Projects ~ Achiever
Idea Factory ~ Master Achiever
Interesting Projects ~ Super Commando
Favorite kid ~ Grandmaster
Captain project ~ Prodigy

[mehreeee]

I think we should keep the names fun and simple for high school kids

[mehreeee]

Hey @outcast-02 @Temabo @pachougu

Sure, we can collaborate. Maybe bounce off ideas here so anyone else interested can join us. Does that work?

I'm interested

[DonPresh]

Hi @srish I was thinking for renaming the badges, we could explore the idea of creating a more engaging and thematic title ranking system for our reward badges.

I think having a themed approach could make the experience even more exciting for our users since they are young and impressionable.

For instance, we could consider themes like a military theme, something magical or wizard-related, or even something fun like poultry or gaming.
As an example, within the Poultry theme, we could have badges named after various aspects of poultry, such as "Hatchling," "Rooster," "Nest Builder," and so on. This approach could not only make the badges more interesting but also add an extra layer of fun and creativity to the platform.

What are your thoughts on this?

[Faridah-ux]

@DonPresh, it looks like your designs are in line with the website's theme, which is great. Would you be able to provide a few additional variations and maybe suggest alternative names for badges? We've been considering renaming some of them, as a few might be unclear to high school students.

@sethiastha, @Faridah-ux, could you please share your thoughts and ideas on this matter as well? Your input would be valuable.

@DonPresh, it looks like your designs are in line with the website's theme, which is great. Would you be able to provide a few additional variations and maybe suggest alternative names for badges? We've been considering renaming some of them, as a few might be unclear to high school students.

@sethiastha, @Faridah-ux, could you please share your thoughts and ideas on this matter as well? Your input would be valuable.

Hello @srish In my opinion, I think 14 badges is a lot. I think it should be reduced to 7 badges. This is because we don't have enough features to mark these milestones.

We could select 7 badge names from the ones we have already.

Like Hatchling- For when they create an account.
Flying Bird- For when they successfully create a project.
Master of the sky- For when they have created 3 projects.
Helping Hand- For when they create a Team.
Getting Famous- For when they get 50 views on their project.
Person of Interest- For when they get 20 claps on their project.
Captain Projects- For when they have created 10 or more projects.

Nice work @DonPresh

[pachougu]

I agree to what @ferindesigns said, I also explore so designs for the badge using 3d effect to make more fun and the i also added it to the dashboard to see the look and feel of it. @srish I believe if we create fun badge and make this product more fun to our end user with the badges it will attract and gain the mid of users, just like togo app did to it users then cause everyone wants to scale up to profession and that made togo app more fun among peers.

[N-TITIAN]

@srish i will love to work on the badges or even collaborate with another designer , can i start right away?

while waiting for the new badge names i decided to design a badge for "Idea Factory" badge

[outcast-02]

Hi @srish I looked into the badge improvement and came up with an idea.
the idea is to focus on the badge shape first then the icon/vector. I know this might seem like extra work to focus on but I did some research and realized that we should give the users some extra options. like the color of the badge and the icon/vector inside it.. after all, getting the same-looking achievement batch with others might not be that exciting when they worked hard to reach a milestone to get the achievement badge. So I made one batch of designs sharing that here

[Mbeute23]

@DonPresh Pls can i going the team to work on the badges together?

[Shulamite54]

@srish , Here are my few suggestion.

Flying Bird - Friendly Feathered Friend
Master of the Sky - Sky's Superhero
Helping Hand - Helping Buddy
Getting Famous - Rising Star
Person of Interest - Cool Character
Captain Project - Captain Adventure

[DonPresh]

@srish Thank you for the feedback. Yes, I can provide more variations for the badges. About the renaming, which of the badges are you considering renaming? Maybe I can come up with some cool suggestions.

Personally, I think I like Captain Projects a lot. Sounds like a Disney or Nickelodeon character.

@srish I illustrated two more variations for the badges. I’ve not drawn more because I’m holding off till decisions are made on renaming the badges

[Mbeute23]

Issue: Improve badges tittle and make them more visual

Proposed solution:

My first step was to look for vector illustrations for each badge name (vector image illustrating each badge) then look for a badge that i will go with.

I choose vector image because it's user friendly and will direct the user to what type of badge it is visually.

Also, going to the color i choose the Zubhub color through out the visuals

Here is the link to the figma file: https://www.figma.com/file/ByALA1tM5mTZCfLz5Kr3Ko/Outreachy-Zubhub-Design-(Contribution-to-issues)?type=design&node-id=315%3A697&mode=design&t=4UgRB1HUe5y2rx5J-1

@srish what do you think about this designs?

[OnolexTim]

@DonPresh I'd like to collaborate with you on this design. Do you mind having more than one collaborator?

[GloriaKaduru]

Hello! Working with what @DonPresh illustrated and the new badge titles and descriptions @Faridah-ux made, I worked on improving the overall user experience of the badges feature.

1. Profile Page with new Illustrated Badges: Here, I tweaked @DonPresh's illustrations a little bit and added the badges to the Badge section. I would love to collaborate with her to flesh it out fully and craft out more illustrations for the badges if this is greenlighted.

2. Getting a new Badge: I noticed that in the current flow for getting badges, there is no confirmation/announcement to the user that they have gotten a badge and why. Here, I created a modal that pops up whenever a milestone is ahcieved. The modal tells the user that they have achieved a badge and why and also prompts them to share it. Here's a modal for the Hatchling Badge.

2.1.Modal for Flying Bird Badge (without the confetti)

3. Badge with Badge Info: Here, I added a mini-description of the badge in form of a tooltip. This occurs when the user taps on the badge (on mobile) or click/hovers on it (on desktop). This is helpful in cases where the user has forgotten why they got the badge in the first place or they maybe want to show off! :)

Please let me know what your thoughts are on this. @srish @tuxology . Thank you!

[DonPresh]

@GloriaKaduru I love how you used the badges on this design. Pending when @srish gives approval we can work on this together.

[aqsaaqeel]

love the badges design @DonPresh and how you have incorporated the badges on the profile. Great work!!