Design Systems for Space

I’ve invested most of my time at Rocket Communications building a Design System that’s re-imagining the User Experience for applications that manage satellites and other space assets.

The Astro User Experience Design System (UXDS) is an application design and development framework maintained by Rocket Communications on behalf of the US Air Force Space Command. The Astro UXDS enables diverse development teams to build rich space app experiences and custom applications with established interaction patterns and best practices.

The challenge:

Build a suite of interactive sample applications that demonstrate how a team can use a Design System to standardize multiple, distinct software experiences across the Air Force Space and Missile Systems Center.

In just under six months, our cross-functional team of four designers and three developers built six in-browser app demonstrations using the Astro UXDS.

The goal: share the work, not just a link

  • First, our UX research with users and stakeholders identified key task flows, solution constraints, and current pain points in existing systems.
  • Using those findings and the Astro UXDS, we designed and developed solutions to support the Air Force space and satellite directorates, working in partnership with users and stakeholders to iterate on our designs and interactions.
  • At the end, our team came together to provided detailed design specifications, wireframes, documentation, and source code as downloadable resources for teams looking to develop their own apps supporting Air Force space and satellite directorates.
The Telemetry, Tracking and Control Command Dashboard executes a satellite’s prepared pass plan and provides real-time data about the satellite and antenna connection.
The Ground Resources Equipment Manager provides detailed diagnostic information for a network of hundreds of pieces of ground-based equipment and antennae.

These demonstrations help prospective development teams realize what‘s possible using a design system built specifically for the needs of service members managing space apps.


The bonus round: a double dare

With only about three months to develop six web applications, there wasn’t much time for taking risks. But one opportunity in particular seemed just too great to pass up.

As a Design Technologist, I relish the joy of discovering situations where my design and engineering skills overlap in just the right way to bring something new into focus.

The Telemetry, Tracking and Control Subsystem Investigator demonstrates navigating a failure chain to find the source of an outage on a satellite in orbit.

The smallest and last to be built of the Astro sample apps, the Subsystem Investigator wireframe had only a simple flowchart graphic for the failure chain schematic. Then I had an idea.

The original wireframe for the Star Tracker pane of the Investigate app.

In the rough prototype we’d already started coding, I put together a basic SVG illustration that could be styled with simple CSS classes, then hit up our designers with a challenge:

“If you can define selected, hover, and status styles, then I’ll build an interactive animated schematic around any vector art you want.”

I took this styled SVG proof-of-concept to our lead visual designer.

Never one to pass on a dare, the lead visual designer came back with a brilliant gradient-shaded isometric illustration that used a matrix of interchangeable glows, opacities, and border styles to convey selected, hover, and status states. From that Illustrator file, I built this interactive schematic:

The designer’s riposte — light years more compelling than a flow chart.

Together, we transformed something unremarkable into a highlight of the Astro UXDS showcase at conferences and trade shows.


The future: a design system that endures

Since launching the sample apps in 2019, I’ve continued to iterate on the Astro UXDS Web Components as lead developer on the Astro team.

Today, I’m responsible for engineering decisions across multiple codebases that use the Astro UXDS, such as:

  • Moving all of our Web Components into Storybook for more efficient development and maintenance
  • Investigating framework dependencies and implementing library-wide transitions such as upgrading the components from Polymer3 to LitElement
  • Defining and refining our developer documentation, build processes, asset generation, release cycles, and package publication

I also work with the rest of Astro team to identify, research, and design Astro component candidates, ensuring that the Astro UXDS is an ever-expanding library of design patterns and development resources open to anyone making effective apps for space.


Live Astro Sample Apps & Design Specifications

Note: some of the data APIs have gone dark since we first published, so some live demos may lack the full experience.

You can read more about the Astro UXDS process and see our library of design and development resources for space and satellite applications at AstroUXDS.com.


I make other stuff too!