HRA Designer Resources
The HRA Design System Repository is the single source of truth for all HRA components, patterns, and text variables.
This file breaks up components by pages for the development team to organize in the HRA Design System Storybook.
All HRA UIs are contained within the Human Reference Atlas project in Figma.
This file contains conceptual brainstorming on how best to organize the HRA product line from a product-focused, user-centered design standpoint.
As of 9/23/2024: Handoffs are no longer documented in wiki format. The HRA Product Team uses a combination of Figma and GitHub issues to document design handoffs.
- Style Guide
- Component Library
- Breakpoints modeled from GitHub Primer
User stories relevant for every page of the HRA website:
- As a user, I need this website to be responsive to all breakpoints, so that I may view it cohesively on any device.
- As a user, I need a floating action button to access the navigation menu on certain breakpoints, so that I can quickly complete my goals.
- As a user, I need a top navigation overlay menu on certain breakpoints, so that I can quickly complete my goals.
- As a user, I need external links to open in a new tab, so that I can stay organized when exploring the HRA website.
- Approved for MVP0 development by Katy Borner on 1.31.2024
- Dev & Design Landing Page GitHub Issue
- As a user, I want an intriguing splash section, so that I will be interested to learn more about this website.
- As a user, I need a collaborators section with logos of HRA partners, so that I have confidence in the HRA brand.
- As a user, I want an automatic horizontal scroll over the HRA partner logos, so that I know that the HRA brand is unique and modern.
- As a user, I want all logos to route to the partners' landing page, so that I can quickly learn more about these HRA partners.
- As a user, I need an overview section of what this website does, so that I can better understand my goals.
- As a user, I need a footer navigation menu, so that I can quickly navigate elsewhere when I reach the bottom of the page.
Approved 2/6/2024 by Katy Borner
- Please replicate the responsive resizing of the EUI for the FTU Explorer. The medical illustration module should grow and reduce in size depending on the screen, while the right side FTU Library and the left side areas should stay the same size.
- Small breakpoints (480px and below) must display a screen size notice modal upon entering the FTU Explorer interface. Two buttons are needed in this dialog modal. Option one in secondary button style: "Proceed to FTU Explorer", routing to the interface. Option two in primary button style: "Human Reference Atlas Portal", routing to the FTU Explorer HRA Portal page.
- All links routing externally need to open in a new tab.
- Metrics of the Human Reference Atlas should fade in 3 seconds after arriving at the website.
- Explore the Medical Illustrations of the Human Reference Atlas should slide/move in from the right side while the user scrolls down.
- Each FTU library menu item has three states: ready, hover, and selected.
- Only one item can be selected at a time.
- Future versions of the FTU Library need to support a filter feature.
- The FTU Library needs a scrollbar when the browser/view breakpoint is smaller, or when more FTUs are added to the library.
- Large web component: Please replicate the responsiveness and the size of the EUI web component for the GTEx Portal for the FTU Explorer’s large web component.
- Small web component: This is a mini version of the FTU Explorer.
- When a user hovers over a circle in the table, the cell/biomarker information cards pop. Users need to be able to copy text from this region. When their mouse goes into the region, they need to copy the information.
- While hovering over a region in the medical illustration, the saturation must increase for the region, while the rest of the regions stay the same. This differs from what is shown in the prototype, as we will need to see what’s possible in code. See below for the best example I could prototype:
- The cell type label tooltip should appear close to the cursor and follow the cursor around while hovering over all different regions in the medical illustration.
- While hovering over a region in the medical illustration on the website, the cell type row should highlight in #F8F9FA to showcase the connection between the area and the data within the table. See below:
- As a user, I want to know if the interface is optimized for certain breakpoints, so I can understand why it looks bad on a mobile device.
- As a user, I want an interface to have responsive resizing, so I can view the interface in different contexts.
- As a user, I want to click the About button to learn about the FTU Explorer in a new tab on the HRA Portal FTU Explorer page, so that I am educated about the Explorer, and so that my spot within the Explorer is preserved.
- As a user, I want to click on the header logo to go to the landing page, so that I can start fresh or go back to the landing page.
- As a user, I want sections of the landing page to fade in when I arrive so that the website feels modern.
- As a user, I need to read a brief description of what an FTU is, what data is showcased, and who was involved so that I can understand what I’m exploring.
- As a user, I need to see what an FTU looks like on the landing page, so that I am curious to explore more FTUs.
- As a user, I want the “Explore FTUs” button to take me to the renal corpuscle of the kidney because it is featured in the same section so that I can start exploring this FTU first.
- As a user, I want to see the metrics of the Human Reference Atlas, so that I can understand the greater impact of this project.
- As a user, I want to learn more about the FTU medical illustrations in a new tab, so that I am equipped with knowledge about how the illustrations were produced.
- As a user, I need to know what FTU is selected, so that I can navigate the library with confidence.
- As a user, I want to see the title of the FTU at the top of the module, so that I can easily learn the name of this FTU.
- As a user, I want the cell type name tooltip to follow my cursor as I hover over regions of the medical illustration so that I can learn these regions.
- As a user, I want cell-type regions to saturate when I hover over them so that I can showcase this region in screenshots for my research paper.
- As a user, I want the cell type row in the biomarker table to highlight so that I learn the connection between the illustration and the data.
- As a user, I want to hover over the table and see information cards, so that I can be better informed about this cell type by biomarker.
- As a user, I want a “no data” card to appear over the cells without data, so that I can confirm that no biomarker data is associated with this cell type.
- As a user, I want to have a legend, so that I learn how to interpret the data within the table.
- As a user, I want each part of the legend to display informative hover cards, so that I feel confident about how the above data is calculated.
- As a user, I want to expand the biomarkers table, so that I can better view larger datasets.
- As a user, I want to collapse the source data area, so that I can have a larger view of the biomarkers table.
- As a user, I want to see accurate data set titles and links so that I am certain the data sources are trustworthy.
- As a user, I want to open the source data links in new tabs, so that I can keep exploring the FTU, while also learning more about certain datasets.
- As a user, I want the illustration information button to open in a new tab so that I can see the DOI and metadata associated with the illustration.
- As a user, I want to have options to download the illustration and datasets, so I can use these materials as needed.
- As a user, I want the embed button to take me to GitHub so that I can directly access the code I need to embed web components on my website.
- As a user, I want the contact button to open a modal so that I can directly contact the HRA team.
- As a user, I want the HRA Portal button to open in a new tab, so I can explore all Human Reference Atlas options.
- As a user, I want the option to embed a small or large web component on my website, so that I can display the FTU Explorer on my platform.
- As a user, I want to embed the small web component on my webpage, so that I can feature it in my scrollytelling series.
- As a user, I want to embed the large web component on my webpage, so that my users can explore HRA’s interactive FTU Explorer.
- As a user, I want to embed the Medical Illustration on my webpage, so that I can create my own interactive experience with the FTU.