top of page

Civilian AI - Feature Enhancements

Civilian AI was an existing feature in the company’s core product, VBS3. One of our customers contracted us to expand its capabilities and improve the “pattern of life” to better support training scenarios. The customer’s primary goal was to create a more effective tool for counter-terrorism training in European city environments, while ensuring the system remained easy to use. Research revealed that the original implementation was fragmented, unintuitive, and difficult for users to operate, which made enhancing usability a top priority.

Overview

Civilian AI: Project Overview

My Role:

Senior UX Designer

Team:

Team Size: 10
PO

3 BE Developers
1 FE Developers

Technical Designer
2 QA
UX designer

Documentation

Duration:

5 months

Deliverables:

I was responsible for Stake holder/SME/User interviews/surveys, Personas, Use Cases, Flow Charts, Wireframes,  Prototypes, UI Kit and Style Guide, Usability Testing, Iconography, and Final UI design.

Process:

Discovery@2x.png

Discovery

Research
Interviews
Existing user issues 
Evaluation of product
Competitive Analysis

Define@2x.png

Define

Use cases
Users
Flow diagram
Personas

Ideate@2x.png

Ideate

Sketches
Wireframes
Brainstorming
Prototypes
User testing

Design@2x.png

Design

Launch@2x.png

Final Design & Launch

Mock ups
Visual Design
UI Kit / Style Guide
User testing

Final design docs
UX/UI Review
 

Tools:

AI@2x.png
Id@2x.png
PSD@2x.png
XD@2x.png
Lucid@2x.png
Image 115@2x.png

Challenges:

As noted in the accomplishments section, I was the only UX designer on a team located overseas, with a six-hour time difference between myself and the Prague team, and a seven-hour difference with the front-end developer. These time zone gaps were the biggest logistical obstacle. We overcame them by maintaining open communication channels and scheduling all meetings during overlapping hours.

Another challenge was clarifying my role at the start of projects. Even when teams specifically requested UX involvement, the UX process was not yet well defined or fully integrated into the company structure. To set expectations, I held a UX kickoff meeting where I introduced myself, explained the UX process through documentation, and answered any questions the team had. This helped establish trust and alignment early on.

We also faced design challenges around how to represent assets on the 2D map. Icons needed to remain generic while still communicating asset status and remain visible across different maps. While this initially seemed complex, the solution came together smoothly. Some visual details required extra iteration, but the final design was well received and met the needs of both users and stakeholders.

What didn't work:

One of the main challenges we encountered was that users struggled to understand some of the new feature terminology. This highlighted the need for more supportive communication within the UI. To address this, we implemented on-demand tooltips that opened only when clicked, providing clear explanations of terms and processes without overwhelming the interface.

Another pain point was the Activity Editor, which was released as a minimal viable product. Its limited functionality caused confusion during user testing, and in some cases, users bypassed it entirely by completing tasks through other pathways. While it served its purpose for this iteration, a more robust version with the full feature set will be necessary in future updates to deliver a better overall user experience.

Lessons learned:

We typically begin projects with the assumption that our users are primarily military, with some ex-military, contractors, and civilians. Since I did not have direct access to the French customer who contracted this work, I surveyed our British end users to better understand their backgrounds. To my surprise, none of the six respondents had a military background. This insight was unexpected not only for me but also for the entire team and department lead.

Although we continued under the assumption that the French users included military personas, this experience underscored the importance of validating user demographics early in the process rather than relying on long-standing assumptions.

Accomplishments:

This was my first project where the entire development team (apart from myself) was based overseas in the Prague office. At first, the time difference and remote communication created challenges, but within a few weeks we were operating as if co-located. This was achieved through open, continuous communication: a dedicated group chat, daily check-in meetings, ongoing collaboration with the PO and technical designer, and structured weekly progress reviews. The project’s success demonstrated the efficiency and effectiveness of integrating remote UX designers into distributed teams.

Additionally, this was the first time the Prague team worked with a UX designer. I was able to showcase the value UX brings to development, and it was rewarding to see the team’s perspective shift as they experienced the usability gains first-hand. By the end of the project, they were not only impressed but also strong advocates for including UX design in future initiatives.

Research
DefineDark@2x.png

Civilian AI: Research & Discovery

Research existing feature:

began by exploring the feature independently to evaluate how intuitive it was for a new user. My progress stalled quickly—I was only able to place a few items on the map before needing assistance. To continue, I had to rely on external documentation and follow step-by-step instructions in order to build a functioning scenario.

This revealed a major usability issue: the design was overly dependent on documentation rather than guiding users through the interface itself. Reducing this reliance became a key focus area for the redesign.

