Project Overview

Product: VBS Geo (part of the VBS4 suite)
Company: Bohemia Interactive Simulations
Industry: Military Simulation & Training
Role: Lead UX Designer
Timeframe: 1 year
Platform: Desktop (Web + Native integration)

VBS Geo is a terrain editing mode within VBS4 that allows users to modify, extend, and create new terrain features within the virtual environment. It's designed to be user-friendly, enabling non-technical users to make changes to the 3D world without needing specialized terrain-building expertise.

Geo began as a stand alone application during the time of the VBS3 engine and was later rolled into the Vbs4 suite of tools.

UX Design stage 1: Research

Requirements gathering - Finding out what we need to design

Internally I sent out surveys, did interviews and scheduled group design disucssions with key stakeholders in the company. This list of attenedees included tech leads, team leads, Product owners, and executive level product managment to collect thier feedback about the companies internal needs for the next iteration of our product.

Defining User Personas

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.

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.

Competitive Anlaysis

When I conducted a competitive analysis for terrain editing software, I focused on evaluating key features, pricing, user experience, and positioning of various products. I started by identifying the main competitors and gathering data on their strengths and weaknesses. By analyzing customer feedback and reviews, I gained insights into user preferences and pain points. This comprehensive approach me identify areas for improvement and differentiate my software in the marketplace.

UX Design stage 2: Ideation

Mapping out our understanding of the Product

Starting with low fidelity sketches and prototypes allowed me to visualize my ideas and concepts without getting bogged down in details. This approach facilitated quick iterations, enabling me to test and refine my designs. The value of using sketches lies in their simplicity; they encourage exploration and creativity while a clear framework for feedback. By moving fast, I could adapt to user needs and preferences more effectively, leading to a more user-centered final product.

UX Design stage 3: Low fidelity Iteration

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.

Low Fidelity UI Style

UX Design stage 4: Prototyping

High fidelity prototyping

At this stage we are narrowing down the design to a pretty close approximation of the final product. We are still exploring the visual design but have a beginning working ui style. We now see the prototypes getting more and more complex as we are further exposing edge cases in the requirements and use cases and the prototypes become more complex as they represent a full user experience from launch to execute and review.

UX Design stage 5: Final Ui Styling

High fidelity visual design

Now that the ux flow is mostly nailed down I move to define the final ui style for the product. The initial step is to define the ui for all the various aspects of the product. For VBS4 we had a multiple apps within the core product and decided to color code them so users could more easily tell what app they were in as each app had a distinct use and unique tool set.

UX Design stage 6: Developing a Style Guide

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.