Rotor Charts
Design System

Design System • RTX • 2019

Introduction

In this project, I led the development of a design system that enables designers across the worlds 3rd largest aerospace design company to quickly design and implement consistent data visualizations.

We released the Designer Toolkit in an 1.0 release in July 2019 to Collins Aerospace, Pratt & Whitney, Otis Elevators and Carrier. Today, Rotor Charts is being utilized across UTC applications like flight tracking, elevator maintenance portals, and air to ground communication software. It's also being used by developers at our internal data analytics team in Atlanta — Predikto.

The Challenge:
How might we empower designers and developers across UTC to design and deploy consistent data visualizations across complex aerospace needs and 3 unique industries?

My Role And Responsibilities
Project Lead and Designer, with Taylor K. and Daniil A,
Project Management, Product Definition, Design Research, UX/UI, User Testing

Year
2019

Timeline
3 Months

Methodology
Hybrid: Design thinking + agile

00 Context
RDS, and the importance of data

The operation and success of aerospace, IoT, and spaceflight rely heavily on the analysis, usage, and the communication of data. At UTC — the world's third-largest aerospace company — success relies on data at a uniquely high level. At the time, charting and visualizing data at UTC—from Carrier HVAC temperature data to Boeing 737 engine health monitoring—was disparate and inconsistent with modern-day design patterns.
‍

Rotor Design System (RDS) is UTC’s Internal design language. Born at the Digital Accelerator, its goals and structure draw parallels from systems like Google’s Material Design, IBM’s Carbon Design System, and Apple’s Human Interface Guidelines. The first of its kind, RDS defines design best practices for complex aerospace and manufacturing applications. Rotor Charts is a sub-design system that currently lives within the broader Roter DS.

01 What's the story?
Setting the narrative and architecture

Our first priorities were: Alignment with the design and product leads within the Rotor Charts Team and research on similar design systems (IA, dev/design assets, etc.) and their driving factors behind their success. We initially aligned the contents around our toolkit and the structure it followed around the question "What story are you—the designer—trying to tell?" We used this as an anchoring framework to begin our exploration and documentation.

A parallel first step was understanding Rotor Chart’s place within the broader Rotor Design System. Since Rotor Charts would ultimately live within Rotor Design System, we aligned early with the RDS design leads on initial information architecture, nomenclature, visual style, and sketch design standards. This was a continuous relationship, and as my team’s understanding of Rotor Charts grew, so did the fidelity of our integration with Rotor Design System.

ABOVE Integration with Rotor Design System

02 User Research and modularity
Flexibility and adaptability first

With scope focused on a deployable Designer Toolkit, we turned to our in house designers to align nomenclature, build logic, and prioritized needs. Through many rounds of user research and testing, we landed on a prioritized list of chart types, understandable nomenclature, build logic for the components in our toolkit, and a ranked list of designer needs when building charts in the aerospace industry. Flexibility and needing the "full kitchen pantry" were the highest needs of UTC designers, due to the enormous amount of variability in projects, products, and use cases.

ABOVE Designers need a high level of flexibility and "all the lego bricks"

We iterated vastly on breaking apart the "pieces" of a chart, and worked through round of user testing to better align our "lego box" to the mindsets of our designers. Key pieces include titles, titles with controls, subtitles, keys, x and y axis labels. We also included various kinds of chart types to plug and play that could sit on any background or grid.

03 The Delivered Toolkit
Plug and play

Flexibility and needing the "full kitchen pantry" in Sketch was the priority for UTC designers. Due to the enormous amount of variability in projects, products, and use cases, Rotor Charts utilized the flexible nature of Sketch's symbols to inform a modular, component based design system at multiple dimensions. With every chart 'piece' designed into modules and scalable sketch components, designers could plug and play, and within minutes, could build a fully stretchable chart for use across digital applications.

03 Documentation and deliverable
Instructions Not included

We included a robust instructional PDF outlining all the various abilities of the Rotor Charts Toolkit. I owned the general guidelines, and outlined just how a designer would use our toolkit. In this manual, we included color guidelines around accessibility. The accompanying color pallette and accessibility guidelines were led and executed by fellow designer Daniil Ashtaev

We painstakingly built scalability and flexibility into each symbol layer and component. We deployed over 50 individual sketch chart modules across 40 sketch pages. These assets could scale, stretch, and switch between dark and light mode. We also included pre-built charts for use during quick mockups and concept explorations.

ABOVE A glimpse of the accompanying guidelines for rotor charts

ABOVE Dark mode sketch sticker sheet

04 In The Wild
Digital Accelerator Entry

Currently deployed in UTC's Digital Accelerator, one public example of Rotor Charts is found in a flight monitoring dashboard for large format applications. Using non-technical data, we display a collection of flights from historical databases in the lobby of 55 Water St. Brooklyn, NY.

Rotor ChartsDesign System

00 ContextRDS, and the importance of data

01 What's the story?Setting the narrative and architecture

ABOVE: Storyline: building a chart