https://www.alexf.rocks/music daily 0.75 2014-10-07 https://www.alexf.rocks/home daily 1.0 2023-07-28 https://www.alexf.rocks/contact daily 0.75 2018-12-12 https://www.alexf.rocks/layeredcontext daily 0.75 2023-07-06 https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688530355840-KVWZQH9LVJCHQW5DRDQ0/Group+1665.png LayeredContext - Dumping all/many columns on screen We dumped most or all of the columns on the screen to see how bad it would be and to slowly start to eliminate information and observe any improvements. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688530357146-YPZ3H8SU72DGAHB1ESVE/Security+Context+concept.png LayeredContext - An early experiment with heat maps https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688530355811-COQ7R5OO5E5AK8UC30DA/Frame+5734.png LayeredContext https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688530357228-U6HJ61ABIKHWOJL9D99J/Screen+Shot+2023-06-17+at+9.32.04+PM.png LayeredContext https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688531084045-5BD59CP8T40QT43763LP/Screenshot+2023-07-04+at+11.46.32+PM.png LayeredContext - The Main Layered Context Screen Only a few columns are shown in this default layout: enough to allow the user to understand which resource is being examined, and what the main security issues are for this resource. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688531085509-NW8FJ202Z3L7XFH2YUTM/Screenshot+2023-07-04+at+11.47.19+PM.png LayeredContext - The Misconfigurations Drawer Following the paradigm of progressive disclosure, the main layered context screen shows that there are some number of critical and high severity misconfigurations. Click on that data, and you will see this side blade slide in, opened to the Misconfigurations tab. The Misconfigurations tab shows a prioritized list of misconfigurations for the particular resource in question. If even further details are required, then the user can navigate from this blade to the internal page dedicated to this vulnerability, which lists a number of details about the vulnerability as well as other resources affected byit. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688531083958-5QVMD0B3N3X6USUEBGMG/Screen+Shot+2023-06-17+at+9.34.19+PM.png LayeredContext - Advanced Filtering Advanced filters allow the user to slice and dice the data so that the overall scope of the layered context screen can be more focused. This is how you narrow down a list of 5 million resources into only a dozen or so that you really care about, for one specific task. https://www.alexf.rocks/apa daily 0.75 2023-09-19 https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688580896383-M46U50OKW9N0LK424X83/Overlay+Attack+Paths.png APA https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542837847-DJK5PI7GKRKG8UO6VY4D/All+Attack+Paths.png APA https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688535325573-064TBSQSIKY9IX48BURD/Screenshot+2023-07-05+at+1.13.25+AM.png APA We have to provide evidence within the UI that this is a legitimate path. We have to show how that node could be compromised along this path, and how it could compromise the next resource link in the chain that ends with business crown jewel resources and data. That context is data that we had available, and had already stored during the initial path mapping on the back end. We just had to figure out an initial way to display this. After much debate taking into account the many project parameters - such as our time frame to deliver, that this is v1, the exponential increase in size if certain parameters were to be included, etc.), and trying to make sure that the security evidence was displayed simply, yet comprehensively - and discussing ideas with users throughout the entire process, we settled on a locked card paradigm for v1. A simple example of the locked card paradigm on the left. The card, which displays security information, is scroll-locked to the node above it. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688580896383-M46U50OKW9N0LK424X83/Overlay+Attack+Paths.png APA - Early Concept A very early iteration of what a multi-path graph might look like https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542837847-DJK5PI7GKRKG8UO6VY4D/All+Attack+Paths.png APA - Early Concept Another early concept, in this case the attack paths are isolated on the screen, reducing noise. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542611508-XK3BYNYM52KGRP4TTJ1F/Screen+Shot+2023-06-17+at+9.39.47+PM.png APA - Lo-Fi Concepts in Miro Here, because I had no requirements early on, I made a number of assumptions so that I could continue the work while requirements were gathered. The assumptions are outlined, and the diagrams below are simple, lo-fi diagrams of a few different scenarios and use cases based on those assumptions. These were used to gather initial feedback from users and stakeholders. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542924563-YZBELHHOI67GHKF0PJES/Start+Here+-+Multi-Path+10.png APA - Hi-Fi Multi-path Mockups This is a high fidelity mockup of a potential multi-path Attack Path Analysis screen. This is based on a mix of assumptions and user feedback. The purpose was to use this to illustrate potential shortcomings both in the design and the back-end architecture that needed to be addressed in the requirements and in future designs. Here, we see the diagram, with no specific path selected. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542556493-4GS4TD85SFNWMTA2VOHK/Multi-Path+11.png APA - Hi-Fi Multi-path Mockups Same mockups, but a specific attack path has been selected. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542556214-BHKLHYPV8T4CWV1XW2PZ/Q3+-+LC+3.png APA - Multi-path displayed in the side blade We don’t want to force the user into a specific workflow that takes them out of their current workflow or experience, so we wanted Attack Paths accessible from areas other than the main Attack Paths feature page. To this end we’ve included an Attack Paths tab in the side blade, which the user can view in almost any part of the ICS UI. Because this is condensed information, based on the principle of progressive disclosure, this blade has a listing of the attack paths that this particular resource is a part of, and when a path is selected, we display that path. In this side blade we experimented with displaying all of the relevant paths in the single diagram, similar to the main big mockup. We decided that this might not be the best way and played with single paths in the blade as well. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542507070-CQTPN39GRKBWH6ON3WJT/APA+v2.png APA - Mockup of the Resource Blade - Single Paths Here we tried to simplify the diagram since it is in a smaller space. Rather than having multiple paths in a single diagram in this space we had a listing of all of the paths, and the user could view them one at a time. In addition we employed another annotated method of simplifying long paths such that there would be a maximum number of nodes seen on the screen at a time. While we wouldn’t do this with the full path diagrams, it’s perfectly acceptable in this case, and the user loses nothing (hovering over the pills gives a list of the nodes that are condensed into a single pill). https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542557381-0JPKEJ5P7W7E6R0R8C0M/Screenshot+2023-07-05+at+12.42.47+AM.png APA - Single Path, annotated This, taken from the design guide, this displays how the diagrams are to be annotated. For each resource or node of interest (the source, target, and the one that we are focusing on) we are displaying that node, plus it’s neighbors. Everything else can be compacted into a pill. Because the side blade is designed to contain summary information and act as the stepping stone between a resource table and the full feature details, the condensed information is the correct and necessary step within the progressive disclosure design paradigm. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/614a8ae1-2017-41ee-9f57-a609ead82cb5/APA+Workflow+1+-+Table.png APA - The Workflow After discussions with users on how they might use this feature, and how it would fit into their daily tasks, we decided that we didn't want to force users into a single navigation paradigm. This could take users away from their natural workflow and be disruptive. We wanted the users to be able to see resource-related attack paths as they went about their daily tasks. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/fde9a1e9-efc4-4d33-99ad-9a44435d3d82/APAblur.png APA - Attack path analysis https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/dc61b8e8-88ff-4386-b4de-cf3912e94fa1/Screen+Shot+2023-06-17+at+8.44.24+PM.png APA - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.alexf.rocks/relatedresources daily 0.75 2023-07-06 https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688622161885-ILXRAEZWEAF18ULRQ0GY/RR+-+Initial+Page%281%29.png RelatedResources - Make it stand out The Related Resources screen, expanded out through several layers of related resources. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1c6edf11-7ee0-47af-a4a8-d09e996f6004/RR+-+Security+View.png RelatedResources - Make it stand out The Related Resources screen with security information turned on. https://www.alexf.rocks/apa-old daily 0.75 2023-09-19 https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/dc61b8e8-88ff-4386-b4de-cf3912e94fa1/Screen+Shot+2023-06-17+at+8.44.24+PM.png APA - OLD - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/614a8ae1-2017-41ee-9f57-a609ead82cb5/APA+Workflow+1+-+Table.png APA - OLD - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688535325573-064TBSQSIKY9IX48BURD/Screenshot+2023-07-05+at+1.13.25+AM.png APA - OLD Below each node we show the list of potential vulnerabilities and misconfigurations that could be used to compromise that resource in order for it to be part of this attack chain, or path. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688580896383-M46U50OKW9N0LK424X83/Overlay+Attack+Paths.png APA - OLD - Early Concept (Copy) A very early iteration of what a multi-path graph might look like https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542837847-DJK5PI7GKRKG8UO6VY4D/All+Attack+Paths.png APA - OLD - Early Concept (Copy) Another early concept, in this case the attack paths are isolated on the screen, reducing noise. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542611508-XK3BYNYM52KGRP4TTJ1F/Screen+Shot+2023-06-17+at+9.39.47+PM.png APA - OLD - Lo-Fi Concepts in Miro (Copy) Here, because I had no requirements early on, I made a number of assumptions so that I could continue the work while requirements were gathered. The assumptions are outlined, and the diagrams below are simple, lo-fi diagrams of a few different scenarios and use cases based on those assumptions. These were used to gather initial feedback from users and stakeholders. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542924563-YZBELHHOI67GHKF0PJES/Start+Here+-+Multi-Path+10.png APA - OLD - Hi-Fi Multi-path Mockups (Copy) This is a high fidelity mockup of a potential multi-path Attack Path Analysis screen. This is based on a mix of assumptions and user feedback. The purpose was to use this to illustrate potential shortcomings both in the design and the back-end architecture that needed to be addressed in the requirements and in future designs. Here, we see the diagram, with no specific path selected. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542556493-4GS4TD85SFNWMTA2VOHK/Multi-Path+11.png APA - OLD - Hi-Fi Multi-path Mockups (Copy) Same mockups, but a specific attack path has been selected. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542556214-BHKLHYPV8T4CWV1XW2PZ/Q3+-+LC+3.png APA - OLD - Multi-path displayed in the side blade (Copy) We don’t want to force the user into a specific workflow that takes them out of their current workflow or experience, so we wanted Attack Paths accessible from areas other than the main Attack Paths feature page. To this end we’ve included an Attack Paths tab in the side blade, which the user can view in almost any part of the ICS UI. Because this is condensed information, based on the principle of progressive disclosure, this blade has a listing of the attack paths that this particular resource is a part of, and when a path is selected, we display that path. In this side blade we experimented with displaying all of the relevant paths in the single diagram, similar to the main big mockup. We decided that this might not be the best way and played with single paths in the blade as well. https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542507070-CQTPN39GRKBWH6ON3WJT/APA+v2.png APA - OLD - Mockup of the Resource Blade - Single Paths (Copy) Here we tried to simplify the diagram since it is in a smaller space. Rather than having multiple paths in a single diagram in this space we had a listing of all of the paths, and the user could view them one at a time. In addition we employed another annotated method of simplifying long paths such that there would be a maximum number of nodes seen on the screen at a time. While we wouldn’t do this with the full path diagrams, it’s perfectly acceptable in this case, and the user loses nothing (hovering over the pills gives a list of the nodes that are condensed into a single pill). https://images.squarespace-cdn.com/content/v1/59eb8922d55b414ff55f0284/1688542557381-0JPKEJ5P7W7E6R0R8C0M/Screenshot+2023-07-05+at+12.42.47+AM.png APA - OLD - Single Path, annotated (Copy) This, taken from the design guide, this displays how the diagrams are to be annotated. For each resource or node of interest (the source, target, and the one that we are focusing on) we are displaying that node, plus it’s neighbors. Everything else can be compacted into a pill. Because the side blade is designed to contain summary information and act as the stepping stone between a resource table and the full feature details, the condensed information is the correct and necessary step within the progressive disclosure design paradigm.