Orbitscape—Luminosity Lab

Simulation web tool to visualize lunar orbital mechanics in space.

UX/UI, WEB, VISUAL DESIGN

2023

Orbitscape Thumbnail
Orbitscape Mobile (1)

Introduction

Orbitscape

Formerly known as Lunar Orbital Region Maps, is a collaboration between Luminosity Lab and Interplanetary Initiative Laboratory, a maker space lab at Arizona State University focused on developing space hardware and software that helps solve challenges in outer space. 

I lead the 0→1 conceptualization and design efforts for Orbitscape, along with leading two ideation workshops, four user interviews, stakeholder presentations, and five shipped features in collaboration with fellow student engineers.

YEAR

2023

TIMELINE

15 WEEKS

ROLE

UX DESIGN LEAD

CONTRIBUTORS

TECHNICAL ADVISER
STAFF LEAD
ENGINEERING LEAD
DATA SCIENCE
GRAPHIC DESIGNER

Overview

What is the Lunar Orbital Region?

In simplest terms, lunar orbit regions are invisible highways and parking lots found around the Moon. While the term cislunar region refers to the space between Earth and the Moon.

These highways can be used to traverse through space or even “park” a satellite in a specific zone to capture data of other planets or conduct other space missions.

Orbitscape is an interactive simulation tool designed to act as a map that visualizes these highways and parking lots in space—a critical platform to help inform and educate policy makers and students about orbits.

Brand Highlight (1)
Orbitscape Highlight
Viewport Highlight
UI Component Highlights

problem

Many countries are rapidly developing their own technologies and sending new missions into the space between Earth and Moon, which creates traffic in space.

It’s important that policy makers are well informed about the underutilized areas and topics surrounding these areas as new policies are being created and enacted. Interplanetary Initiative Laboratory saw this problem as an opportunity to tackle.

The Brief

“%22

How might we visualize these highways in space for policy makers to better understand when enacting new policies surrounding these areas in space?

Hypothesis: If policymakers can simulate orbital paths and analyze relevant data, then they will be able to make more informed decisions when creating space-related policies.

I believe creating an accessible and interactive web tool to visualize complex orbit data sets can create an educational experience and can better inform policy makers about the issues.

Early Research

Setting our preliminary research goals.

Aside from the staff lead and our advisor who helped supply us with reading materials, our immediate team had no prior knowledge to orbital mechanics, so this was a new world to us. In order to move forward into the project, we set out three main goals.

Understand orbital mechanics
Unravel the complexity orbital mechanics and gain a better understanding of the Earth-Moon regions in order to visualize it.
Reference other platforms
Perform a feature analysis of any similar existing products/interfaces to identify effective ways to communicate orbital mechanics.
Identify real user needs
Reach out to space industry experts and gain insights from their experiences and needs.
Research Artifact 1

SECONDARY RESEARCH / ORBIT FAMILIES 

Insights from competitive feature analysis.

I performed a competitive feature analysis and literary research to figure out what visual tools exist and which open-source data is available for us to leverage. I found that although there wasn't a direct comparison to our team's design goals, there were plenty of related references worth exploring.

Referencing new found design patterns and interactions.
We discovered effective design patterns for presenting visuals in relation to space elements. A crucial aspect was that the rendered visuals were often interactive, similar to how Google Maps operates in a spatial environment.
Complicated interface & user inputs.
Our team often found the interfaces to be challenging, especially simulation interfaces that necessitate manual data entry, as there was a lack of intuitive introduction to the data and experience presented.
Software requirements & data gathering.
The majority of the software requirements were developed using Unity and threeJS. Fortunately, the data collection was also available from open-source platforms such as NASA’s database.
Research Artifact 2

SECONDARY RESEARCH / FEATURE ANALYSIS

Initial Ideation

Strapped for time, so we explored one direction to test.

The team generated a variety of ideas for the platform's potential, and with the development beginning from the ground up, we had numerous directions to explore.

In our ideation workshop, we explored three possible directions. A scrolly-telling experience, a static site experience, or an interactive simulation.

I decided to begin with a static site experience, as it was the most straightforward option to implement within our timeline. This approach effectively provides users with all the essential data and information they need to explore lunar orbits, similar to a Wikipedia entry.

In this direction, users won’t need to input parameters to visualize the orbits; all data will be pre-displayed and interactable for them to browse through.

Exploration Artifact 1

Early explorations focused on potential key user interactions.

The key interactions of the platform were informed by our initial competitive analysis research of other platforms, as well as early conversations we’ve had with advisors from Interplanetary Initial Lab.

At this stage, I only had 4 days to sprint and create high fidelity screens for testing. I drafted 4 main key interactions with a help of composited imagery to communicate visual ideas for the threeJS assets.

eye icon

Viewable Orbit Families

A way for users to select through and see different types of orbits in a tabular approach.

click icon

Interactive Educational Experiences

Sprinkled educational infographics in the form of popups which react upon clicking on the elements in the map.

nimbus_drag

Freeform Navigation

A three dimensional space that can be zoomed in and out and dragged around, just like Google Maps.

mingcute_rocket-fill

Published Mission Information

Users can read up on published information about specific missions in specific orbit areas.

Exploration Artifact 2

EARLY EXPLORATIONS

User Research

After a discovery call and an early user testing of the static site experience, I found that the static design experience was not the right solution.

