top of page

Project Overview

In 2020, facing challenges from the COVID-19 pandemic, EA partnered with Virtual Wild and InVision studios to create a unique virtual experience promoting Super Bowl LV and Madden 21. This innovative effort aimed to reignite fan enthusiasm during a difficult year.

Dynetics
Human Landing System LunAR
Web App

Overview

Dynetics, a global leader in aerospace and defense solutions, is a key collaborator in NASA's Artemis mission to return humans to the moon, including the first woman and the next man. This partnership underscores Dynetics' pivotal role in advancing human space exploration.

The Challenge

Dynetics, a Leidos subsidiary and global leader in IT, Aerospace, and Defense technologies, faced a unique challenge. Their Human Landing System (HLS) was one of three contenders vying for NASA's selection in the 2024 Artemis missions, aiming to put the first woman on the moon. With the competition fierce and a global pandemic disrupting traditional methods, Dynetics needed an innovative solution.In the past, showcasing the HLS involved building and transporting a life-size physical model for trade shows and events. However, this time, they required a digital experience – easily shared, accessible across devices, and ready within a tight 10-week timeframe.

The Solution

To address the challenges with the mobile web experience, we implemented a comprehensive optimization strategy based on user research and data analysis. We focused on key areas for improvement, including streamlining onboarding for new users, enhancing content discovery, and guiding deeper engagement and conversion. We improved navigation for a more mobile-friendly experience and added space for cross-functional teams to promote content, marketing, and merchandise.

01

Discovery & Research

Ephv0xeWwAAY3L3_edited.jpg
Project Goals
How might we showcase Lander Functionality/Size?

Design the web application to be a platform for showcasing the key features and functionalities of Dynetics' proposed lunar lander. This could involve interactive 3D models, detailed breakdowns of different lander systems, or explainer videos focused on specific innovations.

How might we highlight Competitive Advantages?

Use visuals and data to clearly communicate how Dynetics' lander features stack up against competitors. This could involve comparisons of fuel efficiency, payload capacity, or specific technologies employed.

How might we cater to various user types?

In addition to catering to the needs of NASA employees and members of Congress, Dynetics expressed a keen interest in ensuring that the web-based application was accessible and intuitive for the general public. Recognizing the importance of building broader awareness of Dynetics' innovative approach and potential role in the next moon landing, our design strategy incorporated elements to engage and educate a wider audience beyond the immediate stakeholders.

How might we make the experience interactive?

Integrate interactive elements that allow users to explore different lander features in detail. This could involve clickable components on 3D models, detailed pop-up explanations for technical specifications, or interactive simulations showcasing lander capabilities.

Identifying Target Users
New New.png
getty_1010437196_366373.jpg
Members of the National Aeronautics & Space Administration

These users, including engineers, scientists, and mission planners, need to clearly view and identify the features and capabilities of the HLS. Their requirements include intuitive access to detailed information, clear visualizations of the system’s functionalities, and streamlined navigation to support informed decision-making and effective evaluation of the HLS’s role in lunar exploration. The design must ensure that these critical features are easily accessible and understandable, enabling users to assess the HLS efficiently.

154466-004-5D6F61E4.webp
Members Of The United States Congress

These users require clear, concise presentations of the HLS’s features and capabilities to assess its value and impact. They need straightforward visualizations and detailed information that highlight the system’s contributions to lunar exploration, ensuring that they can make informed decisions regarding funding approval. The design must effectively communicate the HLS’s benefits and technological advancements, facilitating a clear understanding of its importance and supporting the case for continued financial support.

gp.png
Space Enthusiasts

These users require clear, concise presentations of the HLS’s features and capabilities to assess its value and impact. They need straightforward visualizations and detailed information that highlight the system’s contributions to lunar exploration, ensuring that they can make informed decisions regarding funding approval. The design must effectively communicate the HLS’s benefits and technological advancements, facilitating a clear understanding of its importance and supporting the case for continued financial support.

Subject Matter Expert Interview

To gain deeper understanding within the tight project timeframe, we conducted a targeted interview with a key SME. Our interviewee was a highly-placed official directly leading the HLS project at Dynetics. This valuable conversation provided us with unique insights into the Artemis Mission, the specific functionalities of the HLS, and the features and narrative Dynetics considers essential for the web experience.

Screen Shot 2021-03-23 at 11.03.22 AM.pn
Screen Shot 2021-03-23 at 11.02.40 AM.pn
Mission Visualization