Users accessed the feature through a side menu containing options for setting up civilian AI, areas, and activities. Each selection launched a separate pop-up dialog to complete the setup process. This fragmented approach forced users to repeat steps multiple times, even for simple tasks such as selecting asset types to display in a scenario. The repetitive, dialog-heavy flow created unnecessary friction and slowed down scenario creation.

Group 40781@2x.png

Research existing product version: 

Below are documents displaying areas of concern that presented while interacting with the feature and in doing an evaluation.

Group 40450@2x.png

Interviews with SMEs: 

I conducted interviews and conversations with subject matter experts (SMEs) and others who had direct feedback from end users. These discussions provided insights into how users interacted with the product and highlighted recurring complaints about the feature. However, because the feature was only used by a limited subset of customers, the amount of available feedback was relatively small. This made it even more important to carefully capture and synthesize the insights that were available.

Group 40778@2x.png

Survey:

Once I learned that access to British users of the Civilian AI feature was possible, I coordinated with Business Development to create and distribute a survey. The responses revealed several points of interest that helped shape our understanding of user needs and pain points.

Insights:

  • None of the respondents were military personnel, which challenged prior assumptions about the primary user base.

  • Users relied on both 2D and 3D maps to set up and position assets, highlighting the need to support flexible workflows across views.

  • Most users operated in noisy environments, underscoring the importance of clear visual communication and minimizing reliance on audio cues.

Group 40713@2x.png
Competition
DefineDark@2x.png

Civilian AI: Competitive Analysis

Research existing competitor products: 

I identified three main competitors on the market at the time that offered pattern-of-life features and conducted a comparative review. Each product had strengths in certain areas as well as notable shortcomings. This analysis provided useful insights into best practices and common pitfalls, which helped inform our approach to enhancing the Civilian AI feature and ensured our implementation addressed gaps left by competitors.

Here are the main takeaways:

The Good

  • Enable users to add models to groups through click-to-add or drag-and-drop.

  • Provide clear, intuitive navigation that doesn’t require reliance on manuals.

  • Enhance filtering and search options for adding models.

  • Allow users to define areas by drawing directly on the map.

The Bad

  • Eliminate redundant, repetitive tasks (e.g., adding models to groups multiple times).

  • Minimize the use of excessive pop-ups when features can be integrated for smoother workflows.

  • Avoid leaving users without guidance; the UI should provide clear direction on next steps.

Group 40782@2x.png
DefineDARK@2x.png

Civilian AI: Define

Define

Research existing feature:

To evaluate ease of use, I first explored the feature independently, simulating the perspective of a new user. I was only able to place a few items on the map before reaching a dead end. To progress further, I had to rely on external documentation and follow step-by-step instructions in order to build a functioning scenario.

This revealed a critical issue: the design was overly dependent on documentation rather than providing guidance within the product itself. Reducing this reliance became a key focus area for the redesign.

Users accessed the Civilian AI feature through a side menu that included options for setting up civilian AI, areas, and activities. Each selection opened a separate pop-up dialog for the setup process. This fragmented design forced users to repeat steps multiple times, even for simple tasks like selecting asset types to display in a scenario, resulting in unnecessary friction and inefficiency.

Group 40715@2x.png

Use Cases: 

For this project, we defined two primary scenario types to guide design and testing:

  • Open Area – such as city streets, parks, or plazas where civilians move through large, navigable spaces.

  • Enclosed Area – such as buildings or indoor environments where movement and activities are more constrained.

These use cases helped shape how the Civilian AI feature needed to support different scales and contexts of counter-terrorism training.

These use cases were later developed into full scenarios that served two key purposes: they provided QA with consistent test cases, and they supported clearer end-user documentation.

Group 40714@2x.png

Flow Chart: 

Two sets of flow charts were created to guide the design. Given the tight timeline, we were uncertain whether the centralized dialog solution could be implemented. To account for this, one set of charts documented the quicker, short-term implementation, while the other captured the ideal long-term solution.

The charts shown below represent the ideal solution, which streamlined the workflow and reduced the need for repetitive dialog interactions.

Group 40458@2x.png

Personas:

We identified four main user groups for this product (outlined in the user research section above). Each group was developed into a persona, providing the development team with a clearer, more tangible representation of the end users. These personas helped keep the team aligned on user needs, goals, and contexts throughout the design process.

While the survey results indicated that the British users were all civilians, the contracted customer clarified that their user base also included active military personnel. This highlighted the importance of designing for a broader range of personas, ensuring the feature could support both civilian and military training needs.

