ASTRO Design system

---

Astro was commissioned by the United States Space Force and Space Systems Command (SSC) for designing Rapid Resilient Command and Control (R2C2) and Satellite Operations (SATOPS) web applications.

Astro’s designs are based on user-centered research of the functions and capabilities required for applications used in space operations. This approach involves SMC and commercial space systems operators in all phases of research and design validation. Their direct participation ensures that applications developed with these guidelines will meet user needs. 

During my time with the Astro team at Rocket Communications, I was responsible for a variety of tasks such as:

• Designing and constructing new components 
• Enhancing existing components 
• Finding innovative solutions for intricate design issues in Figma 
• Training new team members
• Developing new website features
• Enhancing various themes 
• Supporting Astro users
• Producing educational content
• Applying our status system to R2C2s use of C2MS 
• Research and handling documentation

Problem 

The Astro Design System encompasses three distinct themes: wireframe, light, and dark. 

Our team was tasked with developing various components and patterns for each of these themes. This involved carefully selecting and testing colors from our existing palette, as well as creating new color tokens. 

Research

• UX Audits
• User interviews
• User testing

Challenges

• Combining components 
• Color pairing that met accessibility requirements 
• Creating new design tokens
• Complex UX Audits

Design Solution 

We meticulously paired our existing colors and new colors within each component and pattern, ensuring both accessibility and visual appeal.

Problem

Astro features status symbols and status colors which are used to indicate different levels of severity. 

An issue we encountered was that the current light theme status colors failed accessibility tests when they were against a light background which forced us to use a dark colored GSB (Global Status Bar) in light theme. This was because the GSB housed the monitoring icons which are primarily made up of our status system colors. 

Research

• User interviews
• WCAG compliance
• A/B testing 
• User testing

Challenges

• Astros "caution" status color is yellow and this was a particularly tricky color to find a version of that met WCAG standards 

Design Solution

After conducting thorough research and testing, my team and I successfully identified colors that met accessibility standards while preserving the intended visual communication and allowed us to use a lighter colored GSB to fit the theme more appropriately. We also recommended a slight increase in the size of the status symbols. 

Other elements that also saw improvements include notification banners and status symbols, along with components that featured status system colors and symbols.

Problem

Users had a desire to utilize our status colors as backgrounds for table rows. 

Research

• User interviews 
• WCAG compliance

Challenges

• Text did not meet accessibility requirements on our status colors at 100% opacity

Design Solution

To address this, I successfully adjusted the opacity of our status colors, ensuring that the text and elements within the rows adhered to WCAG compliance standards. This modification allowed us to maintain the intended visual color language associated with each status color.

Problem

The design system needed new components as well as improvements to existing components. 

Research

• User interviews 
• User testing
• Audit of existing components

Challenges

• Some of the previous component builds were incredibly complex
• Limitations in figma
• Incorporating figmas updates

Design Solution

Developed several components, including our card component. It was one of the initial components where we integrated Figma's component properties. This feature enabled users to conveniently modify the component without the need to access the layers panel for edits. Additionally, we implemented "slots" to facilitate users in swiftly replacing content with either pre-existing components or locally built custom components.

Some of the other components that I constructed can be seen below:

Problem

We were requested to implement status guidance into the command and control messaging specification documents. 

These documents serve as a standardized interface for exchanging ground data related to satellite missions, involving multiple vendors and developers. They are recognized as an international standard and are considered the primary messaging specifications for satellite command and control. In addition, there are supplementary specifications such as NASA's GMSEC that define other messages or specific integrations with C2MS.

Research

• Audits of the R2C2 C2MS documents
• User Interviews
• SME Interviews
• Tools for secure environments

Challenges

• Certain Tiers were CUI and required a secure environment to work in
• The R2C2 C2MS documents were incredibly dense
• Working around the SMEs schedules 

Design Solution:

By incorporating message alert statuses at the core level of C2MS, we were able to capture the most pertinent messages for all applications, while also establishing a framework for applying system-level decisions to the organization and mission levels.  

Problem

We required a method to communicate the statuses of components and patterns in our design system to users. 

Research

• User interviews
• Competitive analysis

Challenges

• Status key exposure in mobile
• Icon pairing

Design Solution

I created a table that categorizes a component or patterns assets by section, version, and status. It is conveniently located at the bottom of each component and pattern page, with clickable links in the version row directing users to the associated asset version.

Problem

Provide a user-friendly feature for designers, developers, and other users to seamlessly engage with our web components. 

Research

• User interviews
• Competitive analysis
• User Testing

Challenges

• Placement of control panels
• Design vs. Dev terminology 

Design Solution

We created the Component Playground. This platform allows users to view the various states, properties, themes of each component, and the ability to edit text without the need to navigate to our storybook site.  Positioned at the top of each component's page on our website, this feature streamlines the user experience by eliminating the need to switch between different locations.

I had the privilege of serving as a designer on Astro as well as being a user. Following my time on Astro, I was assigned to a project where we were assisting the United States Space Force. Throughout this project, we utilized the Astro design system to create applications. While working with the design system, I discovered that many of our decisions were beneficial, but there was also a need for new components, enhancements to existing components, and the removal of unnecessary components that caused difficulties for users.  

For instance, the container component posed a challenge. Although it was a simple component designed to facilitate content placement in large sections, it created issues during the design process. Users had to detach the container component in order for different states of other components within the container to activate in prototype mode. This issue could be addressed by allowing users to create their own containers, offering a non-component alternative, or providing detailed documentation. Unknown at this time what the best solution would be, further research is required. This example highlights the importance of documenting findings for future enhancements to any evolving product.