Cadet Design System

Role
UI/UX Design, Strategy

Company
krumware

Client
Avtec (acquired by Motorola)

Timeframe
2018-2019

Avtec had a legacy, on-premise Computer Aided Dispatch (CAD) system that needed web re-platforming to reduce cost and increase availability. I worked with krumware to lead design of Cadet Design System in building this new product. This system needed to include a robust library of components with enough modularity so that one component could apply to a vast use case.

Problem

Building the Avtec Cadet Framework on a web-instance (from an on-prem system) afforded much greater technical ability to build and update. Leveraging Web Components and Polymer, our engineering team needed a basic framework and structure with how to build numerous R&D POC's in the Cadet Ecosystem.

Challenges

  • Building components that allowed enough flexibility and overrides for logical use-cases but without ability to break guidelines. This required a strong review process to components from a staging file before being accepted.

  • Considering components for an modular, window-based, drag and drop dashboard brought numerous challenges and required careful consideration and responsive components.

  • Our design components were built for engineer use which became problematic to identify if there were issues with component or the application of component. We began unit testing the live components on a server and were able to see if and when any changes pushed broke the component before digging into QA.

Explorations

  • Sandbox environments and heavy testing of all components

  • "One component to rule them all"

  • We began unit testing the live components on a server and were able to see if and when any changes pushed broke the component before digging into QA

Outcome

  • Design was able to utilize atomic components with minimal decoupling of existing library components to promote consistency in a highly iterative R&D context

  • Testing new components with other designers allowed for buy-in and awareness of new capabilities with system. This check-balance work allowed collaboration and input from other designers building POC applications to help drive future system enhancement.

  • Web Components deployed to landing page based on design library components. Continuous Unit testing was performed on component page and quickly alerted or identifiable if there was a reported issue or bug. Allowed for faster triaging of issues and leveraging the design system between the design and development team (and not just assets in a design library)

  • When Avtec was acquired by Motorola in 2019, the Cadet Dash Framework and Design System were swiftly built upon and adapted by the new Motorola team.

More Case Studies