2.0 design: Behind the scenes

Chapter 1: Accessibility

Colours

In any monitoring or status-driven software, the right color perception alongside the right data is the most crucial thing. It allows you to focus on things that matter.

With 2.0, we adjusted our color palette to be fully accessible even for main types of color-blindness, which is relevant to 8-10% of the population. The added contrast will also help presentation quality on low-end TVs and monitors.

The picture below is a part of our research on possible color combinations:

Icons

Besides colors, I would like to introduce you to our new severity icons.
Icons come in handy when you do not want to waste a lot of screen real estate and you have a lot of relevant information to display. Each of the new icons inherited the severity color and has a unique shape to guide you through dense data.

"Optimized colors for colorblindness is an indication of a good design and is a big help for users with vision imperfections. Combine that with unique shape and symbol for each severity icon and your users will love your product.”

Jan Rytir
Lead Product Designer at SolarWinds
Jan (Honza) is on LinkedIn

‍

Tiny little details worth mentioning as well are:

The inverted contrast on all views. The background was set to be darker than its content to drive focus on information.
Re-named views make them more self-explanatory
Adjusted typography to optimize text legibility and to follow its importance
The good old footer was not providing enough value related to the space it was consuming, so we had to say goodbye to the footer.
The new menu along with top bar better illustrates navigation area separated from content
Customers with larger environments, 2 and more vCenters, will have easier access to specific vCenter views using the new drop-down.

Chapter 2: Dashboard

Dashboards play the most important role in our daily tasks. They allow us to see the current status at a glance. With 2.0, it now includes trending and analysis over time.

Our number one goal for the new dashboard was to create an actionable representation of anything that's going on in your environment. Going from high-level and most important information on the top to more detailed views at the bottom.

What's new:

New Issues by severity
The previous pie-chart was good at giving you the high-level black&white overview of what is good and bad. Its substitute tells you a better story about the environment shape. Wherever you click, you will get results that you want.

New tiles
Re-imagined tiles with major KPIs are now more prominent. Each tile contains spark-line with a history of a given metric to give you a bigger picture in addition to current status.

New widget for issues per layer

One of our most recent additions gets even better!
It is like a small to-do list for any virtualization layer so you can focus on thighs that matter. Runecast will even pat your back when there are no issues left for a given layer!

New widget with the most problematic areas

All new widget called “Hosts with most issues” will pinpoint the most problematic hosts in your environment.

Revisited view for your connected vCenters
The consolidated list of your connected vCenters is taking up less real estate. When expanded, it shows more details, including statistics of the latest scan and all its analyzed child objects.

“Great dashboard design tells at glance what needs the immediate attention, while maintaining context of the overall environment so that users can prioritize the problem-solving steps.”

Jan Rytir
Lead Product Designer at SolarWinds

Chapter 3: Issue list enhancements

Let’s also have a look at what was changed in 2.0

New filtering
Filtering is way faster now! Instead of having all values checked by default, we put you in control of what is displayed. It may not sound like much, but give it a try. You will perform all the filtering tasks faster than ever.

Pagination
For “all issues” view where Runecast Analyzer displays most of the data, a new pagination was introduced for a table view. It makes things more structured and the page loads faster.

Ignore button has moved
No worries, you can still filter out any issues you would like. However, since Ignore button was a duplicated element in the grid, we moved it inside the expanded view of each issue. It is more contextual and easier on an eye.