Nutanix-head.png

Team

UX Designer, Visual Designer, Frontend Developers, Backend Developers, Product Manager  

Tools

Figma

Role

User Research, Product Thinking, Visual Design, Prototype Design, Usability Testing

Nutanix Universal Timeline  
Reimagine a new way to access data across Nutainx  
5 months | July 2021- November 2021  

 
Overview

Universal Timeline allows system reliability engineers and customers to view historic and current events that occur in a cluster for specific dates which helps them better troubleshoot the issues

 

Problem:  Information about the events that happened in a cluster is spread across the Nutanix product. It is time-consuming for system reliable engineers (SREs)  and customers to manually find each individual information when troubleshooting. 

Goal: To give users easy access to view holistic events that happen across clusters in a selected day

My Contribution: I started this project with a given first version which only has one widget. I redesign and iterated this project by adding more features from product teams and my exploration with user research. I start with creating a new workflow, conducting user interviews, prototyping based on requirements, iterating based on user testing feedback, and finishing with shipping out version 2, version 3, version 4 and version 5 of the product. 

Impact 
Screen Shot 2021-11-05 at 10.18.03 AM.png

*increased conversion rate after second and third version released

 version 3, version 4, version 5

Group 230.png
  • Research User Needs

  • User Interviews

  • User Personas

  • User flow 

  • Understand existing product

  • Define project goals

  • Product requirements 

  • Prioritize tasks

  • Ideate AB solutions 

  • Wireframe

  • lo-fi prototype

  • hi-fi prototype

  • Clickable interaction

  • Critics with the product team

  • Designer peer reviews

  • Usability Testing

  • A/B Testing

  • Applied feedbacks

  • Set goal for next release version

  • Google analytic 

  • Success measurement

  • Plan for next sprint

Given version1

Launch version 2

Intro 
img-default-og.png

Nutanix is a cloud computing company that provides software, cloud service, and software-defined storage in its own specialized hyper-converged infrastructure platform. During this internship, I joined Nutanix Insights and Supports team where we provide internal and external users with smart predictive health and smart automation across Nutanix products so users can anticipate and troubleshoot issues with minimum effort. I work closely with one staff UX designer, one product manager, and many frontend and backend engineers. 

Research
Research Methods Used
Icon=Conversation_8x.png
Icon=Person_8x.png
User Interviews (8)
User Personas
Icon=Arrows_8x.png
User Flow
 
Scoping 
Understanding Users 

To understand more about users, I conduct a user interview with 8 SREs to walk through their current workflow and several zoom call with product teams to further discuss the needs. I summarized users as following: 

  • Internal Users- System reliability engineers (SREs): They will most likely use Universal Timeline to troubleshoot customer's issues

  • External Users- Customers: They will most likely use Universal Timeline to fix the issues by themselves to save time from waiting for SREs response. 

Group 13.png
Group 14.png
Understanding the Product 

Current Product (Version 1)

Timeline v1.png

Lack of upgrade date 

Open as a pop-out window from a button 

Not scalable

if more events happens

Lack of filter function 

Only display one event

Synthesizing
Project Goals

Conclude from user interview and discussion with the product team, I decided beside the feature requirement given by the product team, I will also work on redesigned workflows, ideate 24 hours activity graphs, and brainstorm various scalable timeline designs. 

Requirements From Product Team

1. Events like Alerts, Discoveries, NCC Events, SEL Logs

2. Cases and Dispatches

3. GFlags

 

4. Hardware Timeline

My Explorations

1. Redesign Workflow, Software Widget, Timeline 

2. Explore new features like 24 Hours Activity Graph 

3. Track user data with Google Analytic 

Design Methods Used
Design 
Icon=Notepad_8x.png
Parallel & Iterative Prototype
Icon=Click_8x.png
Usability Testing
A/B Testing
Icon=Edit_8x.png
Iterations
 
Ideating
Redefine Workflow
current workflow
Frame 148.png

Pro of existing workflow:

  • SREs will receive a link to that cluster summary page

  • Universal Timeline is shown in context.

Cons of existing workflow:

  • Show as a button -- discoverability issues

  • Extra steps for customers as they don't have shortcut link like SREs

Parallel & Iterative Prototype
Proposed Solution A
Frame 149.png

Add an actions column to the cluster list table -> users enter the timeline without entering cluster summary page.

Pros: 

  • Reduce one click

  • Shown in context 

