Nutanix - Case Study

Improving Usability of Entity Browser

UX Designer, September 2021 - January 2021

View Presentation

SCROLL

Company

Project Type & Deliverables

UX Design

Interaction Design

Usability Testing

Visual Design (Sketch)

Team

Ashish Durgude — UX Designer

Brighton Vino Jegarajan — Staff UX Designer

Savio Aguiar — UX Manager

Project
Overview

The project was about improving the user experience of the entity listing page for Nutanix product called Prism Central (PC).

This project focuses on improving end-to-end entity discovery and management workflow. It also involves study around UI patterns and interactions specific to Nutanix enterprise product.

Project
Background

Nutanix Prism Central is a product that provides an option to monitor and manage multiple clusters through a single web console.

Using Prism Central, users can manage infrastructure (Hosts, Clusters) and virtual infrastructure (VM's, VGs, Storage Containers) entities.

Entity Browser deals with managing all entities. It is a place where the user interacts with entities and perform the required actions to improve their infrastructure.

Using Entity Browser, users can create new entities, export entity data, customize entity table view, and apply filters to find desired entities.

Prism Central Dashboard

Existing Entity Browser (Before my design involvement)

What was my task/work?

As a UX Designer, my job was to understand Prism Central and Entity Browser, establish ground zero of existing usability, compare it with competitors, Identify focus areas, design a solution, and test it with users.

What was the problem?

Entity Browser hasn't changed much since the 2015, but as a product (Prism), Nutanix scaled so much in terms of no. of entities they manage and the types of entities they support today.

Nutanix has been doing certain mandate changes to keep up with the product's scale, but they never thought about improving Entity Browser and taking a clean slate approach for it.

But the primary construct of managing these entities remained the same over the years. The existing entity browser was not created for what Prism has today (Scalability).

There was some prior work done to improve the Entity browser. Based on that prior work and our formative research (Mentioned in the design process section), we discovered five main areas with usability issues:

01. Issues with Custom Views

The custom view is a feature that lets the user customize table content based on their requirement. For example, if users want to see VM names and hypervisor and cluster details, they can create a custom table view.

Issue 01.
Users wanted to see applied focus upfront. Currently, users need to click on the dropdown to see the applied focus.

Issue 02.
The text “Focus” was ambiguous.

Issue 03.
No clear sections to show which focus was user-generated vs. system generated.

This modal appears when the user clicks on "Add custom" in the "Focus" dropdown. In this modal, the user can create a custom view by adding columns (10 Max) and arranging column orders based on their preference.

Issue 04.
Users were not able to see changes in the table when they added columns in this modal.

Issue 05.
To move added columns, users had to click on up-down arrows, which were a frustrating experience.

02. Issues with exporting entity table

In the current entity browser, we gave a straightforward export option for exporting the entire table, but the user wanted more functionalities.

Issue 01.
Export Icon was not discoverable.

Issue 02.
Users wanted multiple formats to export the table. We supported only CSV.

Issue 03.
No support for exporting multiple entities from the table.

Issue 04.
Users were unclear about the current view while exporting the table.

03. Issues with filters

After clicking on the "Filters" button, this side panel appears with all available filter options to apply on the table.

Issue 01.
Applied filters were hard to discover.

Issue 02.
The filter was perceived as overwhelming, with a lot of options.

Issue 03.
The hierarchy of the filters did not match user expectations.

04. Issues with long action list

Users can see entity actions by selecting an entity from the table (By clicking on checkbox).

Issue 01.
Scalability

Issue 02.
Prism Central did not support “Right-Click” interactions to perform entity related actions.

Issue 03.
Needed better presentation of single entity actions vs. multiple entity bulk actions.

05. Issues with table interactions

This is a default layout of Entity Browser for displaying entities in a table/list.

Issue 01.
The current way of changing rows per page is not discoverable.

Issue 02.
Resizing column width option was hard to discover.

Issue 03.
No support for changing information density (User frequently preferred a denser table).

Issue 04.
No support for column reordering.

Solution

Entity Browser 2.0

The updated version of Entity Browser solved five major usability issues (Mentioned above) and met user expectations. This project was well received by the users and will be updated on Prism Central in the upcoming product cycle.

Features of Entity Browser 2.0

Showing "View" Context Upfront

Rephrased the word "Focus" to "View." Created Separate sections for User-created and System generated views in a "View" dropdown, which helps users avoid confusion.

Real-time "View" Creation

After clicking on “Add custom view,” the user will see this page where the user can add columns and see it update in a table real-time. Users can also change column-order.

Exporting All Entities From Table

After clicking on the "Export" button, the user will see this modal. In modal, the user can see the name of the current view with an option to change it. Users can also export the table in different file formats.

Exporting Specific Rows From Table

For exporting the table, the user will see the same modal as above. The only difference is that users will see an option to export selected entities or all entities in this modal.

Lighter Approach For Filters

After clicking on a "Filter" button, a popover will appear with an option to add multiple filters. Using this approach, users can see all applied filters at once.

Scaling + Right Click Interactions on Action List

Instead of having a long action list, we came up with a slideout menu with defined sections for actions. Using this approach, users can see all the required actions without having to scroll.

Changing Information Density

By clicking on the "settings" icon from the table head, the user will see an option to change information density, helping the user see more content/rows.

Want to experience above key features by yourself?

No worries!! Have a look at InVision prototype

https://invis.io/JEYDNQMWVSX

Interact with Prototype

Design Process

Formative Research

To get a basic understanding of the Entity Browser, my mentor and I started discussing the existing version of Entity Browser and the UX issues. During the conversation, I came to know that there is some prior work done to improve Entity Browser.

Prior work done for improving the existing Entity Browser:

Our designers performed multiple audits and created JIRA tickets to gain insights and feedback from users. The image above is one of the examples of UX issues documentation for Entity Browser.

Based on the prior work and discussions with designers, we identified 10+ broad issue buckets:

Resizing columns in the table is not visually represented

Item/row selection across list page is not supported

Pagination/ Infinite scroll instead of pagination

Saving Focus/Views for revisiting users

Needed better filtering presentation

Long action list for entities (Taking more screen space)

Visiting new page to see details of entities (Losing Context)

No multiple file format support for exporting table

Needed ability to save and reuse columns

No support for changing row density

Rearranging column order was not supported

“Right-click” interactions were not supported

Competitive Analysis

By considering 12 issues, we started working on a competitive analysis. The goals of this analysis were to understand different approaches used by competitors, baseline and identify table stakes, and score Nutanix existing Entity Browser usability.

Competitors selected for this project:

We spent around one week doing a competitive analysis. Here is the link for complete documentation of competitive analysis: https://invis.io/6BYLY65Q5WD

Competitor Analysis Summary

Takeaways From Competitor Analysis

01. Except for Gmail, all competitors provided an option to export in a well-known standard format.

02. All Enterprise applications allowed users to create and save custom views.

03. The methods of filtering were different in each competitor. Some had a separate filter panel, while some had a generic search to filter.

04. Gmail provided an option to customize the density of information. Most competitors also allowed resizing and reordering of table columns and controlling the number of rows in a page.

05. vSphere and Google Sheets provided contextual actions with “Right-Click.”

Explorations

Based on the Formative research, we identified many issues in the existing Entity Browser. After going through every issue, we decided to focus on five main issues.

Top five issues we focused on are,

01. Custom Views

02. Export Table

03. Filters

04. Table Actions

05. Table Presentation

Wireframes

After deciding the issues to focus on, we started working on wireframes. We spent over two weeks to do multiple iterations of wireframes and get feedback from other designers. Here are some of the wireframes:

01. Custom Views

02. Export Table

03. Filters

04. Table Actions

05. Table Presentation

Design

After doing many iterations of wireframes, we started working on visuals for Entity Browser. I followed the Nutanix Design System to do visuals. I also contributed new UI components that I used in the proposed designs.

Evaluative Research

Evaluative research is one of the vital parts of the design process. After completing visuals for Entity Browser, we evaluated screens by doing usability testing with four users and presenting designs with our design team. I conducted usability testing for the first time. It was the best learning experience for me.

01. Weekly design evaluations with Nutanix design team

02. Doing usability testing with four users

Feedback from the usability testing

01. “Custom Views” and showing context of the view were well received.

02. All users welcomed the change showing the view name on export modal and the support for exporting the table in different file formats.

03. We got mixed feedback on filters. One user preferred to see all filters (existing filter side panel), while others liked a new approach for filters. (Needs more testing).

04. Users were able to find applied filters easily in the proposed design.

05. Users were excited with the support for right-clicking on entities.

06. Users liked the new hierarchical actions list and the "Bulk actions" text for the "Actions" button (during multi-select).

07. Users were able to find the “Settings” icon and guess the type of actions would be in it, but further study is needed to decide if it is per-table settings or overall UI settings.

08. Some users wanted an option in “settings” to add/remove columns from the table.

Outcome

01. Export and Custom Views are in UI Development now (Jan 2021). The remaining features will be available in General Availability (GA) phase after May 2021.

02. Entity Browser now support multiple entities and provides customizations requested by customers.

03. Made entity browser scalable with the focus of better usability.

04. The design improvements positively impacted entire Prism Central application experience.

Project Summary
and Outcome

01.

Took ownership and designed “Entity Browser 2.0 (Deals with managing entities like VM’s, Clusters, etc.)” for Nutanix “Prism Central” application by doing formative research, creating wireframes, producing visuals, and testing it with users, which led this project to be incorporated into the 2020 Q4 roadmap.

02.

I led daily project meetings with my project mentor, manager, other designers, and researchers for their inputs and reviews, which helped me make better decisions.

03.

Conducted usability testing for the first time with four users, which helped me gain real-world experience of communicating with users.

Thank you for reading this project

Also, check out these awesome projects

Balancing News Bias on Facebook

Indiana University

Stack Report for OpenShift.io

Red Hat