Redesigning Iconography for NASA Playbook

Building a clearer visual language for a mission scheduling tool

Overview

Role: Design intern
Team: NASA Ames Research Center, SPIFe
Timeline: Jan–Mar 2022
Focus: Visual systems, iconography, perception, interface clarity, design guidelines

Project goal: Create a clearer and more consistent icon design language for NASA Playbook.

Outcome: Redesigned Playbook’s icon library and contributed icon design rules that later became part of the team’s design system.

Context

This project was completed alongside my redesign of Playbook’s constraint experience. While the constraints project focused on explaining scheduling rules and violations, this project focused on the broader visual language of the product.

Playbook’s interface contains many tools, controls, and scheduling concepts. Icons need to remain recognizable even when small, repeated, or surrounded by dense timeline information.

The design challenge was: How might we create an icon system that improves clarity and recognition without adding visual noise to an already dense scheduling tool?

Playbook UI

Original icon library

Problem

The original icon set had several issues:

  • icons varied in style and visual weight

  • some icons became hard to read at small sizes

  • similar-looking icons could be mistaken for one another

  • certain icons relied on metaphors that were not immediately clear

This mattered because Playbook’s users are not browsing a decorative interface. They are working inside a complex planning tool where icons need to support quick, confident action.

A successful icon system needed to help users understand the product faster and use it more fluently.

Design principles

I defined four principles for the new icon language.

▣ Legibility

Icons needed to remain clear at small sizes in a dense UI.

▣ Understandability

Icons needed to communicate their intended action or concept without requiring unnecessary interpretation.

▣ Distinguishability

Icons needed to be visually distinct from one another, especially when representing similar actions.

▣ Approachability

The system needed to feel modern and friendly without becoming playful at the expense of precision.

The original framing included “youthfulness,” but the more important product goal was approachability: reducing the learning curve for new users while preserving speed and clarity for experienced users.

From principles to visual rules

To make the new language scalable, I explored design rules that could apply across existing and future icons.

Key directions included:

  • filled shapes and bold strokes for stronger visibility

  • simplified forms to reduce visual clutter

  • consistent geometry to make the library feel unified

  • ample internal whitespace so small icon elements remained readable

  • rounded corners to create a clearer, more approachable tone

The goal was not to make every icon look identical. The goal was to give the system enough consistency that new icons could be designed without feeling detached from the rest of the product.

Design variations for “book” icon

Exploring visual weight, shape language, and readability.

Design variations for “compress left” icon

Testing how action-based icons could stay clear at small sizes.

Redesigning ambiguous icons

A major part of the project was identifying icons that could be misunderstood or confused with similar-looking icons.

Ambiguity is especially risky in an expert tool because users rely on repeated visual patterns to move quickly. If two icons look too similar, or if an icon’s metaphor is unclear, users have to slow down and interpret the interface instead of acting.

For these icons, I focused on clarifying the action or concept behind the symbol.

The redesign process involved asking:

  • What does this icon need to communicate?

  • Is the metaphor recognizable?

  • Could it be mistaken for another icon?

  • Does it remain readable at actual UI size?

  • Does it fit the broader icon system?

Differentiating “copy” vs “clone”

Differentiating “slice and dice” vs “cut”

Differentiating “zoom” vs “search”

Differentiating “distribute” vs “switch”

Final library and design language

The final deliverable was a redesigned icon library and a set of icon design guidelines for future additions to the system.

The redesigned icons used a more consistent visual language while preserving the clarity needed for a dense scheduling interface.

Below are some examples of redesigned icons.

Final icon library

Outcome

After my internship, I learned from my former manager that some of my redesigned icons remained in use in Playbook. The icon design rules I contributed to also became part of the team’s design system.

This was meaningful because the work extended beyond a temporary visual refresh. The icon language became part of Playbook’s longer-term product system, helping future icons stay consistent with the interface.

Together with the constraint language work, this project became part of my broader contribution to Playbook: making a complex mission scheduling tool easier to understand, scan, and use.

Reflection

This project taught me that iconography in a complex product is not just visual polish.

In Playbook, icons had to support learnability, recognition, and speed. A successful icon needed to be visually clear, semantically accurate, and distinct from nearby actions in the system.

If I continued this work today, I would strengthen validation through recognition testing: showing users icons at real UI sizes and measuring whether they could identify each action quickly and accurately. I would also document edge cases more rigorously, especially for icons representing abstract scheduling concepts rather than familiar physical objects.

The core lesson was that visual systems work best when style and usability reinforce each other. A good icon system does not just make a product look more consistent. It helps users move through the product with less hesitation.

Bonus Content: Concept Art for NASA