Out of the box : Device Viz

Out of the box

With the business focus on improving the security business, we were looking at the areas where we as a design team can impact the business. The on-box management for the firewalls has been a pain-point and a major competitive loss.

I started looking at the existing product to identify the areas for improvement, spoke with customers, PLMs and TMEs and zeroed down to the below broad areas:

➜ Discoverability: Product had great features and capabilities but it was very hard to discover and configure those features. Customers were resorting to CLI based configurations.

➜ Speed and Performance: While the devices themselves are pretty fast, the management tool was very slow.

This case study showcases ability to discover unarticulated needs, facilitate and run workshops along with data visualization and information architecture skills.

The device visualization solution caters to all of these different devices and more.

Understanding the unsaid and the unobvious

Equipped with this understanding, I dove deeper to peel the layers, find the unarticulated needs, and specific areas to be fixed.

Focus area 1

Discoverability

Information architecture reflected the CLI structure, which lead to repetitive functionalities that can be configured in different places.
Multi-layered hierarchies which were redundant and were not integrated across the product
Basic device settings and initial configuration flows were hidden
Device and port monitoring options which was the most common need was hidden and present in two different places.

focus Area 2

Speed & Performance

During analyzing this, I discovered that the performance issue is across almost all the on-box management tools and is a major pain-point across the organization.
All of these on-box management products were using a device visualization component that was resource heavy. It had a realistic 3D and 360 view interactive model that was not adding a lot of value to the user but using up lot of space on the device.
The device chassis 3d model had static bitmap images which at times had inadvertently gave a sense of wrong status.
Due to lack of space on the device allocated for the management system, the space management for monitoring and log data was not addressed.

Fixing the broken wall

After framing the problem right, I also had to keep in mind the technology and space limitations on the device. I had hard boundaries inside which I had to innovate. With these considerations in mind and being totally aware of what has to be fixed I moved on to find solutions.

Ran a workshop involving the PLMs, TMEs, a couple of designers and real users (in house network administrators) and conducted a card sorting exercise in order to find the right information architecture.
In this process I also found out that there were many features (pages) in the product that nobody knew what their role was.
Dug deeper to understand the essential metrics and elements that are monitored, their frequency and their priorities.

information architecture analysis and proposal

Solutions

With the research findings and having a good understanding of the mental models the proposed solution was as below:

FOCUS AREA 1

Updated Information Architecture

Updated information architecture which is task focussed and not too deep.
A quick set-up dash-let in the dashboard that lists the common tasks needed initially and opens up a guided wizard flow to get set up.

Device Chassis visualization explorations

FOCUS AREA 2

Device Chassis Visualization System

An extensive device / chassis visualization system that can be programmatically built based on the device and extensible across all the SKUs (devices), including the ones that have line cards, multiple devices and stacked devices.
The Chassis visualization system is a flexible and scalable method to organize and monitor the status of various device elements like ports, led’s, fans etc.
The chassis view is abstracted to a set of common elements that can assembled together programmatically to represent any number of unique device types. The elements are created using responsive and scalable SVG icons to allow for scalability between small and large device types.
The important elements to be monitored are ports, line cards, fans, LEDs, and other common features across chassis and individual devices. These elements could be assembled together programmatically to form an abstracted but complete device visualization.
This visualization also shows how the device elements are configured into virtual entities like link aggregation groups (LAGs), VLANs, Security Zones, and other groupings.
By keeping the chassis view an abstracted collection of modular elements, the view has flexibility to clearly show alerts and errors by highlighting affected elements with severity colors. The user can easily see the problem areas in the device or chassis by the color and type of element affected.

Device Chassis visualization explorations

Outcome

An unexpected favorable outcome was that the device chassis visualization system could also be used in the other platform solutions that include element management and branch management.
In order to accommodate those use cases, few updates are being done to the visualization system and will be implemented once they are all tested.
With just the improved IA and improvements with the quick set up wizards, the JWeb product had a 90% + approval rating from the users.

A survey was sent out across 60 users with questions specifically focussed on improvements and more than 90 % of the users strongly agreed there was a marked improvement in the experience and the sales people felt very confident to go aggressively.