With our academic connections through the lab, we carefully selected high profile space industry experts to gain their initial insights on the idea of the project and to align the project with real user needs.

It was a successful eye-opening interview session. As a non-expert on these space topics, I quickly saw the flaws in our designs as well as the successful takes in areas of our designs. 

Static static direction limited users
Static site direction we had disabled the users from being able to compare and contrast orbit visuals from each other, as it could only show one type of visual at a time with the tabular design approach.
Lack of variety in orientations
There were standard ways to look at space, and different users read diagrams in other orientations better than others. Some understand information better in 2D vs 3D.
A call for simulated movements and trajectories
This was a reoccurring feedback from our interviews, we approached it with open ears and reevaluated our approach, despite the possibility of the simulation idea being out of scope.
Research Artifact 3

After my research, I drafted a simpler layout with a more intuitive and feature packed screen.

I have fully re-hauled the old layout into this simpler single screen view that contains all the features in accessible view within a single toolbar. Each component is now clearly more separated by function and the core of the interaction happens through entry point of a single component.

Exploration Artifact 3

WIREFRAME / NEW LAYOUT

Wireframe

INFORMATION ARCHITECTURE / DYNAMIC TOOLBAR

Final Design

As it turns out, our initial approach was not as effective as we hoped. So our team shifted our approach and adapted to our research learnings. We redesigned our platform to become an engaging web tool that works as a simulation for lunar orbits in real time.

After multiple discussions with my engineering team the feasibility and time scope of a simulation design approach, we found a middle ground that merged small scale simulation with elements of the early explorations, giving us best of both worlds for our users.

Final Design 1

FINAL LAYOUT

I predict our change to a simulation approach will increase the effectiveness of the educational model of the tool, because it will lead to a more immersive and customizable learning experience for the users.

Our skilled engineering team is experienced in designing simulations, which ensures that this pivot will not disrupt our revised approach.

A

Dynamic Toolbar

A new dynamic component for a more intuitive flow.

Our new flow consolidated all of the interaction in a powerful dynamic tool bar that both clears up the visual clutter and become the user’s entry point for every complex simulation inputs and controls of the platform.

These major changes also added a fundamental future facing strategy to the platform. As the project grows, the components can grow with it, allowing us to easily add more functionality to the platform.

toolbar interaction

B

Mission Panel

A directory for displaying space missions by leveraging NASA JPL public mission data sets

Missions can now be accessed in the toolbar, allowing users to open a panel with a list of previous or ongoing missions. Users can also select and add a mission's orbital path to the map for a visual simulation on the map.

The previous design’s layout felt less accessible and look more like an after-thought, so in this new format it has been improved by embedding it into the toolbar interactions.

DISPLAYING missions interaction

Find and preview any space missions from the past or present

With the help of open source data of past or ongoing missions, we can gather those datas and display it for users to preview on the map.

C

orbit render

A dedicated tool for custom rendering the orbit visuals.

One of the key components of the tool is the ability to visualize the orbit families.

I approached the new design with customizability in mind. Users can now properly select the orbit families in detail, giving them the ability to input their own parameters, which affects the orbital path displayed. 

This was a missing key interaction that we found users were looking for during our demo of the first interaction, which was what led us to create a simulation tool in the process

rendering a custom orbit

D

Active Viewport

Active orbits rendered are now showcased in a viewport display. 

With the active viewport, users that generated multiple orbits on the map can now quickly compare and contrast orbital paths or remove/hide rendered orbit paths as needed.

This was a key improvement as one of our user insights stated the importance of comparing and contrasting orbital paths—the previous tabular setup did not allow for multi-orbit viewing.

Final Design 2
Final Design 4

View the space in any orientation.

In our early user research, it was brought up to us that it would be great to have several visual scales and abilities to view the space in different orientation. 

The addition of this feature addresses that pain point, as well as when users would need to re-center themselves when the map becomes disorienting to drag around and zoom.

E

SIMULATOR CONTROL

Granular control over the simulated missions.

As users are selecting and displaying missions and orbit paths on the map, it’s key that they also have the ability to play/pause and view the end to end timeline of the path. 

This sort of granular control brings together the missing interaction from the previous design, as well as improve the simulation experience of the platform. 

Simulator control

Final Design 3

OUTCOME

The final designs excited stakeholders at the Interplanetary Initiative Lab at ASU, and by 2025, it will be launched as a commercial web API for space companies.

Although I am no longer a part of the project, the final designs I worked on have been fully shipped and I couldn’t be more fortunate to have worked on such an interesting problem space.

RETROSPECTIVE

Conceptualizing my first real-world project 0→1 was no easy task. 

I had to learn to move quickly and use the right process at the right times, but every move taught me invaluable lessons. Ultimately, the final designs I came up with was something to be proud of.

#1

Prepare to move quick and adapt

I realized that the design process at school vs real world doesn’t have a set path. I had to understand quickly to skip unnecessary design processes to get to my goal quickly and efficiently.

#2

Engineers are your best friend

Bring the engineers in the conversation early and often. There were so many times where I felt unsure about the feasibilities of the tech, and realized I could just ask the expert in my team.

#3

Heads down research

The process that I ended up spending the most on was actually the research. I didn’t have a PHD on the topic of space, so I constantly hit the books and asked the experts on the topic to truly nail down the accuracy of the platform.