ATT&CK Visualizer
A reference screen that allows cybersecurity analysts to visualize threat actors' known tactics and predict the enemy's next moves
Role
Lead UX designer (solo designer) - Owned end-to-end styles and experience for a new product module, including competitive research, design system integration, and UX quality testing. Worked directly with product management and development teams, with autonomy over design decisions.
Challenge
Close a gap in the company's software offering by quickly designing and implementing a complex feature with no strong competitor implementations for reference.
Solution
A unique and scalable design that could be broken up into multiple significant and achievable releases, enabling quick user feedback gathering and rapid feature expansion.
THE PROCESS
Business Goal
Cybersecurity analysts need to quickly review, record, and prioritize known patterns of malicious behavior to determine what has gone wrong, what may happen next, and where to spend time to best mitigate or prevent harm. Competitors were already responding to this demand, and we needed to stay competitive by supporting this feature that was gaining popularity in the industry.
Understanding Users
- Reviewed user requests for MITRE ATT&CK support and visualization options
- Analyzed competitors’ offerings and the MITRE tool that started the trend
- Released a fast MVP to gather adoption metrics and user input
- Presented feature development roadmap to users for feedback
Users Needed To...
- Navigate effectively through a large library of known malicious techniques
- Visualize attack patterns known to be used by specific threatening groups
- Compare tactics among groups to identify similarities, prevalence, and trends
- Record and consider which techniques are of greatest risk to the organization
- Import existing MITRE ATT&CK views for reference in the app
- Narrow techniques by prevalence and what technologies they target
Design & Leadership Challenges
- Balancing developer bandwidth, PM expectations, and tight business timeline
- Condensing 150+ ATT&CK techniques into a navigable, hierarchical interface
- Navigating many layers of information without confusing users
- Creating something unique and usable when no strong standards existed yet
- Negotiating for usability improvements without bloating scope
- Securing stakeholder buy-in for a 3-release roadmap that exceeded competitor feature sets
Development Story
Well before this feature could begin development, our project manager had already received many requests from threat intelligence analysts for a way to utilize MITRE ATT&CK Navigator's many tactics, techniques, and sub-techniques in their day-to-day work. Competitors had moved on the market's interest, but their solutions were cumbersome, limited, or difficult to learn. Many had tried to solve the challenge of presenting the large library in a useful and digestible way, but none of our rivals had yet created a robust offering.
As such, this project began with reviewing our customers' requests and investigating tools that had touched upon the ATT&CK problem. The new module and its widgets would be distinctly different from anything existing in our application, so I designed a solution that would fulfill the users' needs while still fitting naturally into the system's established aesthetics and behaviors. Unique aspects of the vision would necessitate the development of new reusable components and fine-tuned behaviors throughout the experience, so I worked with the engineering team to ensure the design could be broken apart and developed within the business’ release schedule. I also worked with the UX analyst maintaining the design system to incorporate the new components and plan for how they could be used elsewhere as we improved other older screens within the software.
The new ATT&CK visualizer was developed in three releases alongside other functionality. Though the first round focused on a limited MVP (minimum valuable product) to ensure an immediate benefit, I was able to design the early interface to be scalable for much of the other functionality I had seen in my research and knew could be on the horizon. Designing so far ahead of the first release helped our PM to socialize and schedule upcoming enhancements with stakeholders and helped our developers to plan for where the screen and its components would need to expand in the future.
With so many new screens and detailed interactions added, I helped to test each draft implementation to hunt for inconsistencies, gaps in the experience, or strange behaviors that needed adjustment. The UX team had been working to establish usability and design reviews as part of the QA process for a couple releases, and this project offered ample proof of their value given the feature's low rate of customer bugs after release.
After a modest first release, we quickly followed up with many improvements in the second and third versions and had a well-rounded set of features in under a year. As adoption ramped up, customers praised the new ATT&CK screens and offered ideas for yet more functionality they wanted to see added, which were planned in parallel with other efforts in subsequent development cycles. The original design held up well, with no need for invasive revisions since I had designed it to scale up from the beginning.
Gallery
OUTCOMES
Outcomes
- Roadmap designs received positive feedback from enterprise customers during stakeholder reviews
- The development team quickly filled the gap in the business portfolio
- Launched with zero critical bugs in the first quarter post-release
- Users offered feedback and ideas for each release
- The feature grew quickly, improving our offering as compared to competitors
Key Takeaway
Designing for scale upfront by investing in reusable components and a flexible information architecture prevented costly redesigns later. This approach allowed the feature to evolve over three releases without major revisions or urgent bugs, saving development time.
