(Image 1)Screenshot of what is currently in live code, showing all 15 locations turned on. This was a requirement going GA that we needed a way to show 15 locations, thus requiring 15 unique colors. The first 8 colors from my data visualization palette are color blind accessible, however due to limitations the remaining are not color blind accessible, but are at least distinguishable to the normal eye.
(Image 2) Instead of traditional red and green striped bars to show availability, which in addition to being visually hard to look at are also very hard to distinguish for a color blind user, I opted for a more subtle approach by showcasing only the down time in a more muted red, while indicating if the app has been fully available with a check mark.
(Image 3) To show Usage for particular synthetic tests, we incorporated a microinteraction that involves the card flipping over to review the usage information. The card shows a segmented usage bar to illustrate how much you have used of your alloted usage, compared to how much is available. You are also able to edit the test in particular (to change how much it is using) from the pencil icon.
(Image 4) This design (for a maximum of 8 locations) shows a way to demonstrate 50th, 95th and 99th percentiles on the response time graph and compare it to location lines and an average.
(Image 5) All aspects of the monitoring page were redlined manually to best illustrate the interactions, level of detail, and organization of the information. This example of the cards shows how all the various forms and versions of the cards were illustrated to make it as easy as possible to develop.