Loading...

BLUEMIX AVAILABILITY
MONITORING

BAM helps DevOps teams ensure their applications are always available and meeting user expectations for response time as they roll out continuous updates.

THE DESIGN

I've been on the BAM team at IBM for over a year now, and we finally (officially!) went GA on Bluemix. While I can't share everything, here are some of the major designs I created for our product in both a dark and light theme. I designed the main monitoring page that greets the user in Bluemix Availability Monitoring, which includes a map visualization, complex line graph visualization that utilizes a data visualization palette I created, newly designed cards as well as several tables.

PROJECT DETAILS

TEAM Bluemix Availability Monitoring

DATE March 2016

STATUS GA November 2016

Several aspects of this page evolved over time as we started to see our users interact with the design. Our original design was almost devoid of tooltips or hover cues, trying to create a more mobile friendly experience. However watching our users, we noticed they were very click hesitant.
From that, we decided to create a tooltip system that gives the next level of information, but not all of the information from clicking through in order to prompt users to interact with more elements. We also implemented a zoom functionality on the map, and revised the response time graph microinteractions mulitple times.


(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.


 Previous  All works Next