Vortex: Planning Military Exercises
UI/UX Design
Design Auditing
June 2023--present
PROJECT OVERVIEW
I created visualizations and UI elements for a tool to help military personnel prepare for and assess military exercises. Vortex is a military planning tool designed to augment military planning processes and the creation of Courses of Action plans. Current tools used to conduct this process are manual, labor-intensive, and fail to organize and prioritize the myriad data points of planning.
MY GOALS
-
Help design visualizations to represent uncertainty of hostile location and movement on an interactive map
-
Create a tab on the UI layer’s panel for toggling between asset capabilities and uncertainty visualization types
-
Design branch labels and paths representing movements of assets at various levels of granularity
-
Assist with design auditing and design system
​

PROCESS
Designing visualizations for uncertainty
​
I helped create visualizations to depict uncertainty of an asset’s future location. These visualizations include the most likely and the most dangerous outcomes of an enemy asset's movement. This required design thinking and an understanding of the complex system as a whole.
Impact:
-
Provide dynamic and static visualizations to represent locational uncertainty to the user
-
Uncertainty visualizations produce system-generated paths and locations of hostile assets to assist in military planning
​

Creating Uncertainty Tab
The layers panel of the interface allows users to interact with the map and display different visualization tools and capabilities. I designed the Uncertainty tab of this panel.
Impact:
-
Allow users to quickly toggle between different uncertainty visualizations to view static or dynamic projections
-
Enable users to toggle multiple settings from different tabs at once so they can customize their map visualizations to fit their current needs


Designing UI branch paths and labels
Branch paths show an asset’s trajectory on the map. The labels indicate path variations, allowing users to evaluate an array of potential movements to predict outcomes. I designed the UI and interactions of these branch paths and labels at various zooms/levels of granularity.
Impact:
-
Different levels of granularity based on map scale improve the visibility of branch labels and reduce clutter
-
UI indicates the state of each branch, making it easy to select and distinguish between active vs inactive branch paths and courses of action
-
Hovering states give users the option to quickly view branch labels of an inactive path

Design Auditing
​
To prepare for the next phase of this project, I assisted with design auditing to ensure our implementation and live build matches the current design system of Vortex.
Impact:
-
Identified usability issues to produce an implementation-ready product for realistic user testing
-
Adjusted any discrepancies between the design system and the live interface (ie ensuring colors, shapes, and fonts are all consistent)
​
NEXT STEPS:​
​
Vortex will soon be tested with representative users and tailored for deployment in a real-world environment.
​
Main programs Used: Figma