Sharon Dayoung Lee – Cosmos Design System

Responsibilities

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

Team

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.

Image Viewer Tag Management interface

Before (without design system)

After

Map interface

Before (without design system)

After

Telemetry visualization interface

Before (without design system)

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.