Project Overview

The Goal

During military operations, information is critical. The same can be applied to gaming. From personal experience with military simulation games, I’ve noticed that many players are disorganized lack proper communication to be effective in the field. Also organizations are unaware of their members’ competencies and assets. Citizen Commander was created to solve these common issues and empower players to have more control over their campaigns. With multiple modules available, CitComm is the one-stop-shop for all an organization’s needs.

The Problem

Being a Director at my organization, I was responsible for member management and logistics for my division. I very quickly realized that I needed a tool to help track all the moving parts involved with running operations smoothly and efficiently. With available options being text editors and spreadsheets, I wanted to create an application dedicated to solving the unique use cases specific to the needs of my organization. The application needed to be simple enough for members to use while in-game, as well as responsive enough to provide real time information as the situation changes.

Research

User Research

Gamers are accustomed to using popular messaging and social platforms such as, Discord or Guilded or handle group voice communications and text updates. While these applications are satisfactory for small organizations, when groups start to exceed 30 members, overall organization becomes exhausting, and communication begins to break down.

Market Research

Organizations also resort to unattractive tools such as Microsoft Excel and Google Sheets to track mission developments as they happen. This was a hassle as most people view the user experience of these apps as unfriendly and dull.

Inspiration

As a fan of video game user interfaces, I brought in aspects of interaction design from popular games and sci-fi films.

Ideation, wireframing, prototyping

The initial design was to give players access to a MFD or Multifunction Display. They could then access this MFD through a spare tablet or secondary screen where they could simply glance at when playing the game. This was inspired by aircraft MDFs that conveyed relevant information to their flight and aircraft operation. Ideally players could interact with their tablet, which would be setup with easy access, to quickly update their status and view the overall status of their team. The UI would need to be easily legible with interactive elements large enough for touch input. On some pages, I wanted elements to appear as cards or blocks that users could manipulate and organize into visually digestible groups.

Color was added to various graphic elements to denote unique designations and hierarchies. This in combination with icons assisted users with quickly identifying labels and button interactions. Care was also taken with typography and spacing to give items enough room to breathe while still displaying enough information as possible.

UI Libraries

Development

The app was built with modern web development technologies that included, but not limited to Next.js, ReactJS, HTML, Typescript, CSS, and Material UI. It is hosted using Google’s popular Firebase platform, with real-time snapshot updates being performed with the Firestore database.

Modules

Each module or page within the app provides organizations with a variety of tools to effectively manage their members and the everyday operations needed to run at a higher efficiency than other rival groups.

User Area

The personal page for managing a user’s assets and competencies. Also displays affiliations, reputation, and awards. User’s can catalogue their ships and display their loadouts for others to view.

Member Database

This displays a list of all the members of the organization. From here, users can quickly view a member’s profile with their hangar.

Operations Dashboard

A top down view of squadron assignments during an in-game campaign. Members can track the active status of others as well as dispatch orders, take notes, view roles, and access shared area maps.

Organization Overview

Describes the organization’s Charter, Manifesto, and a brief history.

Command Structure

Outlines an organizational chart of the different divisions and branches within the organization and the members assigned to them in hierarchical order.

Hierarchy Ladder

Describes each rank and title that can be achieved in the organization. Leaders can provide descriptions of each and the duties and responsibilities associated with them.

Band Ledger

Contains a detailed transaction history of organization funds with the functionality for members to deposit, withdraw, request, and balance funds within the bank.

Conclusion

Citizen Commander is enjoyed by several organizations who use it as the primary tool for organizing their membership and tracking their campaigns in during in game events. Members log in and sign up daily and the app is regularly updated and iterated on based on feedback and increasing demands.