USWDS-Site - Feature: Emphasize design kit links on the page

[jaclinec]

Is your feature request related to a problem? Please describe.

During top tasks usability testing :lock:, users had difficulty locating the design kit links on the Getting started for designers page because the links are a bit buried and do not stand out on the page enough.

Describe the solution you'd like

We should make the design kit links appear more prominent and easy to find for people scanning the page. Currently, there are a lot of words on the page that users skim over and the design kit links appear within that bunch of text. I suggest reducing the amount of text, use more content chunking, and emphasizing the design kit links as bullet points or some other way to make them stand out.

Describe alternatives you've considered

Maybe we should also link to design kits in other places on the site (homepage?) since half of the participants did not expect to find it under "How to use USWDS"

Additional context

To give more context on how to prioritize the new issues and feature requests that came out of top task testing, here's the full list of issues divided into 3 buckets and in order of priority (though it is somewhat flexible):

Low lift recommendations:

• Implement better synonym searching in the component search function. #2724
• Make design kits stand out more on the page and consider offering access to the kits in more visible places on the site (such as the homepage). #2723
• Provide a “Show all” link near the showcase list on the homepage that takes users to the entire list of sites that use USWDS. #2725
• Change the names of the step indicator and in-page navigation components to better match user expectations. #2728
• Link to form-related components (like step indicator) from the form component page (better cross-linking in general) #2729
• Indent subgroups in the left navigation. #2730
• Consider putting “References” at the very bottom of the component page (see data visualizations page). #2732
• Make the language selector preview have dark text with white background. (need to discuss before creating issue)
• Make the icons above the components, patterns, templates, etc. on the homepage clickable. #2734

Medium lift recommendations:

• Offer component previews on the components page. #2736
• Provide a glossary of definitions of heading labels (patterns, components etc.). (First we need to create a glossary component (see proposal discussion). Then we can address adding it to USWDS site.)
• Provide more context around showcase sites that use USWDS. #2737

High lift recommendations:

• Consider how we might reorganize the information architecture to better match users’ mental models of how information should be grouped and found. #2738

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.
• [X] I checked the current issues for duplicate feature requests.

[jaclinec]

From our discussion in CS UX sync (see Oct 9th meeting notes:lock:) , we decided on a few next steps:

• [ ] Rename "Getting started for designers" page to "Design kits"
• [ ] Re-draft content to make it much simpler with reduced text (including removing unneeded sections like "Accessibility requirements" and "Contribution guidelines" or directing to a different page for those) and make the design kit links much more prominent on the page
• [ ] Add a CTA link on the homepage (possibly replacing the "introducing 3.0" and "migrating to 3.0") directing users to the design kits. Note: This is blocked until we launch the new Figma design kit. Eventually, we will also tie in launching the USWDS Web Components version with more CTAs for learning "What's new" and other top things we want to highlight.