PG Console

Case Study

PG Console is the core technology of PLUMgrid is a simple self-service dashboard, users can manage their Virtual Domains and customize them to their needs. Through an object-oriented interface, users can drag and drop network components and define network topologies, create templates, set up security policies, and connect workloads to the Virtual Domains or external physical devices. Also, users have a view of their physical resources in Data Centers.

Old and New Skin

A glance at the makeover, console built-in 2011 to a new look and feel in 2015

This is how the PG Console looked

PG Console In Action

Cloud engineers working on network topologies

Zone View Tab

Provide a view of the physical resources by computer node, the settings of the VNF's (Virtual Network Functions) to define Virtual Domains.

Virtual Domain Tab

Gives cloud operators the ability to create private and public virtual networks, through the VNF components, applied security policies, View statistics, and operations management by Virtual Domains.

Admin Tab

Allows security and administration roles, debug and general configuration of the app.

What was the challenge?

I had this UI Design mission directly from the CTO, which consisted of changing the visual perception of the product to our users through the PG console the principal Graphical User Interface of our technology. In an economical and agile manner. Ensuring consistency throughout the application without changing the information architecture and functionalities. Just changing the skin.

Fundamental Considerations

I observed that the engineers used a large number of UI libraries with different languages.
I had several interviews and learning sessions with the architects and network engineers in order to understand the UI and why they made some UX and visual decisions.
A user persona is a trained user in operational and admin network tasks that uses other operational consoles like OpenStack UI.
Basically, the task consisted of changing the CSS for developers.

UI Goals

Conceptual models. Resist use of descriptors such as “pretty”, “polished” etc. All design decisions should be justifiable - nothing is arbitrary. "Useful, usable, delightful” is a useful model.

Interaction Design. Use of a widget library (including usage rules and guidelines) would help appropriate selection of UI widgets and maintain consistency. Judicious use of animated transitions can help the user understand state changes but should not be used because they are “cool”.

Labeling. For simplicity and consistency purposes, we should aim to have a library of concepts and terms we use in our UI (and elsewhere). Define and name the iconic components of the product - prioritize and/or nest secondary, complex, advanced topics. Label them consistently and repeatedly throughout the UI.

Visual design (style & branding). Corporate principles and values can be used to guide design decisions such as the use of fonts, colors, icons, branding elements, and the tone of voice of messages and instructions etc. Make networks look good, tidy, neat organized. It is the core of our technology and the reflection of the business. Look and feel following flat design principles.

UI Elements Consistency

I began by uniforming the typography, attributes, and determining the size rules across. I chose Helvetica family for simplicity and cleanness nothing fancy.

I established constraints for operational tables and canvas. Heights and widths for buttons and behaviors such as inactive, disable, active, and hover state. At side panel navigation I stressed the hierarchical content organization and eliminate third and fourth nested elements. Clean up the overuse of icons.

This type of IT product has a very strong designation for red, yellow, and green colors to maintain the situation awareness in case of alerts, status, and anomalies. The readability of data is the priority so I decided to use the gray gamma and the standard blue color as a common selection of elements by the user.

The color code criteria was chosen by marketing folks and network engineers during the console construction in its first days so I cleaned up the mix of colors without UX meaning, I re-branded only the signature PLUMgrid elements such as network icons some of them are already recognized for the virtual network industry, but the rounded shape is only used in this company. The purple color from the logo was missed during different people handle it so the right color code was recovered. Also, the purple color was wrongly and overused it for navigational elements, buttons, headers, links, highlight fields, etc.

For web apps, consoles, and dashboards I don't recommend using the brand color for UX purposes. Use the standards recognized by users and keep it consistently across the app.

I redesigned the icons following the flat design principle and creating a family.

Separated the three main tabs by color was left, Zone Management tab in light blue to associate it with the virtual world or sky. Virtual Domain Tab brand purple due it is the center/unit of the technology. The Admin Tab in green color temporarily (It must move to another location).

By color and style determinate the search box functionality.

I set up measures, spacing, and styles for pop ups, popovers, tooltips, dialogue boxes, checkboxes, dropdowns, combo box, tables, and notifications.

UI Elements Results

Next Steps

After reviewing the UI makeover with the engineers everything was looking pretty good and easily assimilated but not decision to start with the CSS changes right away, so I made a push out with the help of one of my mentors Max Bielenberg using a very useful tool a browser extension for Chrome called Stylish.

We applied the aesthetics changes to the PG Console modifying the CSS with the browser showing the power of the Visual Design applied right away in front of people's eyes. And how easy will be to implement those changes only over the style sheet. That day decision was made to change the CSS in master and spread the Jira tickets!.

Finals UI

Zone Management Tab

Tab tittle was changed to Zone Management because it was more appropriated to the content and actions