![Nutanix-head.png](https://static.wixstatic.com/media/1e8854_07bdc310bb884389bfa335aac0af7226~mv2.png/v1/crop/x_0,y_27,w_1299,h_832/fill/w_902,h_578,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_93c28ab277b34725bd59b529f1ccf32c~mv2.png/v1/fill/w_901,h_425,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screen%20Shot%202021-11-05%20at%2010_18_03%20AM.png)
*increased conversion rate after second and third version released
version 3, version 4, version 5
![Group 230.png](https://static.wixstatic.com/media/1e8854_7bb8e492f5ca4a059dc75874ba4cf9d1~mv2.png/v1/fill/w_971,h_165,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20230.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](https://static.wixstatic.com/media/1e8854_d57d6e7db0b94f8d9a5b319ef4cbf30c~mv2.png/v1/crop/x_285,y_212,w_688,h_235/fill/w_263,h_90,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_c2256f9d815e47108b5b89db0a5d52d8~mv2.png/v1/fill/w_150,h_150,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DConversation_8x.png)
![Icon=Person_8x.png](https://static.wixstatic.com/media/1e8854_96a50dde40ec4476836eeb248e8e8120~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DPerson_8x.png)
User Interviews (8)
User Personas
![Icon=Arrows_8x.png](https://static.wixstatic.com/media/1e8854_506014391799433398b3cb436c730c9e~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DArrows_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.
​
Understanding the Product
Current Product (Version 1)
![Timeline v1.png](https://static.wixstatic.com/media/1e8854_b3cc909c1487477abec3ed2078cf28e3~mv2.png/v1/fill/w_699,h_545,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Timeline%20v1.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](https://static.wixstatic.com/media/1e8854_da3af2c738a3421892b0df395013b965~mv2.png/v1/fill/w_99,h_99,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DNotepad_8x.png)
Parallel & Iterative Prototype
![Icon=Click_8x.png](https://static.wixstatic.com/media/1e8854_7f49f174dd5c48fb981e7fecc43a3438~mv2.png/v1/fill/w_99,h_99,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DClick_8x.png)
Usability Testing
A/B Testing
![Icon=Edit_8x.png](https://static.wixstatic.com/media/1e8854_dab334784a7c4f7b96cd0ec46c54ced8~mv2.png/v1/fill/w_112,h_112,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Icon%3DEdit_8x.png)
Iterations
Ideating
Redefine Workflow
current workflow
![Frame 148.png](https://static.wixstatic.com/media/1e8854_3d695251117e40ea988d343ae0ace16d~mv2.png/v1/crop/x_6,y_533,w_5341,h_879/fill/w_911,h_150,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Frame%20148.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
![](https://static.wixstatic.com/media/1e8854_4d5df5a124c74f5bbaedcd7fd9aeafa6f000.jpg/v1/fill/w_820,h_419,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/1e8854_4d5df5a124c74f5bbaedcd7fd9aeafa6f000.jpg)
Parallel & Iterative Prototype
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](https://static.wixstatic.com/media/1e8854_38a1dd24f5aa49d78117aab7f085dff0~mv2.jpg/v1/crop/x_0,y_0,w_2880,h_1439/fill/w_607,h_303,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Enter%20Timeline.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](https://static.wixstatic.com/media/1e8854_07567dbdba2a497394ed580f996e50f2~mv2.jpg/v1/fill/w_595,h_372,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Timeline.jpg)
![usertesting1.png](https://static.wixstatic.com/media/1e8854_d43693f1528c4a0f800ce39bb938d7c9~mv2.png/v1/fill/w_362,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/usertesting1.png)
![usertestin-2.png](https://static.wixstatic.com/media/1e8854_60028465bb744e95a25d1f0647498808~mv2.png/v1/fill/w_423,h_407,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_9d68b76aea4b4db8ac5fcc2f581de516~mv2.png/v1/fill/w_616,h_137,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_cd7a6d4603c2402084cf574186e624e5~mv2.png/v1/fill/w_647,h_298,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_e9c23e0c10364f29a521d62661dfd1eb~mv2.png/v1/fill/w_555,h_122,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/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](https://static.wixstatic.com/media/1e8854_032a0a0ecd844832a40f41d15382d59c~mv2.png/v1/fill/w_716,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Frame%20195.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](https://static.wixstatic.com/media/1e8854_60028465bb744e95a25d1f0647498808~mv2.png/v1/fill/w_307,h_295,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/usertestin-2.png)
Before (One of the explorations)
![Timeline v10.png](https://static.wixstatic.com/media/1e8854_5782123240da46e781b6de41a6454a35~mv2.png/v1/crop/x_0,y_0,w_1440,h_1038/fill/w_482,h_347,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Timeline%20v10.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
![](https://static.wixstatic.com/media/1e8854_adb02e712bf44c1f823654029afc5345f000.jpg/v1/fill/w_959,h_517,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/1e8854_adb02e712bf44c1f823654029afc5345f000.jpg)
2. Events Widget with Multi Tabs
-
Show the number of the critical event on the tabs
-
Expand to view more detail information
![](https://static.wixstatic.com/media/1e8854_ff6fbe7a4f0b4f068b5354d6573cab38f000.jpg/v1/fill/w_1068,h_238,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/1e8854_ff6fbe7a4f0b4f068b5354d6573cab38f000.jpg)
![](https://static.wixstatic.com/media/1e8854_7406d60169854d9fa5c3c063c2b3719ff000.jpg/v1/fill/w_497,h_234,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/1e8854_7406d60169854d9fa5c3c063c2b3719ff000.jpg)
![Widget.png](https://static.wixstatic.com/media/1e8854_cd7a6d4603c2402084cf574186e624e5~mv2.png/v1/fill/w_513,h_236,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Widget.png)
![](https://static.wixstatic.com/media/1e8854_675bd31b76864b38b219ffce786887a0f000.jpg/v1/fill/w_933,h_309,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/1e8854_675bd31b76864b38b219ffce786887a0f000.jpg)
3. Metrics to Monitor Environments
-
CPU Usage, Memory Usage, Storage Utilization, IO Latency
-
View by different parameter days
![Group 210.png](https://static.wixstatic.com/media/1e8854_c16281b47a7948679329a418ccd673c7~mv2.png/v1/fill/w_463,h_185,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20210.png)
![Group 211.png](https://static.wixstatic.com/media/1e8854_55991672eb364129b5599abeeca8cd1f~mv2.png/v1/fill/w_463,h_185,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20211.png)
![Group 213.png](https://static.wixstatic.com/media/1e8854_da776a7d4d9f46d6aa92419ef626d769~mv2.png/v1/fill/w_463,h_185,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20213.png)
![Group 212.png](https://static.wixstatic.com/media/1e8854_7573235e8424439f8246ced6a4c1fa7e~mv2.png/v1/fill/w_463,h_185,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20212.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.