Houston, we have a problem.

Science fiction UI in cinema is still just science fiction. The interfaces look incredible on screen but aren’t meant for long-term, daily use. They’re designed to look great for a few seconds at a time on fixed screen ratios in mostly static environments. VR presents a different problem in that the UI, arguably in most cases, should be visible only when necessary to enable better immersion inside the gaming environment.

We had to account for analysts using the JASK application for hours at a time in a multitude of environments and on varying screen sizes. From a technical standpoint, there was so much more to consider outside of how amazing the app could look.

Oblivion | Copyright Universal Pictures 2013 | UI by GMUNK

Visual complexity is a common feature in cinematic FUIs and provides a great amount of depth and realism to scenes, especially when actors are involved. These details contribute to crafting better, more engaging stories but can you imagine how long the training would be to master software so insanely intricate?

We needed to find a way to combine these seemingly disparate concepts and create an experience that was both highly detailed and beautifully complex, yet simple to use. Presenting easy to understand stories using data visualizations could allow analysts to quickly discern legitimate attacks from false positives and have a blast resolving threats.

Once we understood the limitations and decided it was worth exploring the FUI aesthetic, we had to figure out how to make it n00b friendly.

Interview. Sketch. Prototype. Repeat.

A significant amount of time was invested talking to analysts in order to understand how we could improve the app and validate this new direction we theorized they would love. Artifacts from these interviews included ideas for improved user flow from login to insight resolution, reorganized navigation with labels and the adoption of a new general design philosophy that said: “obvious always wins.”

By leveraging user interview data and learnings from previous iterations of the app, we started brainstorming and focused on building a new set of design requirements. This ultimately informed one of the more exciting aspects of this process: sketching!

HUD concept sketches

After all of the talking, research and analysis, it was time to get our hands dirty with pen and paper. We sketched like madmen and produced an untold number of variations for the Heads Up Display (HUD). As the cornerstone of our UI and basecamp of security operations for analysts, it was paramount that we get it right. Our sketches became the new foundation for what you see today in the app and allowed us to quickly iterate and evolve the design in a short amount of time.

When the team felt confident in the user flow on paper, we moved on to prototyping the redesign using Sketch and Invision. At this point, we started meeting regularly with internal partners from spec ops, sales, customer success and marketing to gain alignment on the direction we were headed. This was going to be a massive change for our analysts, so we needed to partner with everyone to ensure we were all on the same page moving forward.