Iconography suite library
Media spotlight (from the top-left clockwise: TechCrunch, Bloomberg, NASA, TechTrends)
Responsibilities
Audit of the initial design system, standardizing components across products, and user testing
Duration
5 months
Tools
Figma, Dropbox
Cosmos is a design system for ground teleoperation software for Iris Rover, a lunar rover created by Astrobotics in partnership with NASA.
Here at Iris Rover, we are working democratize space industry by becoming the first private lander to successfully land on the Moon. The design system will play a critical role in this mission because it will pave a way for new comers and work as a point of reference in the industry that is not yet widely accessible. The outcome of the project features an expanded library of components centered on the concept of scalability, consistency, and transparency.
3D render of our rover (size of a shoe box)
Iris Rover is expected to launch in 2021 from Cape Canaveral, Florida to perform phase 1 of NASA's Artemis Project
Problem Space
As our product gained complexity the team suffered from inefficiency in development work and discrepancies between visual language.
Cosmos serves all of the three products of the ground teleoperation software. As the lunar mission will be carried out in highly precise setting, it was critical that the design system consolidate and standardize the components to minimize any room for confusion during the actual mission.
Image Viewer
Map
Telemetry Visualization
Combined Screen
Approach
We conducted an audit of the initial Cosmos style guide.
When I joined, the team has just started putting together a style guide. Our team started to work off the foundation laid out by the legacy style guide to expand and standardized the existing design language.
Legacy style guide
Goal
How might we deliver a consistent design system that enriches interdisciplinary collaboration and transparent communication?
Once we set our goal, we conducted a team interview to discover insights and brainstorm on the ways we can move on to achieve this goal. During the process, our team agreed on restructuring the design system based on Brad Frost's atomic design principle.
Exploration
Driving a systematic change in the design system through a bottom-up approach.
Once we set our goal, we conducted a team interview to discover insights and brainstorm on the ways we can move on to achieve this goal. During the process, our team agreed on restructuring the design system based on Brad Frost's atomic design principle.
Image Viewer Tag Management interface
Before (without design system)
After
After
Map interface
Before (without design system)
After
After
Telemetry visualization interface
Before (without design system)
After
After
Final Outcome
As a result of the project, we delivered a Figma component library of the icons, assets, and color and typography styles applied on the products. By establishing a go-to document for all the components and design-spec we aimed to reduce the friction during the design<>dev hand-off process. In addition to the component library, we established a new file organization structure on Figma, started a new design system Slack channel, and complied a documentation of our overall process.
While we were redesigning the interface, we realized the lack of a universal artboard size was a source of frustration on the development effort. As a result, we delivered a standardized artboard guideline as the part of the hand-off protocol.
In addition, we complied a documentation of the general steps take to reorganize and expand a design system. This will help onboard new members of the team. Most importantly, our team aims to publish the documentations on Iris website at the end of the year 2020 for the whole world to learn more about our organization and Cosmos.
The new "ask-cosmos" Slack channel was used communicate the recent changes made to the design system as well as a way for other members in the team to inquire about existing components and request new components.
As the final step of redesign effort, we suggested a new organization method for our Figma files. Since there are multiple teams using the same Figma project folder, we decided to create a color-coded thumbnail according to the owners and the teams.
Impact
Although a work in progress, our design system has been getting a lot of attention from other teams working on rover softwares. As a response to the attention, the design system is currently working on refining the documentation of the process and we aims to make our work public at the end of the year.