Metrics Website Figma Mockups

[natalialuzuriaga]

https://www.figma.com/file/wKwMcM5N00XYEU06viKvbT/CMS-OSPO-Metrics?type=design&node-id=17-4&mode=design

Please feel free to drop feedback here!

[natalialuzuriaga]

Feedback Sesh with Mathias 11/01:

• Remove Orange Banner and replace with banner that signifies that this is WIP and we are collecting feedback as a result. Feedback form can be link to Google Form or Github Issue/Bug Report. See digital.gov for example.
• Keep Responsive Design in mind especially for the list of cards
• For org & title cards, make the title clickable rather than the whole card. Include something that shows this (underlined title with >>). For mobile users, make the touch target bigger by wrapping title or component in an anchor tag
• Pagination & Search: Prototype the functionality/behavior. When searching, does it filter out & remove cards OR reload with filtered cards? Consider using filters vs pagination. Consider performance budget (when performance becomes unacceptable, what do we do?). Make decisions based on the least amount of technical complexity for this feature. Note that all data is stored on client-side so server-side fetching of data is not needed.

508 Compliance Notes:

• HTML is interpreted by screenreader so review naming and tags.
• Colorblindness/Visual Acuity: Make sure contrast between colors is distinct enough by using a color blind checker (linked in Figma comments). For pie charts and other data visualization graphs, consider adding a very transparent pattern for each section so user doesn't have to rely on color to differentiate sections.
• No Mouse/Motor Impairment: Be sure that the website can be navigated through tabbing. Each component should have some sort of focus state.
• Use the Lighthouse Tool under Chrome Dev Tools to check website accessibility.