AEGIS EMSS,a scalable design system.
Building a reusable design system for NASA's Extravehicular Activity mission software - so mission planning tools can grow without losing consistency.
AEGIS EMSS is an internal NASA application supporting mission planning, geospatial visualization, and operational workflows for Artemis missions, including Artemis III. As the platform expanded over time, the interface became increasingly inconsistent, making it harder to scale new features while maintaining a cohesive user experience.
My role was to establish the foundation for a reusable design system while modernizing key areas of the interface to improve consistency for both designers and developers.
Growth without a system
The application had evolved over several years, with individual features designed independently.
Different EVA missions surfaced the same interface differently — here's the same tool before and after the design system.
What's inconsistent here
- 1Header bar — sizing doesn't match panel headers used elsewhere in the app
- 2Icon rail — icons at a much larger, more colorful scale than toolbar icons
- 3Sidebar row padding — spacing varies between list items
- 4Toolbar icons — small, muted scale compared to the left navigation rail
- 5Folder/row sizing — EVA blocks built with inconsistent padding and height
Create a system that lets the product keep growing without becoming harder to maintain.
- Reusable components instead of duplicated UI
- Shared variables for colors, type, and spacing
- Clear component states and interactions
- Easier design-to-development handoff
From audit to assembly
Rather than redesigning individual screens, I approached this as building a system others could assemble features from.
I identified repeated UI patterns across the application: headers, navigation, folders, settings panels, tabs, buttons, and editable fields.
Created reusable variables for colors, typography, spacing, layout, and component behaviors. I leveraged shared variables wherever possible to improve consistency.
Some of the first components included: global header, left navigation, tabs, POI panel, folder components, right panel, buttons, disclosure controls, and edit controls. Each included variants, states, Auto Layout, and responsive resizing.
Once components were established, I used them to prototype new AEGIS functionality, including mission planning workflows. After each feature was built, I would check the functionality of it in the prototype before developer handoff.
Consistency, scale, and flexibility
Throughout the project I focused on a few core principles.
Reusable components replaced duplicated UI so the same patterns appear everywhere.
New features could be assembled from existing building blocks instead of starting from scratch.
Components were designed to support future functionality without requiring redesign.
Built additional variants and states for the newest feature, cutting down developer back-and-forth during handoff.
In the four months since the design foundation was built, AEGIS has already become the backbone for new feature development - two new flows and one new feature have shipped using the existing component library.
AEGIS in the hands of NASA teams
From analog field tests to mission simulations, the tools are used by the people planning and running exploration activities.
This project changed how I think about design.
Rather than designing individual screens, I learned how to design systems. Working on AEGIS taught me how variables, Auto Layout, variants, components, and interaction patterns work together to create interfaces that can evolve over time instead of being rebuilt feature by feature.
AEGIS is internal NASA software, so I can't share a live build. I built an interactive prototype using the AEGIS design system - try it yourself.
Try the interactive prototype→This prototype demonstrates the design system components, interaction patterns, and UI language I established for AEGIS EMSS.