Modernizing Network Visualization
For Military Intelligence
Client
TRADOC G2 (Army)
Roles
Research, UI/UX Design, Prototyping
TIMEFRAME
2 years
Platform
Web // Desktop Browser
OEVis:
Operational Environment Visualization
OEVis is a network analysis tool that helps Army analysts and planners make sense of complex operational environments.
Replicate essential features of an outdated tool.
Align functionality with modern military doctrine.
Maintain continuity for analysts.
Since OEVis was primarily used in training environments, the key stakeholders were instructors that teach military students how to use network analysis tools.
Through interviews with them, I gained insight into the end users, their needs, and the types of analytic tasks they performed.
ORA and Gephi both had UX pain points that I wanted to remedy for OEVis:
1.
Hidden Panels: Panels disappeared when closed, requiring extra steps to reopen.
2.
Scattered Operations: Analytics were split across multiple menus, forcing users to search for functions.
3.
Overloaded Toolbars: Dense toolbars created clutter and slowed task completion.
Gephi User Interface
From my research, I identified the core features the tool needed to best support the existing workflows of the users and satisfy the MVP requirements of the project.
I created a map to connect the core features together and form the basic information architecture for the UI components.
OEVis Information Architecture
I created a user journey diagram for importing data because it represented the most complex user interaction for two reasons:
Importing required the most user input and decision making up front.
The data provided directly shapes the quality and accuracy of the initial network.
Mapping this journey helped reveal potential pain points early and ensured the design supported users at a critical entry step.
Importing user journey diagram
I structured the OEVis project dashboard to feel familiar to analysts while addressing the shortcomings of competitor tools:
Collapsible Panels: Panels can be minimized but never lost, keeping them easily accessible.
Streamlined Navigation: Related analytics are grouped in a single panel, reducing menu searching.
Simplified Interface: Toolbars contain only graph interactions, keeping the interface light and clear. |
OEVis Project Dashboard wireframe
OEVis Panel wireframes
The development team utilized Graphin, a React toolkit from AntV built for relational data analysis.
I used Ant Design for standard UI components, while also creating custom components for specific features and interactions.
This approach provided a cohesive look and feel, while simplifying implementation for developers.
I used a left sidebar menu for navigation between the main sections of OEVis: Project Dashboard (Home), Project Cloud, and Settings, with a Logout button at the bottom.
The Project Dashboard is the primary workspace where users interact with their network projects.
The central window contains the Network View, which allows users to toggle between viewing the network as a Graph Visualization or a Data Table, with functional panels on either side for data operations and analysis tools.
Project Dashboard - Graph Visualization and Panels
The Graph Visualization displays the network as interconnected nodes and edges.
A Graph Toolbar provides direct interaction with the network, allowing users to add or remove nodes and edges, zoom, pan, and enter fullscreen mode.
If the network is shifted out of view, a recenter button can be used to return the network to the center of the window.
Video: Graph Toolbar interactions
Provides basic information about the project.
Project Info Panel
Shows node and edge counts, and network details, such as direction and weight.
Attributes Panel
A key to show the different node and edge types in the network.
Legend Panel
Provides configuration options for nodes and edges, split into two tabs that the user can switch between.
Display Panel
Video: Display Configuration
Controls the arrangement of nodes and edges.
Layout Panel
Video: Layout Configuration
Allows the user to run algorithms on the network based on variables and inputs.
Analytics Panel
Video: Analytics - Shortest Path algorithm
The Import Wizard is a multi-step modal that guides users through importing data files and automatically constructs a network from the provided information. (See User Journey for more details based on specific file types).
A progress indicator shows completion percentage at each step, giving users clear feedback as they move through the process.
Below is an example of importing a CSV about Montreal Street Gangs from 2007.
Video: Importing Montreal Street Gangs 2007 network data
The Data Table presents the network in a structured table format.
Users can toggle between tables of Nodes and Edges, where they can add or remove entries, search and filter data, and perform actions directly on table columns.
Data Table - Nodes View
Data Table - Edges View
Video: Data Table interactions
The Project Cloud lets users manage their saved projects.
They can open or delete projects, share them with others, and download projects that have been shared with them.
Project Cloud
Video: John Smith sharing a project with Mike Carson (fictional users)
OEVis was launched as a minimum viable product (MVP) in TRADOC’s Azure Cloud in Spring of 2024.
By keeping the interface familiar to network analysts, OEVis allowed users to transfer their expertise from legacy tools with minimal disruption.
This accelerated adoption, preserved existing workflows, and improved efficiency.
User surveys showed favorable feedback and improvement from legacy tools.
Unfortunately, my time on the TRADOC contract ended before I could continue designing the remaining features of OEVis.
The next step would have been designing the User Manager, an admin-only feature for managing user access and project roles.
The User Manager, accessed from the Settings menu, provides a table view of users, showing the projects they have access to, their roles, and the dates access was granted.
Admins can sort columns, search, and filter by name or project to efficiently manage user permissions and project access.
User Manager