Previously at Dropbox
Looking for new opportunities!
Orbitscape—Luminosity Lab
Simulation web tool to visualize lunar orbital mechanics in space.
UX/UI, WEB, VISUAL DESIGN
2023


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.
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
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.
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.
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.
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.
Viewable Orbit Families
A way for users to select through and see different types of orbits in a tabular approach.
Interactive Educational Experiences
Sprinkled educational infographics in the form of popups which react upon clicking on the elements in the map.
Freeform Navigation
A three dimensional space that can be zoomed in and out and dragged around, just like Google Maps.
Published Mission Information
Users can read up on published information about specific missions in specific orbit areas.
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.
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.
WIREFRAME / NEW LAYOUT
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 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.
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
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.