This project was also awarded a CEO excellence award in 2017

visualization styleguide

Visualization – Devices

VISUALIZATION – DEVICES

Out of the box

With the business focus on improving the security business, we were looking at the areas where we as a design team can impact the business. The on-box management for the firewalls has been a pain-point and a major competitive loss.

I started looking at the existing product to identify the areas for improvement, spoke with customers, PLMs and TMEs and zeroed down to the below broad areas:

➜ Discoverability: Product had great features and capabilities but it was very hard to discover and configure those features. Customers were resorting to CLI based configurations.

➜ Speed and Performance: While the devices themselves are pretty fast, the management tool was very slow.

The device visualization solution caters to all of these different devices and more.

Understanding the unsaid and the unobvious

Equipped with this understanding, I dove deeper to peel the layers, find the unarticulated needs, and specific areas to be fixed.

Focus area 1

Discoverability

Information architecture reflected the CLI structure, which lead to repetitive functionalities that can be configured in different places.

Multi-layered hierarchies which were redundant and were not integrated across the product

Basic device settings and initial configuration flows were hidden

Device and port monitoring options which was the most common need was hidden and present in two different places.

focus Area 2

Speed & Performance

During analyzing this, I discovered that the performance issue is across almost all the on-box management tools and is a major pain-point across the organization.

All of these on-box management products were using a device visualization component that was resource heavy. It had a realistic 3D and 360 view interactive model that was not adding a lot of value to the user but using up lot of space on the device.

The device chassis 3d model had static bitmap images which at times had inadvertently gave a sense of wrong status.

Due to lack of space on the device allocated for the management system, the space management for monitoring and log data was not addressed.

Fixing the broken wall

After framing the problem right, I also had to keep in mind the technology and space limitations on the device. I had hard boundaries inside which I had to innovate. With these considerations in mind and being totally aware of what has to be fixed I moved on to find solutions.

information architecture analysis and proposal

Solutions

With the research findings and having a good understanding of the mental models the proposed solution was as below:

FOCUS AREA 1

Updated Information Architecture

Updated information architecture which is task focussed and not too deep.

A quick set-up dash-let in the dashboard that lists the common tasks needed initially and opens up a guided wizard flow to get set up.

Device Chassis visualization explorations

Device Chassis visualization explorations

Device Chassis visualization explorations

Device Chassis visualization explorations

FOCUS AREA 2

Device Chassis Visualization System

An extensive device / chassis visualization system that can be programmatically built based on the device and extensible across all the SKUs (devices), including the ones that have line cards, multiple devices and stacked devices.

The Chassis visualization system is a flexible and scalable method to organize and monitor the status of various device elements like ports, led’s, fans etc.

The chassis view is abstracted to a set of common elements that can assembled together programmatically to represent any number of unique device types. The elements are created using responsive and scalable SVG icons to allow for scalability between small and large device types.

The important elements to be monitored are ports, line cards, fans, LEDs, and other common features across chassis and individual devices. These elements could be assembled together programmatically to form an abstracted but complete device visualization.

This visualization also shows how the device elements are configured into virtual entities like link aggregation groups (LAGs), VLANs, Security Zones, and other groupings.

By keeping the chassis view an abstracted collection of modular elements, the view has flexibility to clearly show alerts and errors by highlighting affected elements with severity colors. The user can easily see the problem areas in the device or chassis by the color and type of element affected.

Device Chassis visualization explorations

Device Chassis visualization explorations

Device Chassis visualization explorations

Device Chassis visualization explorations

Outcome

An unexpected favorable outcome was that the device chassis visualization system could also be used in the other platform solutions that include element management and branch management.

In order to accommodate those use cases, few updates are being done to the visualization system and will be implemented once they are all tested.

With just the improved IA and improvements with the quick set up wizards, the JWeb product had a 90% + approval rating from the users.

A survey was sent out across 60 users with questions specifically focussed on improvements and more than 90 % of the users strongly agreed there was a marked improvement in the experience and the sales people felt very confident to go aggressively.

This project was also awarded a CEO excellence award in 2017

visualization styleguide

Visualization – Devices

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES

VISUALIZATION – DEVICES