Stellar: Modern Web UI Design and Development
Stellar is a design system created to support software applications with powerful and data rich displays and interactivity. Many of the designers working on the Mars 2020 Ground Data System found that publicly available design systems such as Google Material worked well for creating web and mobile applications for consumers, but fell short when making powerful tools to support mission operations.
The Team
I worked as a founding member of a team of ten grassroots organized designers and developers who combined efforts to create a set of principles, reusable design assets, and code that are used across multiple Flagship Mission operations tool suites. It is specialized in supporting tools that have a high level of complexity or deep interactivity and large suites of applications that benefit from a cohesive look and feel.
My Role: Design System Creator. I contributed to the specification, design, and documentation of Stellar components, and was responsible for evangelizing its utility to my own software teams, and maintaining standards.
Timeline: 2 years
Components
Stellar has three primary components and four principles of approach:
Design: a set of interlinked Figma design files and libraries which are actively maintained by the Stellar team and are available for any JPL designer to access immediately. Design is often underfunded, or developers may be working with no design support at all, this resource is a significant efficiency, quality, and accessibility.
Web Native: developers can use the Stellar CSS library to style native elements and reference CSS variables and styles in existing applications. This allows for rapid updating and improvement of existing critical applications. Available on GitHub.
React: developers can use the Stellar React library to make use of more complex and non-native pre-built Stellar components which the team has spent years optimizing based on real world spacecraft operations experience. Also available on GitHub.
Principles of Approach
Rich: the complexity of expert tools is unavoidable. Rather than obscuring this complexity, seek to provide meaning through clear organization, typography and layout. The intended result is a flat and discoverable interface.
Conventional: we strive to rely on defaults and web conventions whenever possible. This shortens the learning curve for new users and reduces cognitive load for returning ones.
Inclusive: strive to enable users of all skill levels and abilities to be able to the software. In taking steps to make tools accessible to those with cognitive or physical disabilities, we make the application easier to use for everyone.
Modular: a modular and extensible system guides design decisions. This makes designing and developing new features easier.
Examples
The four applications above all make use of the Stellar Design System. Although they are quite different and exist on different missions, they share a challenging complexity in supporting high criticality expert operations.
ASTTRO: the primary science instrument targeting tool for Mars 2020 supports complex geometric visualization and modeling which enables all of the mission’s instruments to operate safely and with millimeter precision on the Martian surface.
MarsViewer: allows access to every science data product ever produced by the Mars Rover. This database is of immense value to the science team … but it immensely difficult to navigate and sort. The tool has a highly sophisticated set of controls which allow scientists to access their data as soon as it hits the ground, or search for one particular scan from years ago easily.
AERIE: a multi-mission activity planning tool, currently used by Europa Clipper, is specifically for orbital operations, and support spacecraft plans of immense complexity. While a tactical plan for surface operations is generally 1 to 3 days, an orbiter’s tactical plan cycle may be 4 to 6 weeks.
RASCAL: a staff planning and assignment tool which allows all operators across the Mars 2020 mission to know what roles they must fill, their start times, and live contact info for all other critical personnel, whether they are on site or remote.