HRA Portal Y3 cosmetic updates

[LibbyUX]

Design to Dev Updates for HRA Redesign MVP0 (if time allows) or MVP1

Note:

• This issue is transferred from my last comment on HRA Portal MVP0 Issue 4.
• These updates should happen for MVP0 if time allows, otherwise they are slated for MVP1.

Hi @bhushankhope, here are the current updates based on the MVP0 review. Also, I am mentioning @u-p-design for visibility!

Global updates & design system updates

All HRA category icons resized

• Sizes reduced in both sets of category icons and their rounded button component for all landing pages

Significant updates to footer components

The footer component was one of the biggest sources of issues during the review. Please ensure each breakpoint is well inspected and as close to spec as possible.

• Spacing and padding adjusted on nearly every component breakpoint
• 430px breakpoint variant added
• Logos updated
• Secondary navigation buttons updated: smaller variant added and font styles updated
• Font styles updated on every breakpoint for CNS Copyright, Funded By, and Medical Disclaimer text

Breakpoint updates

320px breakpoint

Splash section:

• Vertical padding and vertical height adjusted
• Spacing adjusted in text container

Consortia section:

• Vertical height and vertical padding updates to make this section smaller

Use the Atlas section:

• Icon size reduced in Use the Atlas Section
• Vertical padding reduced
• Spacing reduced in container
• Spacing in category containers reduced

Breakpoint Added: 430x932

• A new breakpoint has been specified because the reviewers require excellent mobile experiences.
• Please see 430x932 XSmall iPhone 15 & 16
• XSmall iPhone SE has been renamed to XXSmall

544px breakpoint

Splash section:

• Font updated
• Vertical padding and vertical height adjusted

Consortium section:

• Font updated
• Vertical padding and vertical height adjusted

Use the Atlas section:

• Font updates
• Icon size reduced
• Spacing updates
• Smaller button variant used

768px breakpoint

Use the Atlas section:

• Horizontal padding decreased to match footer

[LibbyUX]

MVP1 landing page & design system updates

MVP0 has to be approved and will not be available for public distribution until MVP1. I am compiling a list of design updates based on feedback from Katy's MVP0 Review & verbal feedback.

Completed Design Updates

Ushma and I completed a series of updates in the design system last week. I completed design updates for MVP0 when I opened this issue. Most updates have been pushed from the HRA Design System file to their respective Figma files:

• Design System: Reduced main heading font size
• Design System: Created a pattern library for font sizes across 9 responsive breakpoints
• Design System: Updated all footers globally with new responsive font sizes and improved spacing/padding
• MVP0: Reduced the size of the icons
• MVP0: Anything listed in the initial comment above

To Do for MVP1

• MVP1: Remove the interaction horizontal scrolling interaction on the consortia bar on the landing page
  • Make a static section for all of the consortia logos
• MVP1: Adjust spacing around the website for the new responsive font sizes

[LibbyUX]

Some design updates will occur before this can be handed off. I will update this issue with details when they become available.

[LibbyUX]

Design work in progress

Resources

• HRA Redesign canvas

[LibbyUX]

Handoff in progress

Note for myself: Submit individual issues to break up the work and close this when the handoff has been completed.

[LibbyUX]

Design handoff organization:

• Submit Release Notes template

  • Cosmetic updates to release notes template  #805

• DS: Submit BIG update: nav header desktop vs mobile breakpoints, cosmetic updates, secondary menu variant, and URLs

  • HRA global navigation #812

• DS: Submit new icons from MingCute.

  • Add new social logo icons #813

• DS: Submit new icon button variants: Color/Material vs. Social Media

  • Update icon button with new variations #814

• DS: Submit footer update for design system

  • Update nav footer #815

• DS: Submit profile variants

  • Add profile cards #816

• DS: Submit radio buttons

  • Add radio buttons #817

• DS: CTA Bar

  • Add CTA (call to action) bar #819

• Submit temporary data page

  • Cosmetic updates: https://humanatlas.io/overview-data #820

• Submit about page

  • New About page #823

• Submit homepage

  • Update cosmetics: https://humanatlas.io/ home page #829

• Submit temporary content page templates

  • Update cosmetics: HRA Portal content page templates #824

• Submit new apps.humanatlas.io design to replace HRA Previews/Tools

  • Update cosmetics: https://apps.humanatlas.io/ #831

To do:

• Close apps.humanatlas.io with two states: Researcher apps & developer apps #652
• Close this issue when all tasks are complete

[LibbyUX]

This issue was used to organize updates for the HRA Portal during the design system alignment phase. It contains old work from earlier in the year that is no longer relevant. Dev work has been broken up into smaller issues that are design system focused.