Cosmos Design System
Design systems for CubeRover interface
Role –
Visual Designer
Team –
Cosmos Design System
Tools –
Figma, Principle
Timeline –
Fall 2019
Project Overview
Designing a comprehensive design system for a complex lunar rover interface
Cosmos is a design system for CubeRover, a NASA funded light-weight lunar rover expected to launch in 2021. With the growing complexity of the CubeRover software, the design team was tasked to keep track of components (such as buttons, icons, and pop-ups) used throughout the interface.

As a result, the team devised a consolidated design systems that keeps track of all the components to minimize confusion and increase the overall efficiency and productivity of the design team.
Project Context
Cosmos design system oversees three core features of the CubeRover interface
Cosmos team managed and organized components for the three core features of the CubeRover interface – Image viewer, shared map, and telemetry visualization.
Image Viewer
View, manage, and compare real-time images sent from the rover.
Shared Map
Remotely control the rover to plan routes and mark points of interest and obstacles.
Telemetry Visualization
Analyze and measure critical metrics of the rover such as temperature, sensor, software, and mechanical data.
Problem Space
Fragmented design system experience resulted in the dev team and design team dissonance
The current Cosmos design system suffers from missing, un-aligned components, and a lack of a universal grid and color system, which allows for a room for confusion between the dev team and the design team who makes up the software team.
Painpoints
User interviews with the members of the front-end and the design team
I started off with a preliminary interview to get a better understanding of the root of the problem. I asked questions such as: What are some of the barriers you encounter when you use Cosmos? How do you reference the design system during your design process? How does the current dev hand-off process look like and are there any improvements you would like to see?
Front-end team
Friction with dev hand-off
Insufficient details on the design spec hence difficulty delivering refined interfaces
Communication dissonance
Inaccurate updates delivered to production often without design team consultation
Misaligned roadmap
Dev team and design team working towards different deliverables hence different expectations
Design team
Lack of documentation
Absence of an universal source-of-truth document for reference
Communication dissonance
Lack of an overarching vision as a result of delayed communication with the front-end team
Asset redundancy
Multiple variations of identical components exist – components frequently detached from masters
Goals
Reorganizing Cosmos with consideration for consistency, productivity and transparency
Consistent language
Establish a design system with consistent use of colors, iconography, and typography system
Effective communication
Expedite work flow of the design team and the front-end team through on-time communication
Team-scale goal setting
Periodic syncs to align roadmaps and to continue discussion for both developers and designers
Ideation
Rebuilding the design system from the bottom-up
After a careful audit of the painpoints and user interviews, we referred to the Atomic Design Principles by Brad Frost, the Design System Checklist, and some of the more established design system such as IBM's Carbon and Uber's Base to reconfigure our design system.

During the process, we discovered that the painpoints primarily rooted from the incoherent design guideline of the 'stars' element – the fundamental building blocks of the interface.

As a result, we aimed to re-establish the design system by taking the system apart and scrutinizing it from the bottom-up, starting with some of the more frequently used components throughout the interface.
Final Solution
Design system grounded on a strong foundation with clear, intentional visual language
As a result, the most up-to-date version of Cosmos was established with a focus on organization and intentionality of the visual language. First, we redefined and recategorized the components according to the following categories:
Stars 🌟
Stars are the fundamental building blocks of the design system such as color, typography, and grid.
Constellations ✨
Constellations are collections of stars that form relatively simple UI components such as the navigation bar.
Galaxies 🌌
Galaxies are collections of stars and constellations that form relatively complex UI components system.
Cosmos 💥
Cosmos are collection of galaxies that refers to a completed component of the interface. Cosmos comes together to create the interface of a single CubeRover interface.
Redefining the colors, typography, and iconography
Colors
The Cosmos color system was re-established to provide wider range of the primary 'Cosmos Purple' for wider application for various states – default, hover, disabled, pressed, etc. Wider range of gray was implemented to establish an enhanced color elevation.
Typography
Barlow family is the designated typeface for the Cosmos Design System. The design systems team established a succinct typography system that uses three weights for heading, body, and captions.
Spacing
Similar to Cosmos typography, the spacing of the elements increases by multiples of four.
Iconography
The iconography suite has been expanded and reorganized from a nearly non-existent state. The iconography suite is based on 24px grid and is scaled down to 20, 16px, and 12px accordingly.
Responsive design
The design system was redesigned with consideration for scalability and responsive design for multiple breakpoints in order to leverage for the design team's painpoint that resulted from a lack of an overarching vision for a complete set of interface.
Facilitating on-time communication with the team
As a way to facilitate communication and encourage transparency within the entire design team, we started a #ask-cosmos channel where designers can ask for feedbacks regarding a usage of a specific components or request creation of new components.
Takeaways
Intersection of visual design, user needs, and scalability
Learning to design and maintain a design system was definitely a new endeavor. Aside from the pixel-level attention to detail, I was constantly challenged to think in terms of the intersection of visual design, user needs, technical constraints, and scalability of the design system. I was constantly reminded of the perhaps overly reiterated design principle – form follows function – as each elements of a component should bring the users one step closer to understanding its function.