Card UX Improvement

[TenzDelek]

Describe the bug
Currently the socials links for the cards seems more like an duplication rather than a feature.

To Reproduce
Steps to reproduce the behavior:

1. Go to any card
2. check the social links

Expected behavior
An improvement for the card layout should be maintain.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari] Arc
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[TenzDelek]

/assign

[TenzDelek]

@arkid15r what your view on this 🤔. any suggestion would be helpful

[arkid15r]

We show all social links at the moment. If a project has a lot of them on the same platform that causes multiple icons of the same platform. I'm open to redesigning that based on UI/UX best practices.

BTW, check it on the new frontend if you used old one for this issue research.

Thank you!

[TenzDelek]

sorry for the late response, so here is some insight and changes I am planning on:

1. bringing back the colour for the user images (looks more lively)
2. remove the tooltip for the tags (I dont think it is neccesary for a tooltip for tags and added hover

3. one thing I cant warp my head around is the social links

- my main concern is whether it is necessary? because for some I can see we have putted linkedin of the user and in some we have put the links for the website, doesnt it seems inconsistent. shoudnt we just put the project repo link, their website, their slack and there description in owasp website. this can help in keeping the card consistent.

what is your thought on it ? @arkid15r

[TenzDelek]

if the redesign of the card is finalized, I am planning on tackling the responsiveness of the overall website. plus some fixes in the footer and header

footer issue: the copyright is not centered properly

also do we have a design system for owasp nest or owasp in general? I cant find it in the web.

[arkid15r]

@TenzDelek sorry I couldn't look into this today. I'll do it tomorrow first thing.

[TenzDelek]

sure @arkid15r

[harsh3dev]

@TenzDelek can I suggest the design for the messy social links.
We can group the similar links e.g. group all the links of Slack, X etc
When the user hovers over the icon then it displays a dropdown of all the links in that group.
Please let me know what do you think?

[TenzDelek]

Hmm, thank you for the suggestion, I got your point but it would be still inconvenient for the users. Don't you think so. For example, you see a bunch of same icon in row without and text info, what will be your first thought. Wouldn't it be like "oh it looks like a bug or duplication ". If we are going to implement it, let's put helper text beside it.

What my thought process as a designer was whether it is necessary? Because we don't want more harm than good being in the perspective of the end users.

What I suggested is that we can put the overall link of the project (each for slack channel, twitter and GitHub) ,not the individuals. Which can solve the issue of duplicate.

But still @harsh3dev idea also seems to be a choice. Let's wait for what @arkid15r has to say on this

[arkid15r]

1. bringing back the colour for the user images (looks more lively)

I don't have a strong opinion on this and kind of like it as is (the grayscale was intentional). Let's see the colorful version

remove the tooltip for the tags (I dont think it is neccesary for a tooltip for tags and added hover

Yes, that can be removed

one thing I cant warp my head around is the social links

idea 1: show only 1 icon per social (just to indicate what project has in general) and show a list of the links in a separate area.
idea 2: an alternative would be to show only one link per social platform.

also do we have a design system for owasp nest or owasp in general? I cant find it in the web.

I can only help with OWASP branding colors (see the last slide)

[TenzDelek]

1. bringing back the colour for the user images (looks more lively)

I don't have a strong opinion on this and kind of like it as is (the grayscale was intentional). Let's see the colorful version

remove the tooltip for the tags (I dont think it is neccesary for a tooltip for tags and added hover

Yes, that can be removed

one thing I cant warp my head around is the social links

idea 1: show only 1 icon per social (just to indicate what project has in general) and show a list of the links in a separate area.

idea 2: an alternative would be to show only one link per social platform.

also do we have a design system for owasp nest or owasp in general? I cant find it in the web.

I can only help with OWASP branding colors (see the last slide)

Thank you for the input@arkid15r the idea 2 seems more intuitive. Will work on this soon

[arkid15r]

also do we have a design system for owasp nest or owasp in general? I cant find it in the web.

could be useful -- https://owasp.org/www-policy/operational/branding

[TenzDelek]

also do we have a design system for owasp nest or owasp in general? I cant find it in the web.

could be useful -- https://owasp.org/www-policy/operational/branding

appreciate it 👍, will finalize this issue this weekend

[vivekbisen04]

I would like to work on this issue. Could you please assign it to me? I’ll ensure the card layout is improved and the social links are more functional and less redundant.

[TenzDelek]

Hey @vivekbisen04 , thank you for your interest, but I am currently working on this. The pr will be ready soon. It is taking some additional time because the card component is used across all pages , each with different layout

[arkid15r]

I would like to work on this issue. Could you please assign it to me? I’ll ensure the card layout is improved and the social links are more functional and less redundant.

@vivekbisen04 you can still contribute as a reviewer or join our project contributors team and pick any available tasks.

[TenzDelek]

sorry for the delay, was bit busy during the holiday season, will send the design tonight

[TenzDelek]

Sharing the figma file https://www.figma.com/design/NGGoRrzevMKSAESwqheSDR/owasp?node-id=0-1&t=FnuGIisWrlFoeZW1-1 , also Commute the same in slack.