UX Director
Project Overview
Product: VBS Tactics
Company: Bohemia Interactive Simulations
Industry: Military Simulation & Training
Role: Lead UX Designer
Timeframe: 2 Months
Platform: Desktop (Web + Native integration)
VBS Tactics, an intuitive 2D interface for control of virtual units in VBS3 at the tactical level. VBS Tactics allows users to conduct real-time tactical maneuver exercises by controlling fire team- to company-size AI entity groups in a 2D virtual environment and visualized in 3D in VBS3. VBS Tactics features a new AI system that enables AI entities to behave according to established military doctrine. The interface allows users to configure orders of battle, plan a mission with military symbology, visualize missions in real time within VBS3, update tactical orders on-the-fly, and review the results in VBS3 After Action Review. Learn more at bisimulations.com/vbs-tactics.
UX Design stage 1: Research
Requirements gathering - Finding out what we need to design
I worked with product management to get clearly defined requirements from the customer and then used these to lay the foundation for the ux design choices.
Defining User Personas
Once we had a clearly defined set of requirements and understand what we are building, we then determine who the types of users are that will be using our product. User personas help us understand what about the user experience neds to change per user type. For example having a user profile allows the system to know to change the ui and options based on the needs of the user type.
As we dug in we found that we had way more user personas at play than we realized. Each sub product has a series of specific users and we have seen up 20 different types in all.
In an effort to streamline the process however we have distilled it down to 4 main types. Trainee, Commander and Instructor and Sim Center System Administrators.
Defining Use Cases
Having a firm understanding of who is using the product coupled with the requirments then gives way to creating use cases. A use case is a detailed description of the actions a user takes to accomplish their specific goal when using a product. Often a single product wil have multiple use cases per type of user. While it can be time consuming to document all of the possible use cases for a product, its good to at least define the main use cases that the average user will encounter and plan for those.
UX Design stage 2: Ideation
Mapping out our understanding of the Product
Once we have all the requirements and the basic use cases defined we moved to the Ideation stage and started working on product diagrams, and user flow diagrams. As is often the case by simply diagramming out what we think we are going to build, we find discrepancies in product vision across stakeholders and team leads.
This results in multiple iterations on the diagrams and an increasing understanding and clarity of what we need to build. Once we are satisfied that we have the correct diagram we share it out with the teams and use it as a benchmark for design discussions.
The user flow diagrams then serve as the blueprint
for beginning our wireframes of the software.
Team brainstorming on functionality and usability
Before beginning the wireframes I met with the teams involved in the effort and did a few Team Design Braintorming Sessions to explore ideas for new interfaces and flows. These then become the core of what I use to create the wireframes.
[ Whiteboard notes and design ideas were captured in loose quick sketches and then used as low fidelity prototypes to test the solutions quickly.]
UX Design stage 3: Wireframing
Low Fidelity Exploration
When doing wireframing there is always the tempatation to go straight to fully fleshed out designs but I am a firm believer in keeping designs as simple and low fidelity as long as possible. This helps the design iterations move quicker and people dont get caught up on small visual styling details. Which always happens.
So I do black and white wireframes with blocked out details to flesh out the general flow.
I don't have a lot of the earlier wire-frames or sketches from this project but it was a very interesting challenge to work on over a 3 year period. This project suffered from an inconsistent vision and not enough engagement with end users. Each of these images is from a different round of iterations with a different ux designer working on the project. Ask me about this project and I can explain in more detail the challenges we had.
UX Design stage 4: Rapid Prototyping & Final Ui design
High fidelity prototyping
For the first iteration of VBS Tactics we had a very short turn around time and didnt have time to do thorough design exploration. This meant that we had to move into final ui art as we went. I quickly defined the style and built out the program working alongside the developers.
UX Design stage 6: Developing a Style Guide
Minimalist V1
Due to the speed of this project the style guide was not fully fleshed out. Instead we built a simple one to ensure that the developers understood the various button styles and states. We built this as we were designing and they were implementing. Not an ideal flow but as we all know sometimes some projects lack the luxury of time and we have to adapt and do it quickly.
Rolled into the VBS4 Style guide
At the beginning of the project we were moving so fast that we didnt have time to make a style guide or design system for GEO but when we iterated on it for VBS4 it was incoproated into the VBS 4 style guide.
