Workflow management system – PINEAPPLE POP Creative

Collins Aerospace | Workflow Management System

Collins Aerospace is a leader in technologically advanced and intelligent solutions for the global aerospace and defense industry.

Within the Mission Systems business unit, the publications and training group utilize a custom workflow manager called PWMIS. PWMIS is critical to the business because it tracks the end-to-end workflow of products through their lifecycle and its records serve as master records of audit in the highly regulated aerospace field.

In addition to managing workflow and providing robust tracking and reporting capabilities, the application ensures all products maintain compliance with federal requirements.

I am leading the redesign of PWMIS with an emphasis on increasing productivity by making the application more streamlined and user friendly. For this project, I am acting as the product owner, sole UX/UI designer and researcher, providing art direction, and supervising the front-end development.

Impact

The impact of replacing the current work flow management system with the new application will save the Mission Systems an estimated $135K annually:

$10K/year training time
$100K/year productivity gains and happier users
$25K/year in maintenance costs

Additionally, while demonstrating the prototype while trying to obtain funding, other business units within the company have expressed interest in purchasing licenses to use it after it’s ready for production – generating additional revenue.

People problem & business goals

PWMIS, a 40-year-old application, is used throughout the company. Users (who spend up to 15% of their time using it) report it hinders their work rather than aids it. The learning curve is steep, especially for a global workforce with English as a second language. The outdated interface buries common tasks in sub-navigation, has multiple disconnected search fields, and its numerous broken links frustrate users.

Additionally, the software’s reliance on legacy technology makes maintenance and upgrades challenging.

The goal of the redesign is to reduce cost by making the application:

Easier to use
Easier to update and maintain

Research & Analysis

Led 1 day virtual session with daily users and developers

What works well
What doesn’t work
What if we could / you know what would be amazing…?

User wants (content creators, managers, directors)

Users want a personalized solution that keeps track of their projects and proactively notifies them when they have a task waiting
Users want intuitive layouts that place the most common actions and information in front of them
Users want interconnections – so they can access information multiple ways across multiple screens
Users want clutter reduced

Development team wants

Developers want well thought out application architecture
Developers want an application developed in a modern framework
Developers want an application that can be deployed to the web to ensure all users are have the same version of the application
Developers want an application that is ‘intuitive’, reducing the learning curve and number of support requests attributed to ‘user error’

First things first…

Before we could start the visual design of the application, we had to determine information that the new application needed to collect and display. To do this, I led several virtual sessions with management and stakeholders where we determined what information was required. Through these sessions we were able to eliminate dozens of datapoints and identify several others that needed to be added.

This simplification process led to a final design that reduces the number of screens required from dozens to five.

Initial sketches

Before I started designing, I wanted to get a few ideas down on paper in order to quickly find the right direction… before committing to the time required to produce higher fidelity designs.

Based on the the working sessions, I concentrated on putting the most important information front-and-center. I also paid specific attention to displaying the right amount of information to minimize cognitive load.

High fidelity design and build out

After exploring different layouts and agreeing on a path forward, I provided art direction, designed the high-fidelity prototypes in Figma, and oversaw the development after hand-off to our team in India.

Before and After

Landing page

The landing page has been updated to reflect a personalized dashboard. Each user is greeted with the most important information, based on their role. Four cards across the top display important information at a glance. A list of current projects displays all items in work for the user with a color-coded progress bar that lets them know if the effort is on track, at risk, or behind schedule. A calendar alerts them of important upcoming dates, and push notifications alert users to important departmental or enterprise announcements. Additionally, the multiple search fields have been replaced by a single, predictive, search field.

Before

After

Product pages

The product pages have been reorganized to put the most important data in front of the users. Less important information has been moved to the sidebar or eliminated all together. The new screen also links to other screens so that users can navigate to information in a way that makes the most sense to them. (In the original application, a user had to exit out of each screen to get back to other screens). The new product page not only links to previous releases of the product, but it also has a link to our ticketing system (in Jira). Each ticket that is logged against the product can be viewed from this screen by selecting the tab. The tab provides a summary of the ticket – the issue, the date the ticket was submitted, and if applicable, completed. It also allows a user to see in real time whether a ticket has been started, is in work, or has been completed.

Before

After

Work request pages

This screen is visible when work has been schedule or is being performed against a product. The page has been reorganized to display the most important information in cards. Less important information has been moved to the menu or has been eliminated. The task list has been color-coded so users can see, at a glance, which task is currently in work, which task(s) have been completed, and which task(s) are remaining. A link to our ticketing system (Jira) allows users to see (and submit) tickets for issues. The ticketing tab displays the tickets logged against the current revision of the product and is also color-coded so users can see at-a-glance if a ticket has been started, is in work, or completed. Finally, the Gantt chart tab displays a Gantt chart view of the tasks.

Before

After

Interactive reports

This feature is not in the current version of the application. However, management requested interactive charts, which were implemented using chart.js. This is management’s favorite screen because it allows them to quickly and easily access information that is important to them. The chart.js implementation allows them to manipulate the charts in real time, display the information that creates the charts in a tabular fashion, and allows them to print the charts for use in reports, slides, and decks that they present to their management.

Before

After

Check out the
Online review >