Fight Tonight is a Planning Tool for the US Navy

OVERVIEW

The Navy needed a tool to help create Air Tasking Orders (ATOs) efficiently.

My team partnered with Developers and Human Factors Engineers from the Naval Information Warfare Center (NIWIC) to design a prototype.

We met multiple times a week to interview the NIWIC team to understand the domain and work together to create high-fidelity mockups and present them to the Air Force Research Laboratory (AFRL).

ROLE

UX/UI Designer

Helped develop various design artifacts and strategies to understand the domain and needs of the users
Collaborated with developers, human factors engineers, and two other designers
Presented design concepts to the team
Updated existing UI Kit to support developers when changes were made to the prototype
Designed low-fidelity sketches
Designed high-fidelity mockups

CONSTRAINTS

We had a short timeline of about three months to get a high-fidelity prototype designed
Communication with the end users was limited

PROBLEM

The current process of ATO Planning is very complex and time-consuming, resulting in frequent manual updates and limited time for plan comparison.

PROJECT GOALS

01.

Redesign the Current Prototype

Before onboarding onto this project, the NIWIC team had made some progress on a prototype. They hired us to make it more user-friendly and visually appealing.

02.

Design for a Dual Monitor Setup

Based on our research, the end users typically use a dual monitor setup.

03.

Create Impressive UX/UI Solutions

For this project to succeed, we had to develop innovative UX/UI ideas and solutions to their problems.

04.

Incorporate Provided Design System

The NIWIC team had a design system created that they wanted us to incorporate into the final designs. This included colors, typography, components, icons, and more.

Design Process

STEP 1

Research & Understanding

This project required a lot of user research due to the complexity of the domain. Interviewing subject matter experts and collaborating as a team was vital and enabled us to create various artifacts to further our understanding.

Below are a few artifacts I was involved in creating to help the team and me understand the goals and needs of the end user.

Functional Decomposition

The Functional Decomposition helped us identify the high-level goals and sub-goals, giving us a resource to return to when we began the ideation phase.

Information Architecture

Creating simple boxes and labels for where the different features should lie was another valuable artifact that enabled us to get quick feedback before moving on to sketches.

Concept Maps

Creating concept maps helped us identify the relationships between the different components and have a resource we could go back to and view the functions of each feature.

STEP 2

Sketches & Wireframes

After understanding the problem, domain, and goals well, I began the design process with low-fidelity sketches and wireframes. The sketches helped me develop ideas rapidly and get feedback from the team and SMEs.

After getting feedback from the team, I made a few edits and moved on to creating high-fidelity mockups.