pic

The Good, The Bad, and The UI

The Evident Security Platform (ESP) is already the premier AWS security monitoring software, but now it’s even better. We here in the product design department at Evident.io recently overhauled the look, feel, and function of the dashboard, making it easier to use than ever.

In the old dashboard, a map dominated the browser window, laden with over-sized circles which plotted out the seven server regions semi-geographically:

pic

I’m thinkin’ swiss cheese, how about you?

There were a lot of problems with this design. Aside from the functional issues, there was a lot more ink on the page than necessary, and a lot of what we (and Tufte) lovingly refer to as “chartjunk” – fancy graphics that distract the viewer from the real information there to be digested.

You can see below how much of the page is dominated with blocks of color that don’t communicate much or very accurate information. When we strip away the extraneous stuff, we can see even more plainly how chaotic the design is, but also how simply these pieces of information could be displayed:

pic

What we’ve got here, is failure to communicate.

We started by seriously reevaluating the amount of real estate given to the map, and how it could be better partitioned to accommodate everything a user might want to see in first thing in the morning. Then we set out to transform our old dashboard into a command center, and we arrived at this:

pic

So fresh and so clean, clean.

In as few words as possible, the aesthetic beauty of the new dashboard comes from its modular design, intentional use of color, and generous whitespace.

It’s a Mod, Mod, Mod, Mod World

Modular design is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems (thank you, Wikipedia). This is no new concept – it’s been used in the design of automobiles, architecture, and furniture for centuries. IKEA has basically built their brand on the pillars of modular design.

When we re-partition the data, the hierarchy of information becomes much less aggressive. The old dashboard put a lot of visual weight through relative size and color, and thereby implied significance on the regions section. Simply giving all sections of information equitable real estate on the page reestablishes the importance of each, and their role in contributing to the bigger picture.

Through the implementation of modular design, the overall tone of the page has really changed. Although the use of strokes, boxes, and lines is almost nonexistent, the orthogonal quality of the design is still very apparent.

Quadrilateral design bears an inherent stability, promoting feelings of organization – a distinct departure from the chaotic placement of the bubbles. This comes from a combination of nearly subconscious reactions to nuances. Horizontal lines are calming and promote feelings of placidity; vertical lines imply structure and stability.

pic

Is it 5 o’clock yet?

Aside from our human response, compartmentalizing the dashboard in this way had one very important benefit. Once we’d established the framework, so long as it fit into its ascribed box, the information could take on any combination of text and images, at any size, and always remain clearly visible alongside the other sections.

This opened the door for very basic user customization, making the dashboard a tool that can be more tailored to your specific needs. A nifty expandable window on the left exposes a whole gaggle of visualization options:

pic

Spoons! So many spoons, so little time.

The Shapes of Wrath

Unfortunately, donut charts just aren’t the best way of visually comparing more than two sets of information. We swapped them out for bar charts, which are much more representationally accurate, require¬†much less space, and take to a modular design like a fish to water.

We applied these to the Summary and Regions sections. Below, I’ve illustrated the biggest issue with donut charts – it’s a lot harder to gauge the length of an arc versus the length of a straight line, thus it’s harder to compare values:

pic

Mmmmm… donuts…

And speaking of big ugly shapes, look at this rainbow of rounded rectangles. The summary section in the old dashboard is a great example of gratuitously used color. Don’t get me wrong – the color is serving a purpose, in that it quickly denotes the severity of the alerts value it encases, but its ginormous size isn’t conveying any new information that its pigmentation hasn’t already provided.

To solve this issue, I decided to use it as an opportunity to implement a quick reference icon system that coupled our colors with simple shapes:

pic

 

Rather than leave it a simple counter, we decided to give this section more usefulness. We redesigned this module so that the ink on the page was directly influenced by the relative number of alerts. This way, the use of color is actually conveying information about the relationship between alert totals. When there are more medium threats than high threats, there should be more orange on the page than red:

pic

“The colors, Duke, the colors!”

The Blank and the Beautiful

Reexamining our use of color definitely made a big impact on the overall aesthetic of the new dashboard, but we’ve also taken special care to reduce, minimize, and visually consolidate wherever possible, opting for lightweight fonts, thin barcharts, and lots of much-needed breathing room.

In art theory, it’s said that the eyes (and brain) like a certain balance of negative space in which it can rest, and this concept is even more important when it comes to absorbing information:

pic

With space wide open… up on the dashboard… welcome to this page I’ll show you everything.

The amount of contrast and proximity of objects to one another definitely influence the tone of a design and thereby the response of the user interacting with it. Look at these show posters and invitation below for example. Their respective designs fall on either end of the spectrum in both contrast and intricacy. And so it follows, they are meant to evoke two different ranges of emotions relative to the nature of the information – in this case, either chaotic, or calm:

pic

(designs 1, 3-4 by Lauren Holtermann; Dax Riggs poster courtesy Ronnie Lewis)

Now take a moment and consider, which of those emotions would you prefer to experience while looking at critical security management data at 7:00am on a Monday?
That’s really what it comes down to.

We may have worked around bugs, customer feedback, browser compatibility, and our own input, but when it really came down to it, most of the redesign can be summed up in two questions: How does this affect the user? Followed by: Now how can we make it better?