Dashboard UI
"The product’s functionality and beautiful, intuitive interface make it a worthy contender in this emerging space." - Matthew Hreben
XM provides companies with invaluable insight into their security weaknesses, and also delivers guidance on remediation. XM imitates real-life cyber threats and simulates their behaviour to allow security teams to understand where their network is vulnerable - it then produces detailed reporting and metrics on the outcomes of these attacks with recommended remediation advice that allows security teams to effectively manage the overall security of their network.
XM are doing things that have not been done before and designers played a huge role for the overall success of the product. We were given a very amazing opportunity to really shape the software and solve these complex problems together with the client. For 18 months the product has evolved from a rough proof of concept to commercial success that has raised over $32 million.
As the Lead UI designer on this project and I was responsible for the art direction for the brand, user interface for the platform, interaction design and assisted with user experience flows.
"The product’s functionality and beautiful, intuitive interface make it a worthy contender in this emerging space." - Matthew Hreben
%20copy%203.png)
%20copy%202.png)
.gif)
%20copy%203.png)
.png)
%20copy%202.png)
The XM Design System includes the resources to create user interfaces that are consistent with XM’s visual design language and best practices. The designs system is the source of truth for the user interface design, providing design guidelines, patterns and component blueprints for both developers and designers. The XM Design System is a ‘living’ document that will evolve as the HaXM product evolves. Here is the snippet of the design system.
"The product’s functionality and beautiful, intuitive interface make it a worthy contender in this emerging space." - Matthew Hreben
For the purpose of brevity, one key feature that will be focused on is the 'Battleground'. Similarly to a map, attack simulations are visualised in what's called the 'Battleground'. It is where users can gain a deeper understanding on how a cyber attack moves through their network.
An early version of the Battleground had been developed as a PoC, though it needed to be redesigned to accomodate new features. A key problem was the former design could only display networks with 100 computers. However, XM clients required the Battleground to display networks with 10,000+ computers.
Image above: Previous battleground
accomodating only small computer networks.
The project required weekly sprints with the stakeholder. Discovery workshops were conducted to define the problem (there were many) and provide solutions to the product.
Image below: System health graph animation / slider
.png)
Image below: workflow & design experimentation
.jpg)
Image above: experimentation of visuals / nodes
The latest solution features a zoomable viewport that can display 100,000+ of devices, display attacks in real-time, and features advanced filtering options. The left panel displays contextual information, allowing the user to 'dig deeper' to understand the details of an attack vector. Feedback from end users indicate the Battleground is the most 'liked' feature within XM.
For the purpose of brevity, one key feature that will be focused on is the 'Battleground'. Similarly to a map, attack simulations are visualised in what's called the 'Battleground'. It is where users can gain a deeper understanding on how a cyber attack moves through their network. An early version of the Battleground had been developed as a PoC, though it needed to be redesigned to accomodate new features. A key problem was the former design could only display networks with 100 computers. However, XM clients required the Battleground to display networks with 10,000+ computers.
Involved in countless scoping and co-design workshops with subject matter experts.Sent out System Usability Scale (SUS) surveys to reach users around the world to reduce the level of assumptions. Research existing map interaction, establish a visual language.
The platform also required the treatment of a light UI. For features such as printing a PDF. We allowed the user to switch between interfaces. It was a great way to stress test the colour palette and legibility of the typography.
Image below: example of light UI
Report page
