Orbitscape—Luminosity Lab

A simulation web tool to visualize lunar orbital mechanics in space.

TYPE

UX/UI, WEB, VISUAL DESIGN

Orbitscape Home screen

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

JESSY KATE SCHINGLER
TYLER SMITH 
ALLEN LIN
CONNOR NAIL

VIANKA JAUREGUI

Overview

What is the Lunar Orbital Region?

The lunar orbital region refers to the area surrounding the Moon where spacecraft can orbit and conduct various scientific missions. This region is crucial for studying the Moon's geology, understanding its history, and preparing for future human exploration.

Orbitscape is focused on creating an interactive web platform tool that aims to visualize the lunar orbital regions—a critical platform in informing and educating policy makers and students about orbits.

highlight2

Project Brief

The beginnings of a moonshot project.

Many countries are rapidly developing their own technologies and sending new missions into space especially around the Cislunar Regions, the space between Earth and Moon. 

It’s important that policy makers are well informed about the underutilized areas and topics surrounding it 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 showcase lunar orbit data sets for policy makers to understand orbit families and the lunar orbital regions that surround the Earth-Moon system?

Our Hypothesis

“%22

If policy makers can simulate orbital mechanics, they will enhance their grasp of navigational paths across the Lunar Region and gain better insights when enacting new policies.

Solution

Create an accessible web tool that simplifies complex orbit data into an interactive simulation experience. 

Onboarding Screen
UI Modals
Viewport Closeup

Early Research

Setting our preliminary research goals.

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. 

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.
Orbit Families

ORBIT FAMILIES / SECONDARY RESEARCH

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.
Feature Analysis

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.

We chose to start with a static site experience because it was the easiest option to implement for our given timeline. This approach would deliver all the essential data and information users need to explore lunar orbits, much like a Wikipedia.

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.

Ideation

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 1.2
exploration2.2

User Research

Setting up a discovery call and an early user testing of the static site experience.

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.

Quotes

The static design experience was not the move.

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. 

We quickly made improvements in our designs based our insightful testing session.

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.

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 Hypothesis

“%22

We 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.

Before2 After2

A simpler layout for a more intuitive and feature packed screen.

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

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.

Wireframe

toolbar interaction

B

Mission Panel

A directory for displaying space missions.

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.

active viewport
Orientation view

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

Simulator control

OUTCOME

The final design was met with excitement as we shared it to a large board of stakeholders from Interplanetary Initiative Lab at ASU.

As of 2025, it is now moving from a moonshot project to a fully commercialized product as a purchaseable web API for the space industry to implement into their systems. 

Although I am no longer a part of the project, the final designs I worked on have been fully implemented into the project.

RETROSPECTIVE

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

Ultimately, the final designs I came up with was something to be proud of. Here are some things I learned.

#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

Prepare to move quick and adapt

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.