Skip to content

HRA Designer Resources

LibbyUX edited this page Oct 7, 2024 · 4 revisions

Figma

HRA Design System Repository

The HRA Design System Repository is the single source of truth for all HRA components, patterns, and text variables.

HRA Components

This file breaks up components by pages for the development team to organize in the HRA Design System Storybook.

Individual Website Specifications

All HRA UIs are contained within the Human Reference Atlas project in Figma.

Design Information Architecture

This file contains conceptual brainstorming on how best to organize the HRA product line from a product-focused, user-centered design standpoint.

Deprecated: Former Design Handoff Notes

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.

Q1 2024: HRA Portal Redesign

HRA Design System: Figma Design System File

HRA Design System User Stories

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.

Landing Page

User Stories

  • 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.

Breakpoints

image

XSmall (320x 568 iPhone SE)

Small (554x964)

Medium (768x1024 iPad Mini)

Large (1012x588)

XL (1280x832 MacBook Air)

XXL (1440x900 MacBook Air 12-inch)

XXXL (1920x1080)

Q1 2024: FTU Explorer

Approved 2/6/2024 by Katy Borner

image

Q1 2023: FTU Explorer

Functionality Notes

Website Responsiveness

  • 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.

General Notes

  • All links routing externally need to open in a new tab.

Landing Page

  • Metrics of the Human Reference Atlas should fade in 3 seconds after arriving at the website. image
  • Explore the Medical Illustrations of the Human Reference Atlas should slide/move in from the right side while the user scrolls down.

FTU Library

  • 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.

Web Components

  • 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.

Interactive Table Functionality

  • 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.

Styles

Medical Illustration Hover Functionality

  • 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: 607B221C-51F8-4292-A810-7D99C0DECFD5
  • 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: image

User Stories

Website responsiveness

  • 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.

Header

  • 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.

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.

FTU Library

  • As a user, I need to know what FTU is selected, so that I can navigate the library with confidence.

Medical Illustration

  • 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.

Biomarkers Table

  • 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.

Source Data

  • 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.

Footer

  • 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.

Web Components

  • 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.

Resources