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 tele-operation ground software to control the rover from Earth.
Iris design team consists of four sub-teams run by students.
The Telemetry interface allows the mission control operators to monitor the rover’s status.
The map interface allows the mission control operators to navigate the rover remotely.
Image viewer lets users view, manage, and edit the photos taken by the rover.
Cosmos team manages and organizes components and ensures consistency across the three features.
Since the flight mission has to be conducted without error, it was imperative for the design system to minimize the posibilities for confusion and latency.
"I need a navigation bar, but everyone's navigation bar looks different."
"I need an icon. Is there an icon for this? Where do I get an icon?"
"What does this feature do? Why is it designed this way?"
"What does this file do? Can I work on it? Can I grab components from here?"
"Is this design final?"
"What happens when I click on this? What is the entry point for this screen?"
"I need to constantly monitor the rover’s status."
"I can’t have any error in this mission. That means I can’t have any confusion or latency in the software."
We looked into how the team was using Cosmos, and identified the areas that we could immediately improve.
We started with setting the goals for the new Cosmos Design System team.
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:
Fundamental UI elements that serve as the building blocks of Cosmos interface.
Collections of stars that form relatively complex UI components
Collection of stars and constellation that form sections of the interface.
Stars are the fundamental UI elements in Cosmos that can't be broken down into smaller elements.
I ran through all of the occurrences of grayscale colors in the system and finalized the color palette.
All of the cosmos icons now share the same grid, stroke weight, and naming convention.
Constellations are collections of stars that form relatively simple UI components.
I went through the existing controls and reorganized them into the Controls Suite. I made sure everything:
Galaxies are collections of stars and constellations that form Cosmos.
We standardized the base artboard size to ensure seamless integration of the different features.
I established the Cosmos team's process and ways of staying connected with other teams.
Whenever scientists identify something interesting on the moon's surface, they create a Point of Interest (PoI) card to enter it in the ground software. They assign a level of importance and category of the object and later use the object as a marker to plot the rover's pathway.
PoI card is a crucial component that appears in multiple features. Designers in the different sub-teams formed a task force group to consolidate PoIs. I was in charge of consolidating the PoI card and publishing the related components. Here's a rough process of our iteration.
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 the problems in the design system.
I consolidated the file types and designed a standardized thumbnail to organize the files and easily communicate what the file is for. Our teammates loved it!
As we moved closer to the shipping date, the team needed a well-thought-out framework for the design specs catered to our team's need.
Since the primary users for the design specs are the developers, I asked to observe how our developers translate the design specs into code. I also interviewed them about what helps or doesn't help them in the design specs.
Based on what I learned from the developers' workflow, I created sample design specs and tested it with the developers.
I suggested an interactive prototype that the developers can click through. I added redlines so that the developers don't have to guess the spacings.
We ran #ask-cosmos channel on Slack to:
To help the new designers jump into the system quickly and make the onboarding process as seamless as possible, we made a comprehensive documentation that explains the design rationale, how to use Cosmos effectively and how to navigate the file system.
Designing and implementing a design system was a constant conversation with our designers, developers, and our end users. We're proud that we transformed our design system into something that is deeply integrated into the team's process, and we'll continue to work rigorously to help the team perform to the best of their abilities.