Exit
LUKE MANIMALA
// design

Creating An Enterprise Aerospace App For Multiple Personas And Form Factors

context
I was the Lead Product Designer for Concourse, an aerospace enterprise resource planning (ERP) software. It was for AAR Corp, a US public aviation services company.
tools
Figma, ProductPlan, Azure DevOps, Storybook, Angular Ionic
timeline
8 months
No items found.

I created a multi-business application for PC, tablet, and mobile form factors.

I was the Lead Product Designer for Concourse, an aerospace enterprise resource planning (ERP) software. It was for AAR Corp, a US public aviation services company.

TLDR:

I designed most core app features and UI components.

As the Lead Product Designer, I focused on the following:

  • Building knowledge around the users
  • Learning the Ionic mobile app framework
  • Designing a Figma UI library
  • Specifying the Angular UI library
  • Contributing to the product roadmap and vision

The extended product teams included up to 50 developers and five designers with 3 thousand users scheduled to onboard in 2023.

Let’s dive in.

Building knowledge around the users

Concourse serves internal and external users a broad spectrum of features necessary for running a large enterprise aviation company.

Our users included parts distributors and traders that used the app to manage the cost and sales pricing for millions of aircraft parts. Technicians and inspectors in our hangars also used the app to help guide them through an aircraft teardown or rebuild. I spent hundreds of hours with the users on-site and in remote meetings to build knowledge in the product team around their jobs, business units, and preferences for the application.

The Concourse Dashboard on a Laptop and Tablet device mockup
Mockups of the Concourse dashboard on desktop and tablet breakpoints

Learning the Ionic mobile app framework

Because of the diverse user contexts, we built the Concourse using the Ionic Framework.

This cross-platform tech stack can deliver both web and native app experiences. We launched our first features into a desktop progressive web app (PWA) for use on the Surface Pro X, which enabled data caching strategies that allowed app functionality even if technicians lost wi-fi on the aircraft. In the coming quarters, we plan to launch a native version of the app on the enterprise app store for mobile device users in our warehouse.

Ionic Angular code and preview code terminal
Ionic Angular code and preview

Designing a UI Figma library

I designed and maintained about 100 UI components or variants with Amy Hudson from Snacks Design.

We specified 100s of CSS variables and structured our libraries in a way that allowed our UI components to consume light or dark application themes, similar to our Ionic components. Once established, the designers in each of our business product teams leveraged this platform-wide UI library to build macro UI patterns and components. I enforced that all of our designers would learn to design with our production UI library, reducing the effort and importance of “visual design,” which is the process of going from low to high-fidelity visual comps.

Pages of user interface elements including buttons, checkboxes, lists in light and dark modes
Several pages from our Figma component library, which leverage remote libraries to toggle between light and dark mode

Specifying the Angular UI library

I served as an unofficial product owner for the Angular UI library design and build effort.

I, along with app architect Richard Shepherd, wrote the development requirements for every component in our UI library and became intimate with the universe of properties available to our developers and designers. I prepared our Figma components for their development in the UI library. As a contributor to every product team in the Concourse app ecosystem, I was the best person to prioritize the UI in the sequence needed and understood when new business requirements would necessitate a new component being added to the library.

A Storybook UI webpage containing several components like buttons and chips

Contributing to the product roadmap and vision

Finally, as the lead designer on Concourse and all the business modules that it touched, I became a critical contributor to the product roadmap and vision.

As a contributor to this roadmap, I had to help build and present our Product Plan roadmap and internal marketing decks for internal business partners, including the corporate CFO and CEO. The roadmap included features and capabilities which I could prioritize better than anyone on the team due to my close working relationship with all the users in the app ecosystem. Some of these included an admin “Sign-in as” feature, machine vision document parsing, augmented reality aircraft data, and even automated aircraft inspection via drone.

A multi-colored product roadmap extending from Jan 2022 to July 2022
A view of the Concourse Roadmap for FY23

Drop me a line if you think I can help!

As a designer, I aim to deliver the most disruptive and humane digital products. If you’re on a similar mission as me, I’d love to get in touch. Drop me a line at lukemanimala@gmail.com, and I’ll get back to you as soon as possible.

Thanks for reading!

No items found.
No items found.
No items found.
No items found.
No items found.

More case studies