NASA Web Modernization Phase 2: Final Deliverables and Presentations
Horizon Design System (HDS) Design Deliverables
1. HDS Library [Figma]
The Library contains working design assets for the Foundations, Elements, Components, Modules, and Templates that make up the Horizon Design System. It is a resource for designers and developers to refine, create, and document new components, and get detailed specs. It should be the source of truth for the system, and change and evolve over time. Figma’s library functionality allows it to be linked to other working files. When changes are made to components and styles in this file and published, they cascade to all other linked files.
To use library assets in NASA Figma files moving forward, publish this file as a Team Library on NASA’s Figma Organization account. Once published, NASA team members can easily link to the shared library from the Assets panel to use shared text styles, colors, and components. More information on Figma library setup: Getting Started with Team Libraries
2. HDS Guidelines [Figma]
The Guidelines house the articulation and rationale around the design system. Sections include: Overview, Foundations, Elements, Components, Modules, Templates, Prototypes.
3. HDS Template Prototypes [Figma]
Template Prototypes include desktop and mobile templates of Homepage, Humans in Space Topic Hub, Humans in Space Gallery, Galleries Home, News + Events, OSIRIS-REx Mission Hub, Ranger 7 Mission Hub, Robotics Subtopic Hub, Press Release Article, Basic Article, and Deluxe Article.
4. HDS Story Presentation [Figma / Keynote / PDF]
A presentation crafted to tell the story of the Horizon Design System as a product of the Phase II engagement.
5. HDS Walkthrough Videos [MP4s]
A set of videos where the Blink team walks through and gives commentary on the design system. The focus is on examining system artifacts and how they come to life in our set of high fidelity templates.
Atomic Design Approach with Tristan:
● HDS_Walkthrough_Tristan_AtomicDesignApproach.mp4
● https://vimeo.com/492583036/1e1e2e36b3
Global Navigation with Tristan:
● HDS_Walkthrough_Tristan_GlobalNav.mp4
● https://vimeo.com/492583472/c162b0f11b
A Heroic Homepage with Mike:
● HDS_Walkthrough_Mike_Homepage.mp4
● https://vimeo.com/492583728/fb6bfb3d5d
Articles and Feature with Megan:
● HDS_Walkthrough_Megan_ArticlesFeatures.mp4
● https://vimeo.com/492581920/9d5f357250
Topic Hubs with Megan:
● HDS_Walkthrough_Megan_TopicHubs.mp4
● https://vimeo.com/492582549/7a293565de
ISS Scrollytelling Feature with Quba:
● HDS_Walkthrough_Quba_ISSFeature.mp4
● https://vimeo.com/490984675/82bc08cf2e
Code Prototype with Gomie:
● HDS_Walkthrough_Gomie_CodePrototype.mp4
Horizon Experience Pillars (4) with Ben:
● HDS_Walkthrough_Ben_HorizonIsHuman.mp4
● https://vimeo.com/492584579/ac3ae64a14
● HDS_Walkthrough_Ben_HorizonIsUnifying.mp4
● https://vimeo.com/492585000/cb45cfceee
● HDS_Walkthrough_Ben_HorizonIsVersatile.mp4
● https://vimeo.com/492585244/819fc57560
● HDS_Walkthrough_Ben_HorizonIsCaptivating.mp4
● https://vimeo.com/492584110/7dcd358df3
6. NASA.gov Information Architecture [Figma]
The living Figma file that hosts the site structure diagrams and information architecture principles for the NASA.gov redesign effort.
HDS Motion Design Deliverables
HDS Motion Prototype - ISS Scrollytelling Feature
The HDS Motion Prototype brings to life our ISS Feature designs in high fidelity motion. The standalone movie file provides a compelling example of how motion, design, and content come together in the Horizon Design System.
Blink has packaged up the working After Effects files as part of the final deliverables. Motion Principles and Guidelines will be captured in the HDS Guidelines.
There are a total of three versions of the "24 Hours on the ISS" video, all available both via Box.com link and on Vimeo.com.
Videos on Vimeo are set to a "private link" privacy setting but can be embedded for those with aforementioned links. Vimeo will also allow users to download the video for local playback. The Vimeo links prohibit comments, or adding videos to private collections.
1. NASA: 24 Hours on the ISS (No Music, SFX Only) [Vimeo Link, .MP4]
2. NASA: 24 Hours on the ISS (With Music and SFX) [Vimeo Link, .MP4]
3. NASA: 24 Hours on the ISS (Narrated by Quba Michalski) [Vimeo Link, .MP4]
This version of the video features an introduction and full narration by Blink's Director of Innovation, Quba Michalski, who also animated this prototype.
4. _NASA_ISS24_NoMusic_ProRes422HQ-Master_.mov [.MOV]
11GB ProRes 422 master of the video. This version of the file is best if further editing is required. Due to the large size of the file, it is not best for local playback.
5. NASA_ISS24_AfterEffects_Project.zip [.AEP]
A 6GB ZIP file containing Adobe After Effects project for this video and all its dependencies.
May require a couple of 3rd party plugins, outlined in the manifesto.
HDS Engineering Deliverables
HDS Code Prototype
This prototype is where we house all the articulation and guidelines around the design system. It will serve as a proof of concept for how keyscreens in the Horizon Design System can function in live code. The prototype will be built on a responsive foundation adhering to mobile, desktop, and tablet breakpoints.
The prototype is a great way to dig-in-deep in a non-linear way to any and all the pieces, parts, principles, specifications, and guidelines we have for the Horizon Design System.
Key screens include: Global and Secondary Navigation, Humans in Space Topic Hub, Living in Space Story Article B, Humans in Space Gallery, and Single Image View.
● Please contact peter@blinkux.com or shannon.chin@blinkux.com to be added to the code repository.
Round 1 - Milestone 1 Insights Report [PDF]
This report outlines insights from user interviews on proposed visual design directions and interaction design concepts. Findings include user reactions to visual styling, comparisons and associations that the visual design directions evoked for users, and how those reactions relate to their expectations of the NASA brand. The report also includes insights on user perceptions of the value, functionality, and usefulness of key interaction design concepts.
● Links to R1 Highlight Videos
○ Reel 01 - General highlights: A collection of general highlights from visual and interaction design concept testing.
○ Reel 02 - “Explore” navigation feedback: Participants react to the “Explore” global navigation, including their perceptions of the advantages and disadvantages of using such a menu.
○ Reel 03 - Homepage expectations: Participants detail the type of content they would expect to see on the NASA homepage.
○ Reel 04 - Interactive and immersive elements: Participants identify the particular design elements that make the experience feel interactive and immersive.
○ Reel 05 - Space exploration: Participants explain what makes them interested in the topic of space exploration.
Round 2 - Milestone 2 Insights Report [PDF]
This report details findings from user interviews on key templates of the NASA.gov prototype, including: the article page, Humans in Space topic page, gallery page, image detail page, homepage, and site global navigation. Insights include observations on the overall usability of the templates and navigation patterns, feedback on the prototypes’ visual treatments, and reactions to content and content presentation.
● Links to R2 Highlight Videos
○ Reel 01 - Changed perspectives: Participants explain how their understanding of the scope of NASA’s work changed after viewing the prototype.
○ Reel 02 - Global navigation: This reel shows participants interacting with the site’s global navigation, and sharing their perspectives on its functionality and usefulness.
○ Reel 03 - Interactive modules: Participants react to interactive modules — including interactive Mars and ISS models — and provide feedback on their value.
○ Reel 04 - NASA humanized: Participants explain how elements of the prototype — including images focused on the people of NASA — effectively humanize NASA and its work.
Round 3 - Milestone 3 Insights Report [PDF]
This report outlines insights from user interviews on key page templates of the NASA.gov prototype, including: the News & Events page, current mission page, historic mission page, subtopic page (Robotics), and the interactive ISS “scrollytelling” feature. The findings include observations on the overall usability of the templates and navigation patterns, as well as user
perceptions of the value and usefulness of the pages’ content and content presentation.
● Links to R3 Highlight Videos
○ Reel 01 - Current mission page: Participants react to the content, structure, and user experience of a current mission page, OSIRIS-REx.
○ Reel 02 - Page templates: After viewing a subtopic or historic mission page, participants are asked what they expect to see on a current mission page.
○ Reel 03 - Why I’d go to NASA.gov: Participants explain the type of information they would seek out on NASA.gov, including information about the latest NASA missions, and more general science-related content.
Background Information - From Vision to Final Design
NASA Web Modernization Living Deck [PDF, .PPTX]
The living deck documents the Web Modernization project from the research and strategy phase through the final design. Starting with the IDEA act, the Administrators memo, and Jim Green’s vision, this presentation contains highlights of both the phase 1 and phase 2 work. This includes the most salient points of research, analytics, SEO, content strategy, accessibility, information architecture, and design.
● Files on Box as PDF and Powerpoint