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
*increased conversion rate after second and third version released
version 3, version 4, version 5
-
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
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
User Interviews (8)
User Personas
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.
Understanding the Product
Current Product (Version 1)
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
Parallel & Iterative Prototype
Usability Testing
A/B Testing
Iterations
Ideating
Redefine Workflow
current workflow
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
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
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
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:
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"
-
The "Updated" tag serves as a signifier that the version is updated on that selected day.
After (Version 3)
Changes:
2. Hardware Changes
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
-
Add Change Date to allow users to identify between upgrade version and up to date version
After (Version 5)
Changes:
3. Timeline Design
Before (One of the explorations)
-
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
3. Metrics to Monitor Environments
-
CPU Usage, Memory Usage, Storage Utilization, IO Latency
-
View by different parameter days
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.