Civilian AI - Feature Enhancements
Civilian AI is a feature that was currently in the main company product (VBS3). One of our customers contracted us to increase the capabilities and to improve the pattern of life. The primary customer goal was to train counter terrorism in European cities in an easy to use tool. Research indicated that the existing feature was very fragmented and not very intuitive or user friendly.
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
Research
Interviews
Existing user issues
Evaluation of product
Competitive Analysis
Define
Use cases
Users
Flow diagram
Personas
Ideate
Sketches
Wireframes
Brainstorming
Prototypes
User testing
Design
Final Design & Launch
Mock ups
Visual Design
UI Kit / Style Guide
User testing
Final design docs
UX/UI Review
Tools:
Accomplishments:
Lessons learned:
Challenges:
This was the first project I was involved with where the entire team (excluding myself) was located over seas in the Prague office. The time difference, the remote communication and the feeling of separation was at first a bit disorienting, but after a few weeks we were running like we were in the same location. This was accomplished by having very open and constant communication through a dedicated group chat, daily check in meetings, keeping in constant contact with the PO and the technical designer, and weekly progress meetings. The project was very successful and helped to promote and support the efficient use of remote UX designers on teams.
I was able to introduce, to a team that had never used UX designers before, the great value UX can add to the project. Throughout the development I was able to see how enlightened and impressed the team was with the level of usability they could accomplish.
As mentioned in the accomplishments section, I was a remote UX designer on a team that was located in another country with a 6 hour time difference. Everyone in the team sat next to each other in the same office while the front end developer and I were remote. There was also a 7 hour time difference between the FE dev and myself. So the time differences was the bigger obstacle to manage. This was resolved by keeping the lines of communication open and by conducting all meetings during the overlapping times.
At the beginning of all the projects I worked on, there was always some confusion as to my role on the team even if the team asked for a UX Designer to be involved. The UX Design process had still not been clearly defined and integrated into the company structure. To help clarify how UX would be servicing the project I would have a UX kick off meeting where I was able to introduce myself to the team, share documentation explaining the UX process and provide answers to questions they had.
One concern we had focused on how to represent the assets on the 2D map. They needed to be generic and display various pieces of information that needed to be conveyed to the users on the asset status. They also needed to be visible against the various maps that could be loaded into the product. This turned out to be less of a challenge than originally assumed. There were some aspects of the visuals that we had to spend more time on than others, but overall the final result turned out to be very well received.
Normally we go into projects under the impression that our users are mostly military (with some ex-military, contractors and civilians). I didn’t have access to the French users who contracted this work, so for this project I conducted a survey with our British end users and found that out of the 6 surveys that were completed, not one user was military. This was surprising not only just to me, but to the entire team and the department lead. We still went under the assumption that the french users included military personas.
What didn't work:
One of the bigger issues we ran into during the development, was how much the users didn’t understand some of the new feature terms. We discovered that much more supportive communication within the UI was necessary to clarify this. So we opted for information tool tips that would only open if clicked and would explain terms and processes.
The Activity Editor was also an area of confusion mostly since it was an MVP variant and wasn’t feature rich for this iteration. During the user testing some users never even interacted with it because they were able to complete the tasks through other avenues. Hopefully the full feature set will be added in the future to improve the user experience managing the activities.
Civilian AI: Research & Discovery
Research existing feature:
I first explored the feature on my own to see how easy it would be for a new user to get started. I was unsuccessful in my attempts to get farther than placing some items on the map. I then had to turn to the documentation and follow the instructions to set up a functioning scenario. This design was heavily reliant on a user following the external documentation while using the product. This was an area to focus on to reduce this dependency.
The way the user accessed the feature was through a side menu list. This list contained the options to set up a civilian AI, an area and activities. From there they were presented with pop up dialogs for each aspect of the set up process. Users were forced to repeat steps over and over to complete, for example, the simple setup of selecting various types of assets to display in the scenario.
Research existing product version:
Below are documents displaying areas of concern that presented while interacting with the feature and in doing a heuristic evaluation.
Interviews with SMEs:
I had interviews and conversations with the SMEs and various other persons who had direct feedback from end users. During the interviews I gathered information on current complaints about the feature, and how the users interact with the product. There was very little information available since this feature was only used by certain limited sets of customers.
Survey:
Once I had been informed that access to the British users of the Civilian AI feature was an option, I contacted the BD and setup a survey to be distributed to them. The survey results showed a few points that were of interest.
• No users surveyed were military personnel.
• Both the 2D and 3D maps were used to set up and
position assets.
• Most users were in very noisy environments while using
the feature.
Civilian AI: Competitive Analysis
Research existing competitor products:
I found 3 main competitors that were on the market at the time to review and compare that offered pattern of life features. All 3 products had aspects that were handled well and some aspects that were not. Some insights on how to approach our implementation of the feature enhancements was attained from this analysis.
Here are the main takeaways:
The Good
• Improve functionality to add models to groups using click to add or drag and drop.
• Clear easy to use navigation without the use of manuals.
• Improve filtering and search for adding models.
• Ability for user to define areas by drawing them directly on
the map.
The Bad
• Avoid the redundancy of tedious tasks that user has to perform multiple times. ie adding model to groups.
• Avoid the use of too many pop ups if features can be integrated for better usability.
• Avoid lack of direction within the UI helping guide the users on what to do.
Civilian AI: Define
Research existing feature:
I first explored the feature on my own to see how easy it would be for a new user to get started. I was unsuccessful in my attempts to get farther than placing some items on the map. I then had to turn to the documentation and follow the instructions to set up a functioning scenario. This design was heavily reliant on a user following the external documentation while using the product. This was an area to focus on to reduce this dependency.
The way the user accessed the feature was through a side menu list. This list contained the options to set up a civilian AI, an area and activities. From there they were presented with pop up dialogs for each aspect of the set up process. Users were forced to repeat steps over and over to complete, for example, the simple setup of selecting various types of assets to display in the scenario.
Use Cases:
For the use cases, we decided to focus on the 2 main areas a scenario could focus on:
• An open area
• An enclosed area
Use cases were eventually used to create scenarios for QA to use in testing, and to assist with documentation.
Flow Chart:
Two sets of flow charts were made. Due to the tight time frame we were not sure if the centralized dialog solution could be implemented. So one set of flow charts were based off the quicker implementation while the second focused on the ideal solution. The charts below were based off the ideal solution.
Personas:
We had 4 main groups of user for this product as shown in the user section above. Each were flushed out into personas to better visualize the users of the product to the development team.
Even though the user survey showed that the users were all civilians, this was not the case with the contracted customer. We were told that they still had military personnel using this feature for training.
Civilian AI: Ideation
Sketches:
Many design ideas were explored and reviewed with the team. Once directions that appeared to be the most promising were decided on we moved forward with creating lo-fidelity wireframes.
Wireframes:
Once the ideas were mocked up into a digital format, review and design meetings were held. We discussed and explored options and made adjustments to the placement and layouts of the various features within the product.
Font sizes, icon sizes, sizing of and placement of elements, and many other aspects were explored and refined. We also explored different approaches to the work flow, along with descriptions of how the panels would function.
Wireframes:
For the 2D map visualization of the activities, areas and spawn points research was done on iconography and shapes. We planned on using a combination of these two elements to express to users the different types of icons displayed on the map.
Color exploration occurred after the designer had been determined. Along with the color we had to also contend with the marker visualization to be displayed on each icon.
From here we moved forward with integrating these solutions onto the 3D map.
The last visual requirement was for the Debug visualization. These icons needed to stand out against the Civilian AI markers, so we went with a more stark visual representation utilizing black white and red.
Civilian AI: Prototype & User Testing
Prototype - High fidelity
A full color prototype was created within the back drop of the containing application. This was used to test the user flow and the UI elements before development progressed too far to avoid costly redevelopment of areas that might need to be reassessed based off the user testing results.
These tests were conducted in-house because we needed to be able to use the limited British users for the Beta testing. We were able to work out some of the issues before developing and testing with the end users.
The prototype was designed to cover major areas that were of concern at the moment. Some of these included:
• The filtering, sorting and adding of models
• Understanding how to use the activity editor
• Understanding the terminology
• Understanding the symbols and markers on the map
User Testing:
With the help of the BD for the British customer, we were able to conduct remote video chat user testing sessions on the beta build. It took a few weeks to do the testing due to the availability of participants and the need for the BD to be on site to present the build on his laptop. Each participant was at a different location.
The British customers were, after the user testing sessions, very excited about and looking forward to the new enhancements being implemented. The user testing also provided the company with possible future income from this customers exposure to the feature.
Testing insights:
Some bigger revelations that came from the user testing included:
1. The instructors relied on the manuals to learn the feature
while the trainees/students expect to be able to figure it
out by using it and do not want to have to use a manual.
2. Area creation and using areas with activities was not clear.
3. We needed to add the editing of an activity to the right
click menu.
4. The functionality of the input boxes in their original state
was not user friendly. User had difficulties interacting
with them.
5. Users had difficulty finding the reset panic option since it
was not tied to the Civilian AI marker.
6. There was a very serious bug in the add models
functionality that interfered with the models being
added correctly.
In House - User Testing
End User - User Testing
Civilian AI: Design
Style Guide, Iconography, IU Kit:
For this project, it resides as a feature within another product (VBS3), so the design was predetermined by the new UI Kit that was developed as a reskin and redesign of VBS3 product. This Kit was designed and maintained by myself with the input of the UX Design team.
A base color palette with a highlight color used to designate the product line it is a part of is seen below.
Below that is the final UI map assets document used to hand off icons to developers.
This i followed by the UI Kit assets pulled from the master UI Kit that are specifically used in this feature.
UI Kit
Civilian AI: Develop & Launch
Final Design:
Here is the final design for the Civilian AI feature with the enhancements that were implemented. The design and the final feature delivery was well received by the customer and was well liked by the company.