Cons:

  • The existing cluster list already has maximized columns 

    • need to remove one column in order to place action column

  • Information overflowed in cluster list page

Review
A/B Testing 

Goal: To understand SREs’ different workflows and confusion that exist in the current prototype

To validate my design, I conduct usability testing within a total of 8 SREs to see if any part is not clear or misleading.

In this session, I will ask them to complete several tasks to see what are users' intuitive thoughts and be able to compare their actions with their answers in the A/B testing session.

In A/B testing I will show them different versions of timeline design and entry point to enter the timeline with each pro and cons.

Lastly, I will interview them for their general feedback to understand more about user needs and what might be the potential feature we can add in the future. 

1. Workflow
Enter Timeline.jpg
Proposed Solution C
  • 6/8 internal users preferred 

  •  this workflow is more integrated to their daily routine which is looking through each tab of the cluster summary page

Proposed Solution B
  • 2/8 internal users preferred 

  • Having a top-level page will be easier to refer to when communicating to customers 

Timeline.jpg
usertesting1.png
usertestin-2.png
2. Timeline Design
Version 1
Version 2
  • 5/8 users prefer Version 2 (vertical scroll) 

    • prefer scroll down to see past events than clicking the arrow button 

    • more visually align with the rest of the information in the timeline. When users jump to another date they can easily navigate the event following the eye movement

  • 3/8 users prefer Version 1 (horizontal scroll) 

    • they are more used to horizontal view

      • the widget's size is bigger ​

Iterations
Applied Usability Testing Feedbacks
1. Software Upgrades

Usability Testing Result:

Sw-1.png

Before (Version 2)

  • 4/8 users are not able to identify which software gets upgraded on the selected day

  • Users will like to see the changes get emphasized 

  • Software that is upgraded on a selected day will be emphasized with the green dot 

  • Show the previous version next to the current version as one SREs noted "sometimes customers will forget what version gets upgraded from so it is nice to show it here"

Widget.png

  • The "Updated" tag serves as a signifier that the version is updated on that selected day.  

After (Version 3)

Changes:

2. Hardware Changes
HW-1.png

Before (version 3)

Usability Testing Result:

  • 8/8 users are not able to identify which hardware gets upgraded

  • Users will like to see initial data next to the current version as a comparison 

  • Change to horizontal tabs to allow more space for the information

  • Add recommendation to provide a quick solution when troubleshooting 

Frame 195.png
  • Add Change Date to allow users to identify between upgrade version and up to date version 

After (Version 5)

Changes:

3. Timeline Design 
usertestin-2.png

Before (One of the explorations)

Timeline v10.png
  • Breakdown to 4 events one column

  • Expand size when more events

After (Version 5)

  • Though more users preferred vertical scroll, the difference between votes is not significant

    • Need to conduct more user testings to decide on the final version. Horizontal now to save developers time​

Featured Screens
 

1. View historic and current events that occur in a cluster for specific dates

  • Only date with events will be shown 

  • Jump to selected day 

  • Filter date based on events

2. Events Widget with Multi Tabs

  • Show the number of the critical event on the tabs

  • Expand to view more detail information

Widget.png

3. Metrics to Monitor Environments

  • CPU Usage, Memory Usage, Storage Utilization, IO Latency 

  • View by different parameter days

Group 210.png
Group 211.png
Group 213.png
Group 212.png
Learnings

Overall from 5 months internship, I learn a great deal about how to become a more mature designer. Working with Insight teams means we have a sprint every two weeks to ship out new features, therefore learning to prioritize tasks and time management is very important. From this experience, I learn to break down requirements into smaller pieces and think of a feature not just as an addition to a product but its overall impact on the experience and the future possibility for the feature.  During the meeting with the product team and engineer, I learn how to drive the conversation and proposed my design choice with pros and cons. Moreover, I learn to include engineers in each stage of design, before and after releasing it to continue on the iterations.  

 

Potential Next Step: After finishing the V5 mockup, I want to take a step to look at Universal Timeline backend data with Google Analytics and iterated design based on the data. Unfortunately, due to the universal timeline as a new product, currently, we only have backend data for the Universal Timeline page visit. However, I discuss with the engineering team assigning Google Analytics on different widgets. In the future, the team can track which tab in the widget has more use click to rearrange hierarchy and the default tab for the widget. By viewing google analytics, it helps me to understand more about users' behavior and different use cases.