Vertue RTU Configurator

Varec, a subsidiary of Leidos, a leader in the defense contracting sector and a provider of hardware and software solutions for the fuel industry, faced a critical challenge. Despite being a key player, the company had yet to introduce a new product in over a decade, putting it at risk of losing market relevance to emerging competitors.

Their flagship product, FuelsManager, needed to gain ground to remain competitive among more modern applications. Users and the company itself acknowledged that the application was challenging to use, demanded extensive training, and required specialized (read: costly) support. The situation had reached a point where Varec was on the brink of being overshadowed by more innovative challengers.

We decided on using a small effort for the RTU (remote terminal unit) to create a configurator application as a starting point, and we would address questions such as how Varec might address the problems with its apps, and build a new framework for its software offerings. What can we use as a test project to begin a transformation to reflect a more modern, easier-to-onboard, use, and support? And most important of all, how can this all be done in time to get initial impressions and user feedback at the upcoming trade event in 4 months?

Upon revisiting the original concept, we enhanced it by introducing a task/card-based structure that facilitates adaptability and growth. We achieved this by seamlessly adding new subject cards as needed. A pivotal addition was introducing a new chassis editor element, which introduced multi-factor, symbol-based object manipulation.

This unique element allowed direct interaction with items and attributes typically distant or abstract to end-users, often presented in a less visually appealing dataset table view.

In terms of branding, we adhered to the brand palette and incorporated it into the UI. This approach not only served as a nod to an upcoming style guide/design system that we were concurrently developing for the company but also ensured consistency in color treatments.

Further enhancements included: Action-oriented calls-to-action (CTAs), Color treatments aligned with accessibility standards, Adopting a component-based design philosophy utilizing Angular 7, Introducing Atomic Design principles provided a shared, modular component-based app ecosystem that all software would now utilize.