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. 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.

Exploration

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

We started the process by taking a stab at '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.

Standardizing the Point of Interest Card

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

Below are the examples 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 interface

Before (without design system)

After

Map interface

Before (without design system)

After

Telemetry visualization interface

Before (without design system)

After

User Testing

The interface was tested through a series of virtual mission scenarios.

The interfaces finalized using the design system was tested with the rover operators to ensure usability. The user testings were conducted via Zoom using Figma click-through prototypes (during COVID) with guided mission scenarios that test intended functionality of specific components.

User testing before COVID!

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.