From Dashboard to HUD: How JASK reimagined the security analyst user experience

Harlan Elam
8 min readMay 28, 2019
Left: Previous dashboards | Right: New heads up display

There’s a growing problem within the information security industry and I’m willing to bet it’s not what you’re thinking. You may remember reading about a recent data breach that included compromised personal information. Foreign influence and disinformation campaigns on social media are trending topics in the current political climate. You may not have realized, however, that companies are struggling to keep networks and private data safe from attackers because of a concerning shortage of analyst talent.

Perry Zipoy (Front-End Eng) in QA mode

With so much at stake we’ve been laser focused on figuring out how to enable companies to hire and retain analysts. Over the last seven months we’ve made some major changes to our user interface (UI). We updated the colors, typography, layout, and added features to improve usability and make data points relevant to a broader set of users.

Our goal was to deliver an incredibly functional and intuitive experience enabling analysts with zero experience to jump right in and start crushing bad guys from day one. After a thorough analysis of current market offerings, user interviews and long internal discussions, it was clear we had to take a radically different approach to the design of our application.

New JASK HUD

This is the reason the reason I left Blizzard Entertainment after four years of designing web and mobile experiences for World of Warcraft and Diablo 3. I saw a tremendous opportunity to innovate in an industry where the majority of incumbent security applications look and act the same.

Analysts have been strapped with bloated UIs and meaningless dashboards while threat hunting had evolved into a tedious, challenging beast. It was time to break the cycle and focus on the user. By doing so we could reverse the trend of cyber security companies releasing feature rich products that require months of training and lack anything remotely close to a delightful UI.

The current JASK customers we interviewed were excited for this update to roll out, so we feel confident in its execution and are excited to share high-level insight into why we made the changes we did, the process we took to get there and the lessons we learned along the way.

WarGames poster by James White of Signalnoise | 2013

Shall we play a game?

At JASK, we know first-hand that analysts are gamers and film enthusiasts with serious jobs to do. As we better understood our users during this process, there was a steadily growing sense that we needed to tap into the wealth of fulfillment and emotion that gaming provides. McAfee’s survey findings, detailed by VentureBeat, parallel our own and suggest those that grew up playing video games are stronger candidates for cybersecurity roles.

In light of that realization, we asked ourselves a few vital questions.

  • How do we make the JASK app fun?
  • Can we make it thrilling and meaningful?
  • More importantly, how do we move onboarding and daily use from Hardcore to Beginner mode?
Ender’s Game concept art | 2013

We looked to Hollywood and game studios for ideas. Star Wars, Oblivion and Ender’s Game all have wonderful examples of fantasy user interfaces (FUIs). Chris Kieffer’s FUI designs for Westworld were mentioned frequently around the office and allowed us to dream about what could be.

Davison Carvalho (Thor Ragnarok, Star Wars: The Force Awakens and Captain America Civil War) has an incredible cinematic UI portfolio but also designed for the virtual reality (VR) game Lone Echo published by Ready at Dawn. That work, in particular, showed us this aesthetic could be usable in the real world.

FUI Moodboard for JASK | 2019

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.

Early JASK HUD Designs

The app was initially designed in black and white. What teams saw at first appeared to be a very high fidelity wireframe, and the result was that it forced them to focus on the information architecture and user experience. That was key to making the entire thing easy to use. Ultimately, we were able to further optimize the design with minimal feedback rounds while ensuring we built something users could easily jump into from day one.

JASK Design System

The final step in this process involved building a reimagined design system, including a new color palette, updated typography, button styles, content borders, data visualizations, animations and newly defined meanings for spacing and shapes.

The styles were applied in very intentional ways all to support ease of use and higher emotional engagement during the threat hunting process. This will continue to be a work in progress as we refine and add more components throuought 2019 and beyond.

Our definition of failure was delivering a beautiful, but meaningless UI. Everything needed a purpose. Nothing could be superficial. To the entire JASK app team, the form was always equal to function. If the glowing early feedback indicates anything, the process has yielded a successful transition from Dashboard to HUD, validating all of the work that came before it.

We‘re certainly not done yet. We will go back to our analysts, gather feedback, take notes and start the process over again and continue to improve the design.

We have only just begun

Make it easy. Make it fun. Make it meaningful. These three pillars were our guiding light while overhauling the user experience and visual design of the JASK app during the previous seven months. They’re vital reference points for our plans of continuous improvement to ensure our refreshed UI is as feature rich and delightful to use as we meant for it to be.

There was a lot more to this project that we would love to share with you, but it might take another post to do so. Until then, enjoy the new HUD :–).

JASK’s Autonomous Security Operations Center (ASOC) platform is a cloud-native SIEM that transforms security analyst workflows through intelligence and automation. Founded by industry veterans and early innovators in security operations, the JASK ASOC platform automates alert triage by intelligently grouping alerts together into JASK Insights. Learn more at www.jask.com.

--

--

Harlan Elam

Lead Product Designer at Textline. Reader, gamer, smoker of meats, bourbon collector, father of four, and husband to one.