Improving the Project Cards for Better Usability and Discoverability

[anastako]

The current card-based view of projects needing contributions poses usability challenges:
1. Lack of Comparability: Users struggle to compare projects at a glance due to limited and inconsistent information hierarchy within the cards. As the number of projects grows, this issue will worsen, making it increasingly difficult to find relevant projects.
2. Limited Readability: The current font size of 14px is too small, especially given the volume of information displayed within each card. This causes visual fatigue and reduces accessibility for users with visual impairments.
3. Compressed Layout: The compact nature of the cards forces critical details to be squished, potentially omitting important information that could aid decision-making.

Suggestions for Improvement:
1. Redesign the Cards to Full-Width Layouts:
• Utilize full-width, end-to-end cards to give each project more space for content.
• Allow for a clear and structured presentation of key project details, such as purpose, last update, contributors, and design-specific guidelines.

2. Incorporate Sorting and Filtering Options:
• Add robust sorting options (e.g., by popularity, last updated, or relevance to design) and filtering by categories (e.g., type of design needed, complexity level).
• Provide a search bar for quick access to specific projects.

3. Highlight Projects with Clear Design Guidelines:
• Use a visual cue (e.g., badges or tags) to signify projects that include detailed design contribution guidelines.
• Add a “Quick View” option to preview the guidelines without navigating away from the main page.

4. Improve Visual Hierarchy for Comparability:
• Standardize how information is presented across cards (e.g., consistent order and style for description, contributors, and update date).
• Highlight key details like project popularity or the level of contribution needed.

5. Enhance Readability and Accessibility:
• Increase font size to at least 16px and optimize spacing for better readability.
• Ensure all text and visual elements meet WCAG 2.1 standards for contrast and accessibility.

6. Support User Exploration:
• Include a “Featured Projects” section at the top of the page to showcase high-priority or highly active projects.
• Allow users to bookmark or save projects for later review.