The project designing an interface for CubeRover, a 2kg lightweight lunar rover launching to the Moon in 2021 with $80 million NASA funding.

Context

Carnegie Mellon University, Sep 2019 – present.

Team

Cosmos Infra Team of TeleOperation Interface Design Team

Role

UX Design, Interaction Design, Design System

Tool

Figma, Illustrator

Project Background

Expected to be The First Private Lunar Landing

cuberover_overview_01.1

The last NASA lunar landing was in the 1970s, and they haven't been back to the Moon for almost 50 years. In December 2018, NASA announced its plan to return to the Moon with the help of 9 private companies. One of the companies, Astrobotic, is creating a lightweight lunar rover of 4.4 lb (2 kg) called CubeRover.

cuberover_overview_02.1

Images - Vision of CubeRover

The CubeRover has two cameras mounted on either end of the rover. Images from cameras are the most important piece of data for both the operation of the rover and its scientific objectives. 

Design Team

Team_map_small_02

TeleOperation Interface Design Team creates an interface to remotely control the rover from Earth. To do so, several key features are required to be designed - navigation, image analysis, telemetry visualization and more.

The Cosmos Infra Team is in charge of creating the integrated design systems of all features.

My Scope 01 – UX Flow

Create UX flow and elements for Point of Interest(POI)

_main_image_02.2

I worked mainly on designing the flow and the UIs for creating and editing POIs closely collaborating with the Image Viewer team.

The POI is an object that is worth to be remembered by operators or researchers. The interface must allow users to be able to save POIs and their features by highlighting a part of an image.

cuberover_ideation_03.1

Framing Challenges

With some of initial questions, we could have meetings with engineers, the potential operators.

  • What are the possible examples of POIs?
  • What is the key information that they have to be aware of about the POIs?
  • When they might want to create POI cards?

01.

Since a single image could have multiple POIs, it is required to specify or highlight which part is the POI in the image.

We found out that images could have multiple POIs at the same time. Thus, POI should be specified precisely in the images. What would be the best way for operators to highlight POIs in the images?

02.

Highlighting POIs from images will be a huge work since operators have to deal with hundreds of images on a single mission.

Since the rover will take photos every 5~20 seconds it will be a huge manual work for operators to select the POI in every image. How might we ease and simplify the flow of highlighting POIs from many images?

03.

Most POIs are categorized into three types – attraction, obstacle, and shadow. The rover always should be cautious of obstacles and shadows.

Obstacles and shadows are things that the rover should avoid because they could damage the rover or block network connection. In contrast, attractions are objects that need to be explored further. Given the two primary purposes for POIs, how might the interface visualize those purposes clearly?

04.

It is required to enable operators to prioritize the POIs since there are different levels of importance.

During the interview, engineers realized that there might be more crucial POIs compared to others. For example, with the constraint of time, they might have to choose one of the attractions for further exploration among others. How might the interface allow the operators to prioritize POIs?

Ideation

cuberover_ideation_01.1
cuberover_ideation_02.2

I found that there will be two UX flows of highlighting POIs on images – when creating a new POI from a certain image or adding multiple images after a POI card is created.

Initial Wireframe

cuberover_wireframe_01.2

Design & Key Features

Flow 1 – Creating POI cards

1. Drag & Select Types

Operators could simply drag a part of an image to create a new POI card. Through the small pop-up box, they could select the type first. The part they dragged becomes the thumbnail image.

Creating_POI_05_01.1

2. Pop-up Box Appears

Operators could fill in necessary information through the pop-up box. We suggested three levels of priorities using the bars. The default name for the POI is proposed but operators could name them if they want.

Creating_POI_06_01.1

3. Assign Tags

By typing the names of tags, operators could search tags for the POI. They could also create a new tag by clicking the + button on the tag search bar. 

Creating_POI_09_01.1

4. Edit Thumbnail Image

The thumbnail image is important despite its low resolution because it shows the actual form of the POI. Operators could edit the thumbnail.

Creating_POI_13_01.1

5. New POI card Added

The created POI card are shown on the right side of the interface. Through the colors (green or red) and the bar visuals, operators could easily perceive the types and priorities. Tags represent the key features of the POI.

Creating_POI_14_01.1

Flow 2 – Adding Images to POI cards

1. Select Images and Drag them into POI card

Operators could select images that contain a certain POI, to add them to the POI card.

Adding_Images_03_01.1

2. Highlight POIs on Images

The Pop-up box shows the thumbnail image of POI so that operators could easily find and highlight the POIs on images. 

Adding_Images_06_01.1

My Scope 02 – Design System

Create a design system for a cohesive interface

Scalability

Support the individual features and scale them to the whole

Consistency

Provide a system for type, iconography, and colors to all sub-teams

Documentation

Accommodate changing needs of teams and expedite work of design and develop teams

Stars

Starts are the fundamental UI elements in Cosmos.

Colors_01
Typography_01
Template v1_02

Solar Systems

Solar systems are collections of stars that form relatively simple UI components.

Controls_01

Galaxies

Galaxies are collections of stars and solar systems that form relatively complex UI components

PoI Cards & Components_01
Image Viewer – Default view 1_01
Image Viewer – Split view_01

Reflection

I feel really proud of our team and work because our team has made a real practical impact on the project. The software deadline was delayed to Dec because of the development issue. With our help, the developing team becomes possible to meet the original NASA deadline which is the end of July.

Furthermore, we keep working with engineers and other team designers and their questions help us keep update our libraries. The design system becomes more mature through collaboration. Through this project, I could feel the value of collaboration across teams.

This project is ongoing and will keep being updated.

Copyright 2020 Jay (Jaeyeon) Huh. All rights reserved. 

error: Content is protected !!