top of page

This site is optimized for desktop and laptop viewing only

AdobeStock_932790587.jpeg

Mission Control

Console Screens

AdobeStock_415563267.jpeg

Mission Control consists of numerous teams, known as "Consoles", each dedicated to specific systems of the station. Every Console requires tailored telemetry and controls, so a customizable dashboard system was designed and developed to meet their diverse needs. I designed the panels that users can access through a library and add to their personal dashboards. Each panel is crafted to communicate critical information in a clear and visually digestible way, bringing modern design principles to an industry that has remained largely unchanged since the ISS was deployed in 1998.

*Due to the proprietary nature of my work, I can only showcase selected snippets of my design process.

Please note that these designs differ from the final delivered versions.

smaller desktop.png
  • UI Hierarchy

Hierarchy in our system is established by assigning lighter colors to the most critical elements that require quick user responses. The colors are determined based on the layer number of each element, ensuring a clear visual distinction and guiding the user's attention effectively.

screen stack.png
  • Dashboards

Dashboards are often used to summarize complex data visually, allowing users to monitor, analyze, and interact with information efficiently.

dashboard experience.png
dashboard sketelon.png
  • Elements

Designing a Design Visual Language (DLS) that met all requirements was a challenge, particularly when selecting colors, as each color in the space and aeronautics industry carries a specific and critical meaning.

daschboard vector.png

Panels

Cards

Footer

Header

dashboards as tabs.png

Console Setup: If the setup consists of two regular large computers the user can only see two Dashboards at the same time. It is important to remember that users have the flexibility to re-arrange the layout of the dashboard as well as adding/deleting the panels being displayed.

Dashboards as tabs: While only one can be seen per monitor. Several dashboards can be open as tabs.

monitors.png

The number of displayed dashboards will depend on the size of the monitors. In this example four dashboards are being displayed at once.

crew and ground.png

A consistent Design Language is applied across all interfaces, ensuring seamless alignment in the information displayed to both Flight Operators and Crew.

  • Example

All panels can be resized and repositioned to suit user preferences.

dashboard.png
power panel 1.png
power panel 2.png
power panel 3.png
power panel 4.png

Panel Designs

  • Data Density

This is an example of some of the screens I was tasked with redesigning. Previously, Flight Operators required 7 years of training to master eye patterns that allowed them to detect when a number fell out of range. I changed that.

Before

data.webp

After

  • Data Trees

I designed data trees that enable users to easily identify related information, with the UI dynamically changing color to highlight anomalies or numbers that may potentially go out of range. Additionally, I integrated command controls into these views, allowing all actions to be performed within a single interface.

power tree.png
power expand.png

Panels Examples:

  • Solar Power 

Since the station charges when the solar panels face the sun, I designed a visual timer to display how much time remains until the eclipse period (when there is no sunlight).

solar panel.png
solar clock.png
  • Propulsion

I made vector drawings of the thrusters, enabling Flight Operators to quickly identify and select the correct ones to fire. Instead of overwhelming them with tables full of data, I utilized visual aids to convey the same information more intuitively.

propulsion.png
propulsion tanks.png
  • Comms

Here are some iterations of the communication controls I designed for Flight Operators, enabling them to connect with the Crew through calls, messages, and video. The type of signal and signal strength had to be shown at all times.

comms 1.png
comms ideation.png
  • World Map

Mission Control features a massive wall-to-wall screen displaying a world map view that tracks the station's orbits and highlights areas with strong connectivity for communicating with the crew aboard.

Designing this screen for them was truly an honor.

Iterations

Final

3D map.png
2d map.png
  • Crew Timeline

This was a challenging element to design as it needed to display a large amount of information constantly. I collaborated closely with the Crew Manager and developers to organize and present all the necessary information in the most effective way possible.

Before

timeline before.png

Ideation

  • Color Coded 

As previously mentioned, each color carries a specific meaning, so all activities are color-coded to ensure clarity. Users can hide or show the timelines, and an edit tab allows them to create and add new activities to the schedule seamlessly.

timeline.png
activity timeline.png

Vertical view for different use cases:

  • GNC Timeline

Some systems and devices require a vertical view to maximize efficiency and save space.

gnc timeline sections.png
crew timeline.png
gnc timeline.png

Filtering Options:

  • Within Panels

Designing the optimal UX filtering pattern for navigating a complex system with numerous options was a significant challenge. Below, you can see how I explored solutions using pills, dropdowns, and tiles to create a user-friendly and intuitive experience.