UI aesthetic modifications for Use the Atlas pages + global spacing updates

[LibbyUX]

UI aesthetic modifications for Use the Atlas pages

The Use the Atlas pages for each user story have been modified based on user feedback and stakeholder feedback.

Updates consistent across each Use the Atlas page

• Spacing has been increased in each container to improve the user experience of these pages
• The former "Use API Demonstration" button has several updates: UX text/verbiage (now "Use Demo Application"), increased text size, increased button size, and new placement in the overview section. The routes still open in new and go to the demo apps.
• Decrease the size of the embedded YouTube player to get closer to the spec
  • Note: Placeholder content is in the design file, but we will keep the current video content used on each page.

Figma Resources

• US#1 updates
• US#2 updates
• US#3 updates

Individual page updates

• A new UI annotation image has been added for US#3

Figma resources

• US#3 annotation viewer
• Source image from UI Annotations

[LibbyUX]

Design & dev updates

@bhushankhope and I will implement the following changes globally for increased efficiency and for a better user experience:

• Increasing the button sizes on all pages for increased visibility and improved visual hierarchy
  • Components, such as the landing page carousel, are not impacted
• Decreasing the giant YouTube embeds that we currently have to improve the user experience:
  • Currently, large YouTube embeds are cluttering our interfaces and hiding content
  • Users have the option to full screen within the YouTube embedded UI: Giant embeds are not necessary
  • Improves the visual hierarchy overall for pages with YouTube embeds

[bhushankhope]

@libby-maier Made all the changes in PR #404 Youtube modal size changed across all the pages according to the figma file. Button size increased across all pages as discussed. Please let me know if anything is not right. Thanks

[LibbyUX]

Perfect, @bhushankhope! The button sizes and the YouTube modal sizes look great globally and on the Use Case pages.

I have updated the spacing on each page of the design file to match the user story pages:

• Previously, content sections had 40px spacing. It has doubled to 80px.
• Previously, content within the content sections had 16px spacing. It has doubled to 32px.

Ping me when the global spacing updates are ready for review! Thanks for all of your work on this!

[bhushankhope]

@libby-maier I have made the spacing updates to the site in PR #405 . Please review. Thanks

[LibbyUX]

Hey @bhushankhope! I am reviewing each page at the moment. It's looking good!

Quick question on the EUI page - is the spacing between the section headings and the section body text 32px or 80px?

[LibbyUX]

Thank you for the updates, @bhushankhope!