Dashboard pages

[LibbyUX]

Dashboard pages

I am working to find agreement on the Dashboard pages.

Visualization design notes

• Use the Vega theme Vox for Vega-lite visualizations
  • Note that this will be adjusted in later versions of this application

Figma Resources

• Design System file
• HRA Dashboards file

Milestone Details

• Title: US#7: Implement Dashboard for HRA
• User role: Clinicians, researchers, funders
• User activities: Track the evolution and usage of the HRA using data, code, and portal usage statistics in aggregate and divided by portal (e.g., HuBMAP or SenNet) or PEDP survey results.
• Added value: Enable evidence-based decision making by providing insights into the atlas' construction and usage (e.g., gaps in data, application areas, user demographics, equitable access).

[LibbyUX]

Dashboard page UI is now ready for development!

Good morning, @bherr2! Attaching approval documentation for the general Dashboards page UI. I will follow up with UI details, expected behavior notes, and links to local components. Thanks!

Figma design file:

• Dashboards UI

[LibbyUX]

Dashboard page UI details

Dashboard pages house collections of visualizations about the quality and coverage of the HRA. MVP1 has five categories/pages:

1. Data
2. Usage
3. Diversity & Inclusion
4. Publications
5. Experimental Data

Caution: Individual Dashboard content is not finalized

Content is yet to be finalized for this part of the UI as of 5.23.2024:

• Placeholder content can be found as lorem ipsum text in the splash content section and the visualization containers (titles + visualization space)
• I have provided examples of two pages for each breakpoint. There will be more design/dev collaboration when placeholder content has been replaced with real content for each dashboard

Figma Resources

• Design file: HRA Dashboards
• Dashboard Pages
• HRA Design System

Components

Please contact me with questions about any of these components!

• Navigation & mobile menus
  • All header navigation is sticky and slides down with the page on scroll.
  • All navigation components are housed in the design system and prototyped locally.
• Splash content container
  • Dashboard title
  • Overview/description text
  • CTA button to read a paper
• Metrics containers
• Visualization containers
  • Two aspect ratios: 4:3 and 3:1
  • Tooltips appear on hover over the information icon
  • If using Vega-lite, use the Vega theme Vox

Pattern Library Notes

Please contact me with questions about the pattern library! I expect this to be iterative and I look forward to collaborating!

• All dashboard pages have the same layout and always display the same from the top down:
  • Navigation header
  • Splash content container
  • Metrics containers
  • Note: Only 3 categories of metrics containers and no more than 12 individual metrics per dashboard. This is so that responsive design is possible for all breakpoints. This is iterative and could change.
  • Visualization containers
  • Footer

[LibbyUX]

UI details comment edited with more information and Figma links. Thanks so much!

[LibbyUX]

Wrong issue, disregard!