IBM Visual Design Challenge

IBM VISUAL DESIGN CHALLENGE

Visual design, UX, User research

IBM | Fall 2017

Challenge

Design a digital solution to provide predictive maintenance insights for an airline mechanic. It should allow the mechanic to access multiple data sources in real time to predict asset failure or quality issues to avoid costly down-time and reduce maintenance costs.

Outcome

A style guide for a digital tool that delivers work orders and help manuals, all accessible on mobile, tablet, and eyewear platforms for mechanics whose hands are often occupied. My full process documentation can be found here.

Colors and Image Treatment

Glass

Tablet

Colors and Image Treatment

1/4

FINAL STYLE GUIDE

Tablet

Mobile

Day View

Manual

TOC

Night View

Eyewear

final_work orders HOME copy 3

final_open

final_map

final_sensor logs

final_suggestion

final_voice

FINAL COMPONENTS

PROCESS: SOLUTION FEATURES

Understanding the Problem

To begin, I drew something of a service blueprint to understand the front and back end interactions that occur to get a plane from manufacturing to takeoff. This diagram is not comprehensive, but it helped me get a rough understanding of where AI might fit into the system.

Contextual Research

I conducted some online research on the conditions that aircraft mechanics work with. Their work environments include hangars, airfields, and repair stations.

loud environment due to engines and equipment
hands full/busy
mechanics might be spread out over the aircraft — each should be able to update others on his task status
repair procedures questions can come up during maintenance — be able to look things up in the middle of another procedure

Existing Technologies

From this research, I was able to set some constraints on the form of the digital repair tool. I considered voice, gesture, and touch as ways of commanding the tool. I felt that touch and gesture were tricky because the mechanic’s hands would be occupied. I also considered the mechanic wearing the manual on his wrist, since his hands would be in front of him while working, but the display might be too small.

In the end, I liked the idea of smart glasses, which could superimpose how-to instructions on what’s in front of the mechanic. A highly visual display, it also allows for hands-free voice command, which can pick his voice apart even from the loud background noise, and doesn’t require (or allow for) complex touch gestures.

I consulted Google’s documentation to understand the types of inputs that currently exist for Google Glass, which would inform elements of the user interface I would design. I found inputs to include gestures on the touchpad, head gestures and voice command.

Storyboard

Weather monitoring alerts crew of a storm approaching Boston. The crew checks the schedule for flights passing through the storm.
Manager issues work orders to his team. Some are deployed to ensure soon-to-depart flights are safe to fly, some to prepare to meet landing flights based on their real time data.
Experience 1: Tim the Mechanic checks his work orders—he starts with priority #1, flight DL12345 located in Bay #11, scheduled to fly in 12 hours.
Experience 2: He checks the IoT sensor logs, which give him a list of items to inspect. He looks at the centrifugal compressor first, the most pressing matter determined by the AI, and finds what is causing the leak. He identifies the part that needs to be replaced, sees it’s in the warehouse and puts in a request to bring it over.
Experience 3: The parts are brought to Tim. He consults the digital repair manual as he repairs the leak, finishing quickly using step by step videos and on-demand information. He enters some notes, and updates the central system about his completion status. In turn, his manager and the team are updated on the status of the centrifugal compressor.
Flight DL12345 is ready to take off on time.

Wireframes

I identified various interfaces that would support this narrative:

Glass UI
Tablets/mobile for viewing more text-heavy information, or videos on a larger display

Knowing what devices informed what kinds of screens I would design for, and what visual components I would need to consider. For example, how do I show navigation? How do I indicate what’s clickable? For different devices, how would I use layout and typography to convey information consistently?

wireframes1

wireframes2

Journey Map

The new journey map (blue) addresses several pain points from the old (brown):

1. Mountains of paper manuals, difficult for a mechanic to identify and diagnose a problem.

Digitalized manuals
Hands-free
Mechanic can follow the steps for a procedure easily on a screen
Can also find how-to’s for specific and relevant information with voice command Web search. Useful for unexpected problems that come up

2. No centralized digital diagnostic tool. Mechanics must rely on experience and intuition rather than data.

IoT sensors record flight data and mechanical history, logs are kept in a central system
Sensor logs and previous notes give mechanics tips on where to look first
No out of date manuals, and maintenance procedures are optimal and standardized

3. No current use of AI to optimize supply chain.

Use of AI optimizes supply chain by ensuring needed parts are in stock
Predictive measures based on which parts are likely to need repair based on weather, flight conditions, etc.
Fewer delays on repairs, fewer aircrafts pulled from circulation

PROCESS: VISUAL DESIGN

Mood Board

I chose a visual style that was a mix of the engineer drawings (4th column bottom), holographic wire model (4th column top) and simple line vector art (middle bottom).

I wanted the visual style should have a serious and professional feel, because the mechanic’s work holds real weight in ensuring the safety of passengers and crew. At the same time, I wanted to simplify it from full on engineer drawings to make it look more approachable to a mechanic who doesn’t necessarily need all the measurements.

Grid

Building off of Google Glass’ scrollable “cards” interface, I hypothesized that a mechanic could use a similar interface to keep track of work orders, digital manuals, etc. I used their style guides to understand more about the scale and legibility of text, image and icon usage.

I the most unfamiliar with Glass interfaces, so I tried several different layouts to see which column widths felt most comfortable to me. I liked the balance of content space and margins the best in the last one. I also created grids for responsiveness.

glass_Grid 2

glass_Grid 3

glass_Grid 1

Colors

I played with colors keeping in mind that augmented displays like Google Glass would show up against objects in the real world. Also considering that I often saw mechanics working with flashlights in dark environments, I considered both dark and light backgrounds.