MVP1 landing page & design system 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