NAPA Engineer Design System

I created a Design System, which is situated in the same solution as the application itself. We use Telerik UI for WPF to create the User Interface. UI controls are then themed to match NAPA branding.

The Design System consists of following items:

  • Icons – I have created them all using vector graphics and converted them to be in XAML
  • Colors – these are based on NAPA brand colors, that were created within the Experience Design team of Napa
  • Controls – the idea of showing them here is that if there is a change in the application, we would see that here. Also having the controls in one view makes it easier to check if there is something wrong with the color theme
  • Typography – These show the different styles that have been specified in the system

Below is a video of the current status of the Design System as of today – 15th Oct 2021.

Copy Content UI

NAPA applications are based on databases. Ship design projects are lengthy, and often users end up re-using the same components or parts of their earlier solutions. For this reason, there is a feature where the user can copy content from a project to another.

Summary of requirements

  • Easy to use interface to copy content (geometry, etc.) from a project to another
  • Possibility to copy from a version of the project to another
  • Handle exceptions of overwriting

I created several prototypes with multiple options, which we then tested internally with people close to our users. Participants for user tests were from Korea, Japan, China, Europe.

Below is a video of one of the prototype walkthroughs.