You may have noticed some major changes to our app recently. We have 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.
The 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.
At JASK, we know first-hand that analysts are gamers and film enthusiasts with serious jobs to do. Today they are strapped with bloated UIs, meaningless dashboards and tedious threat hunting experiences. 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.
(WarGames art by James White of Signalnoise)
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:
We looked to Hollywood for ideas. Star Wars, Oblivion and Ender’s Game all have wonderful examples of fantasy user interfaces. Chris Kieffer’s Fantasy User Interface (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. That work, in particular, showed us this aesthetic could be usable in the real world.
Science fiction UI in cinema is still just science fiction. The interfaces look incredible on screen but are not meant for long-term, daily use. They are 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 should be visible only when necessary to enable better immersion inside the digital 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.
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. 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 in nature. Presenting easy to understand stories using data visualizations would 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.
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.” Credit to Luke Wroblewski for the inspiration https://vimeo.com/288882119
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!
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 the Sketch app. 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 everyone on the same page moving forward.
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. 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.
The final step in this process involved building a reimagined design system, including a new color palette, updated typography, button styles, 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 would be a failure if it was just a pretty, but meaningless UI. Everything needed a purpose. Nothing could be superficial. To the entire JASK app team, the form was always equal to function, and 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 are 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 experience.
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 six months. They are vital reference points for our plans of continuous improvement and user research 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!
You can find an additional, in-depth blog post on Medium.
Harlan Elam is the lead product designer at JASK. With a passion for user-centered design, product design, digital marketing, illustration and creative strategy, he helps lead the design behind the JASK platform.