From our meeting with the SME, integrate the flight path with mission chapters to help users visualize mission progression alongside the narrative. Expand the story beyond just "landing on the moon" to emphasize the Artemis Mission’s broader significance and Dynetics' HLS’s crucial role. Focus on core values by highlighting Dynetics' HLS’s top three strengths: sustainability, affordability, and crew-centric design. Additionally, visualize key features of the lander, such as its compactness, the short distance to the lunar surface for astronauts boarding, and the retractable solar panels built into the HLS.

Competitor Analysis
Analysis Takeaways 
  • Information Display: Interactive videos offer multiple ways for users to engage with various mediums and industries. Users can tap on information points to view details within an AR experience or see new slides.

  • Dimensions: Real-time 3D measurements allow users to view the true size of objects in their space. Many applications preload dimensions or enable users to measure objects themselves.

  • User Guidance: When starting an AR experience, users receive instructions and visual cues that appear as the object is placed, with "hotspots" or "interactive points" guiding their interaction.

02

Ideation

Life Size Prototype

Traditionally, Dynetics relied on a physical, life-sized model to showcase the lander's intricate design and functionalities. The challenge was to translate this experience into a captivating and engaging virtual format, especially considering the limitations imposed by the COVID-19 pandemic.

mood 2.png
ezgif.com-video-to-gif-169.gif
ezgif.com-video-to-gif-170.gif
Exploring Augmented Reality for the Human Landing System Virtual Model

In our initial exploration, we explored Augmented Reality (AR) to enhance user engagement. AR's ability to overlay digital elements allowed users to place a 3D model of the HLS in their environment, offering a tangible sense of its size and presence. It also provided an interactive learning experience, enabling users to tap on hotspots to access key information about the lander's components and functionalities.

Creating a Visualization of the Artemis Journey 

Beyond showcasing the HLS itself, a crucial element was creating a way for users to visualize and understand the stages of the lander's lunar mission. To achieve this, we saught to develop a "Mission Mode" visualization inspired by the concept of a "race track." This visualization leveraged the insights gleaned from our SME interview with a key leader of the HLS project at Dynetics. Based on their descriptions and details, the visualization depicts the various stages of the lander's journey. This interactive element would empower users to gain a clear understanding of the mission trajectory and its different phases.

mm board.png
ezgif.com-video-to-gif copy 9.gif
ezgif.com-video-to-gif copy 8.gif
Mapping the Course: Visualizing the HLS Mission

The initial design exploration for Mission Mode focused on two main areas: user interaction and content delivery. We aimed to align mission chapters with the HLS's position in its lunar journey and to make videos interactive, allowing users to engage with the content actively. This approach was intended to enhance user engagement and provide a deeper understanding of the HLS's role in each mission stage.

Establishing Information Architecture 
Group 29@2x.png
Visualizer & Mission Modes

The Information Architecture (IA) established a clear division within the app, creating two distinct experiences: "Visualizer Mode" and "Mission Mode." Visualizer Mode focuses on highlighting the lander's features and capabilities, allowing users to explore the HLS in detail. In contrast, Mission Mode is designed to educate users on the lander's journey to the moon and back, providing a narrative-driven experience that follows the mission's stages. This dual-approach ensures that users can engage with both the technical aspects of the HLS and the broader context of its mission.

03

Design

Visualizer Mode: Bringing the HLS to Life

To make the HLS accessible to users, we developed a 3D environment that allowed them to personally explore the lander at their fingertips. We prioritized user access by developing a 3D environment that allows users to explore the HLS directly within their web browser. This eliminates the need for downloads or additional software, making the HLS accessible "at their fingertips."

wf modul .png
Screen Shot 2021-03-25 at 2.21.11 PM.png
ezgif.com-gif-maker (60).gif
Highlighting HLS features

Informed by the SME interview, we focused on showcasing the features that align with Dynetics' core values: sustainability, crew-centric design, and affordability. This focus guided our design decisions. We created clear information access methods and implemented a user-friendly hierarchy within the application. These solutions ensure users can easily navigate and explore these key aspects of the HLS, making Dynetics' contributions to Artemis readily understandable.

sutainabilty.png
Screen Shot 2021-03-25 at 2.24.41 PM.png
ezgif.com-video-to-gif-174.gif
Interactive Elements

To address Dynetics' need to showcase key features, we incorporated interactive "Info Points" overlaid on the 3D model. Clicking on these points reveals informative content highlighting specific functionalities and technical aspects of the HLS. This fosters user engagement and deepens understanding of Dynetics' contributions to the Artemis missions.

micor wf.png
Screen Shot 2021-03-25 at 2.28.46 PM.png
ezgif.com-video-to-gif-176.gif
Micro-Animations

