Sharon Dayoung Lee – Cosmos Design System

Cosmos is a design system for ground teleoperation software for Iris Lunar Rover, a rover created by Astrobotics and CMU Robotics Institute.

My role

Audit of the initial design system, standardizing components across products, and user testing

Team

Haley Park, Jay Huh

Duration

5 Months

Context

Iris Rover aims to democratize the space industry by becoming the first private lander to successfully land on the Moon. The design system plays a critical role in this mission because it will pave 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.

Problem space

As our product gained complexity the team suffered from inefficiency in development work and discrepancies in the visual language.

As the lunar mission will be carried out in a 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.

From top-left clockwise: Image Viewer, Map, Telemetry Visualization, and Error Analysis

Approach

We started the redesign process by conducting an audit of the initial Cosmos 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.

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. Our team agreed on restructuring the design system based on Brad Frost's atomic design principle, which encourages a bottom-up approach to build a design system.

Explorations

Driving a systematic change in the design system through a bottom-up approach.

We started the process by taking a stab at the 'Point of Interest (POI) Card', which is the smallest and the most universal component used across all three the product. We gathered all the different versions of the POI card from the spec file and analyzed each of their similarities and differences. Based on this, we aimed to standardize the different versions into a single component that accounts for all the functionality present across the three versions.

Iterations

The small scale changes lead to noticeable changes to the whole interface.

Below is an example of how the element-level changes standardized the interface all together. Through the process, the design system team created new components (such as dropdown component) and reestablished elevation grayscale, color system for buttons, and paddings.

Image Viewer, tag management

Before

After

Map

Before

After

Telemetry Visualization

Before

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.

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 team is currently working on refining the documentation of the process and is aiming to make our work public at the end of the year.