Carnegie Mellon University, Sep 2019 – present.
Cosmos Infra Team of TeleOperation Interface Design Team
UX Design, Interaction Design, Design System
Expected to be The First Private Lunar Landing
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.
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.
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)
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.
With some of initial questions, we could have meetings with engineers, the potential operators.
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?
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?
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?
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?
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.
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.
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.
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.
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.
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.
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.
My Scope 02 – Design System
Create a design system for a cohesive interface
Support the individual features and scale them to the whole
Provide a system for type, iconography, and colors to all sub-teams
Accommodate changing needs of teams and expedite work of design and develop teams
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.