Cosmos for Iris Rover
ySep 2019 - Jan 2020
Role
Cosmos Lead
Tools
Figma
Overview
To the moon
Iris Rover
Iris, roughly the size of a shoe box, aims to be the U.S.'s first private robotic rover to explore the moon's surface. The flight operators use teleoperation ground software to control the rover from Earth.
What I did
- I led the Cosmos Design System team to build and maintain a design system for a lunar rover.
- I defined the design system's structure, language, and process.
- My team launched the first published version of the design system.
Problem
Modern Rovers require modern design systems
The team needed a robust design system and organized structure.
As the software became more complex and the team grew larger, the Iris ground software team started to face new challenges.
...But Cosmos was still at a very early stage.
We looked into how the team was using Cosmos and identified the areas that we could immediately improve.
- Components weren't published to the design system.
- Components were not named or grouped properly and were not being used by the designers.
- Icons were in different sizes and placed on sub-pixels.
How can we transform Cosmos into more than a set of UI elements?
How can we bring structure and meaning to our design system and value to our team and users?
Wayfinding
Our north star
- Cosmos should expedite the design & dev team’s work.
- Everything in Cosmos should be available in Figma to drag & drop from the assets panel.
Functionality
- The colors, iconography, and type system should be consistent within all of the sub-teams.
- Cosmos should provide a single source of truth for all the components.
Consistency
- Cosmos documentation should constantly evolve to accommodate the team's changing needs.
- Cosmos should guide the new designers to jump into the system quickly.
Documentation
Design
Reorganizing Cosmos
Inspired by Atomic Design, I defined our own language and structure for our design system. We also listened to the design team's feedback on how the current Cosmos system was hard to navigate. We reorganized our design system based on the following structure:
- Colors
- Typography
- Iconography
Stars
Fundamental UI elements that serve as the building blocks of Cosmos interface.
Example in Cosmos
- Navigation
- Controls
- Point of Interest Cards
Constellations
Fundamental UI elements that serve as the building blocks of Cosmos interface.
Example in Cosmos
- Telemetry
- Map
- Image Viewer
Galaxies
Collections of stars that form relatively complex UI components.
Example in Cosmos
Category
Stars
Stars are the fundamental UI elements in Cosmos that can't be broken down into smaller elements.
Colors & Typography
I ran through all of the occurrences of grayscale colors in the system and finalized the color palette.
Iconography Suite
- We expanded the iconography suite to 24px, 20px, 16px and 12px, following the 4px rule.
- All Cosmos icons share the same underlying grid structure.
Category
Constellations
Constellations are collections of stars that form relatively simple UI components.
Controls Suite
I went through the existing controls UI elements and reorganized them into the Controls Suite.
I made sure everything:
- follows the 4px rule
- is built from the Cosmos Stars (colors, typography, iconography)
- is named properly
- can be dragged & dropped from the Figma Assets panel
- has constraints set properly so it's resizable
- can switch instances easily based on the component state
Category
Galaxies
Galaxies are collections of stars and constellations that form Cosmos.
Artboard Sizing Guidelines
We standardized the base artboard size to ensure seamless integration of the different features.
Iteration
Establishing Process
I established the Cosmos team's process and ways of staying connected with other teams.
Testing the design system
We tested the split screen interface, another big project of ours, with the soon-to-be mission operators.
- I wrote the test protocol and conducted the testing.
- We finalized the tab interaction, split screen flow, and the command line interaction.
- We also observed other teams' testing sessions to find ways to improve the design components.
Communicating
Staying connected
#ask-cosmos
We ran #ask-cosmos channel on Slack to:
- discuss the design system and quickly respond to the team's questions and needs
- keep the team updated on our progress.
Guiding the new designers
To help the new designers jump into the system quickly and make the onboarding process as seamless as possible, we created comprehensive documentation that explains the design rationale, how to use Cosmos effectively, and how to navigate the file system.