Beyond the core functionalities of Visualizer Mode, we added features to enhance the user experience and highlight Dynetics HLS's unique qualities. Real-life measurement tools allowed users to compare the HLS's size to familiar objects, offering a tangible sense of scale. We also incorporated subtle micro-animations to bring the HLS to life, showcasing functionalities like an astronaut navigating a crew-centric ladder. These details provided a more immersive and informative experience, helping users understand the HLS's size, capabilities, and innovative design.

Screen Shot 2021-03-25 at 2.30.27 PM.png
Screen Shot 2021-03-25 at 2.30.56 PM.png
ezgif.com-video-to-gif-178.gif
AR Integration

To provide users with a richer experience, we integrated augmented reality (AR) functionality into the application. This allowed users to virtually experience the Lander in their own surroundings, offering an immersive and interactive alternative to physical demonstrations. By leveraging AR technology, we ensured that users could engage with the HLS and explore its features despite the limitations imposed by the pandemic, thereby maintaining accessibility and enhancing the overall user experience.

Mission Mode: Charting the Course to the Moon

Having established the core functionalities of the Visualizer Mode, we turned our attention to designing the Mission Mode. This section would guide users through the various stages of the HLS's lunar journey. To achieve this, we embarked on a comprehensive design exploration process, translating our initial wireframes into high-fidelity prototypes.

Screen Shot 2021-03-25 at 2.37.47 PM.png
Screen Shot 2021-03-25 at 2.39.53 PM.png
ezgif.com-video-to-gif-179.gif
Chapter Carousel

The carousel houses all the different chapters of the mission narrative, ensuring a seamless alignment with the "race track" concept established earlier. Through iterative design cycles, we experimented with various layouts and interaction methods. Our goal was to create a visually cohesive and easy-to-use carousel that effectively showcases the mission chapters and empowers users to navigate the lunar journey with clarity and engagement.

Screen Shot 2021-03-26 at 9.36.58 AM.png
IMG_0798.PNG
ezgif.com-video-to-gif-180.gif
Interactive Points

To enhance user engagement in Mission Mode, we integrated interactive elements into the video interface. "Information points" appear as clickable hotspots throughout the video, pausing playback to offer additional content like text, diagrams, or short clips. A custom video player overlay with a scrub bar was also added, allowing users to easily navigate mission chapters and explore these points. This approach deepened users' understanding of the HLS's lunar journey.

04

Implementation

Design System
ezgif.com-gif-maker (64).gif
Interactive Points

The design system was a cornerstone of the development process, acting as a detailed blueprint that outlined application flow, transitions, functionalities, and visual assets. It ensured design fidelity, allowing the development team to accurately translate the design vision into a cohesive user experience. By serving as a single source of truth, it streamlined development, minimized revisions, and facilitated smooth collaboration between design and development teams, leading to a more efficient workflow.

05

Validation

ClipartKey_1790987.png
ezgif.com-gif-maker (66).gif
User Onboarding

User testing, including stake holder feedback, revealed the need for a comprehensive onboarding experience. This introduction will ensure users are well-equipped to explore both the Visualizer Mode and Mission Mode functionalities, maximizing their understanding of the Dynetics HLS and its role in Artemis.

06

Launch

mbo.png
ezgif.com-gif-maker (62).gif
User Onboarding

Our efforts culminated in the successful launch of the Dynetics HLS web experience. Strategically placed on the Dynetics landing page, the application offered a captivating platform for audiences to explore the HLS. Through user-centric design and features like Visualizer Mode and Mission Mode, it showcased the lander's technical marvel and its role in humanity's return to the Moon. This interactive experience effectively communicated Dynetics' contributions to the Artemis program, fostering public interest and elevating their position in lunar exploration.

Outcomes of the Journey

The Dynetics HLS web experience wasn't just a showcase; it was a lunar launchpad in users' hands. Interactive features like the Visualizer and Mission Modes fostered global engagement with the HLS and Artemis. This web-based platform, accessible to all, effectively communicated Dynetics' contributions, solidifying their position as a leader in lunar exploration. By bridging the gap between technology and public understanding, this project ignited a collective passion for humanity's next giant leap. I'm proud to have had the opportunity to be a part of it. 

Final Product

The Lunar web application, optimized for desktop, tablet, and mobile devices, empowers users to explore the Dynetics HLS and Artemis from anywhere. Want to experience it yourself? Launch the app directly or scan the QR code with your mobile device!

IMG_0045.PNG
[CITYPNG.COM]HD Blue Apple iPhone 12 Pro
Screen Shot 2021-04-01 at 4.39.29 PM.png

Up Next

Madden 21 Super Bowl LV Virtual Hub

bottom of page