Hybrid 3D Dashboard
Project overview
Customer: [Unnamed]
Industry: Defense Contractor
Project length: 4 months
Problem: Managing multiple combat training systems for the DoD, the customer was having difficulty keeping clients engaged and updated on their programs due to the size and budgets that changed daily (sometimes hourly). The data to be reviewed is buried within 100s of pages of spreadsheets, multiple widgets, and other budgeting software. The solution needed to run in IE11 and utilize HTML5 with no plugin install since it was to run on secure networks only.
Vision: Generate a hybrid dashboard and merge it with 3D to immerse the client in a virtual space with easy to understand high-level information. Each model identifies structural components and expands to display lower level subsystem and assembly level components. Every model has integration points to display live data feeds associated with summarized failure data, obsolete components and customers inventory of spares.
Gauges and 3D Widget Mockups
Mood Board
Intermediate Design Notes
The design process for these trainers were a massive undertaking. In order to minimize the length and complexity of this page, I am focusing on the high-level overview of the experience.
Early sketches from client kick-off meeting.
This is the 3rd prototype we delivered for review.
Design notes
After many iterations with the client to reduce overlays and streamline information we presented a compact menu system that pulled from the top. The Toolbox was further expanded to include the component name and a VIEW MORE widget toggle. This kept all relevant information regarding the component contained and quickly accessible.
What we learned
After testing this design, the pull-down menu was barely noticed. We also received updated guidance that the trainer must run without a software install and be compatible with IE11. This was a problem since IE11 doesn't support WEBGL. We had to re-architect the render engine and switch from Real-time 3D to pre-rendered turntables. We maintained our visual targets with little change.
Final Design Notes
Red was requested for all primary color interactions which held to their established branding and style guides. 3D navigation icons were removed along with the real-time 3D models (IE11 WebGL constraints). The component is rotated by dragging the mouse left or right. This will render a series of 36 images to simulate a 3D object. We removed the ability to minimize the Parts Bin to keep everything visible and quickly accessible. The customer was very excited about the prototype and wants to take it into production across the combat systems.
The modal overlays with dials are placeholders and were developed by another vendor.
Vector iconography of 3D components (Illustrator)