Group 40716@2x.png
Ideation
IdeateDARK@2x.png

Civilian AI: Ideation

Sketches:

A wide range of design ideas were sketched and reviewed with the team. Once the most promising directions were identified, we moved forward by translating them into low-fidelity wireframes to explore workflows and validate concepts before investing in higher fidelity designs.

Group 40461@2x.png

Wireframes:

After sketching, the ideas were translated into digital wireframes for review and iteration. Through design meetings and discussions with the team, we refined the placement and layout of features within the product.

Key considerations included font and icon sizes, element spacing, and overall visual hierarchy. We also explored alternative workflow approaches and documented how panels would function, ensuring both usability and consistency across the interface.
 

Image 268@2x.png
Image 267@2x.png
Image 269@2x.png

Wireframes:

For the 2D map, we researched iconography and shapes to represent activities, areas, and spawn points. Our approach combined these elements to clearly differentiate the various types of icons displayed on the map.

Once the icon designs were established, we explored color palettes and marker visualizations to enhance clarity and ensure icons remained distinguishable across different map backgrounds. These solutions were then extended and adapted for use on the 3D map.

Finally, we addressed the Debug visualization requirements. To ensure these markers stood out from the Civilian AI icons, we used a stark visual style built on black, white, and red, making them highly visible and immediately recognizable.

Group 40779@2x.png
Prototype/Testing
IdeateDARK@2x.png

Civilian AI: Prototype & User Testing

Prototype - High fidelity 

A full-color prototype was created within the context of the containing application. This allowed us to validate user flows and UI elements early, reducing the risk of costly redevelopment later in the process.

Initial testing was conducted in-house, since access to British users was reserved for Beta testing. These internal sessions helped us identify and address key usability issues before engaging with end users.

The prototype focused on several critical areas of concern:

  • Filtering, sorting, and adding models

  • Usability of the Activity Editor

  • Clarity of terminology

  • Comprehension of symbols and markers on the map

This approach allowed us to refine the experience before development progressed too far, ensuring smoother testing and adoption by the contracted users.

Image 270@2x.png
Group 40783@2x.png

User Testing:

With support from Business Development, we conducted remote video chat testing sessions of the beta build with British customers. Due to participant availability and the need for the BD to present the build on-site from his laptop, testing took place over several weeks, with each participant joining from a different location.

The sessions were highly successful. Participants expressed enthusiasm for the upcoming enhancements and looked forward to using them in training. Beyond validating the design, these tests also created new business opportunities, as the exposure to the feature generated interest from the customer in potential future contracts.

Testing insights: 

User testing revealed several important findings that shaped refinements to the design:

  1. Learning approach: Instructors relied on manuals, while trainees expected to learn by direct interaction and resisted using documentation.

  2. Area creation: The process of creating areas and linking them with activities was unclear.

  3. Contextual actions: Users needed the ability to edit an activity directly from the right-click menu.

  4. Input fields: The original input box functionality was unintuitive, causing interaction difficulties.

  5. Reset panic option: Users struggled to locate this function since it was not tied to the Civilian AI marker.

  6. Add models bug: A critical bug prevented models from being added correctly, severely disrupting workflows.

In  House - User Testing

Group 40721@2x.png

End User - User Testing

Group 40718@2x.png
Design
DesignDARK@2x.png

Civilian AI: Design

Style Guide, Iconography, IU Kit:

Since this feature was built within the larger VBS3 product, its design was governed by the new UI Kit created for the product’s reskin and redesign. I designed and maintained this Kit with input from the UX Design team, ensuring consistency across the product while providing a cohesive foundation for new features like Civilian AI.

The feature followed the standardized design system, starting with a base color palette and a highlight color to designate its product line.

Below this, we documented the final UI map assets, which were handed off to developers to ensure accurate implementation of icons.

 

Finally, we provided the UI Kit assets pulled from the master Kit that were specifically used for this feature, maintaining consistency across the VBS3 product while supporting the unique needs of the Civilian AI feature.

UI Kit

Image 285@2x.png
Image 284@2x.png
Image 280@2x.png
Image 281@2x.png
Image 282@2x.png
Image 283@2x.png
Group 40780@2x.png
Launch
LaunchDARK@2x.png

Civilian AI: Develop & Launch

Final Design:

Here is the final design for the Civilian AI feature with the implemented enhancements. Both the customer and the company responded positively, the delivery was well received by the client and well regarded internally.

Civilian_AI_Launch.jpg
Civilian_AI_Launch – 2@2x.jpg

All works are © 2016 Karen Sanok

bottom of page