{"id":1149,"date":"2020-08-10T20:32:50","date_gmt":"2020-08-10T20:32:50","guid":{"rendered":"https:\/\/amitavasen.com\/portfolio\/?p=1149"},"modified":"2020-09-10T20:37:37","modified_gmt":"2020-09-10T20:37:37","slug":"redesign-of-cluster-explorer","status":"publish","type":"post","link":"https:\/\/amitavasen.com\/portfolio\/2020\/08\/10\/redesign-of-cluster-explorer\/","title":{"rendered":"Redesign of Cluster Explorer"},"content":{"rendered":"<h3>Goal<\/h3>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>To redesign the layout of the Cluster Explorer to improve the overall user experience<\/li>\n<\/ul>\n<\/div>\n<h3>Problems<\/h3>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>The current design is difficult to understand.<\/li>\n<li>The current design is also not very scalable, because the base layout is \u201ccircular\u201d and if the nodes have a larger number of pods, it will appear \u201ctoo dense\u201d.<\/li>\n<li>The segregation of the pods with \u201ccritical\u201d (and \u201cwarning\u201d) issues are not very clear.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3>User Persona<\/h3>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>DevOps\/Support Engineers.<\/li>\n<li>Software Engineers<\/li>\n<\/ul>\n<h3>User Research<\/h3>\n<ul>\n<li>1:1 contextual interviews conducted with 12 users<\/li>\n<li>Surveys were sent to 24 users<\/li>\n<\/ul>\n<\/div>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1151\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer.png\" alt=\"\" width=\"1402\" height=\"882\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer.png 1402w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-300x189.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1024x644.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-768x483.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-850x535.png 850w\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Design Overview<\/h3>\n<ul>\n<li>The proposed design has a \u201clinear\u201d layout.<\/li>\n<li>This design is also scalable. Depending on the number of pods in each node, the pods can be arranged in 2 or more columns for a node.<\/li>\n<li>The design is also easier to understand.<\/li>\n<\/ul>\n<h3>Assumptions<\/h3>\n<ul>\n<li>All the pods in each node are \u201cclickable\u201d.<\/li>\n<li>All the node peripheral components (i.e. memory, CPU, and storage) are \u201cclickable\u201d.<\/li>\n<li>Users can \u201chover\u201d over the pods.<\/li>\n<li>Users can \u201chover\u201d over the node peripherals.<\/li>\n<li>Hovering over a pod or the node peripheral will show a tooltip with supplemental information about the component.<\/li>\n<li>Clicking the pod or a node peripheral will open up a sidebar modal to the right with detailed information of the selected component.<\/li>\n<li>The nodes with no issues (or healthy) are indicated by a green checkmark.<\/li>\n<li>The nodes with red or orange have at least 1 or more critical issues or warnings respectively.<\/li>\n<li>The summary card of the cluster shows the stats regarding the total number of nodes, number of pods, total critical pending, total critical alerts, and warnings.<\/li>\n<li>The pin icon on the tooltip indicates that the modal can be \u201cpinned\u201d to the page and will not disappear on \u201cblur\u201d action.<\/li>\n<li>The UX design mock-ups are not interactive. The interaction states have been indicated on each page.<\/li>\n<\/ul>\n<\/div>\n<hr \/>\n<h3><\/h3>\n<h3>Prototypes &amp; Mockups<\/h3>\n<div class=\"layoutArea\">\n<h3>Icons<\/h3>\n<h3><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1153\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons.png\" alt=\"\" width=\"1559\" height=\"175\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons.png 1559w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons-300x34.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons-1024x115.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons-768x86.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons-1536x172.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/icons-850x95.png 850w\" sizes=\"auto, (max-width: 1559px) 100vw, 1559px\" \/><\/a><\/h3>\n<h3>Interaction States<\/h3>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/states.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1156\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/states.png\" alt=\"\" width=\"328\" height=\"196\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/states.png 328w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/states-300x180.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/p>\n<h3>Designs<\/h3>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1157\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1.png\" alt=\"\" width=\"1375\" height=\"1103\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1.png 1375w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1-300x241.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1-1024x821.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1-768x616.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-1-850x682.png 850w\" sizes=\"auto, (max-width: 1375px) 100vw, 1375px\" \/><\/a><\/p>\n<hr \/>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"layoutArea\">\n<figure id=\"attachment_1158\" aria-describedby=\"caption-attachment-1158\" style=\"width: 1375px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1158 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2.png\" alt=\"\" width=\"1375\" height=\"1102\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2.png 1375w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2-300x240.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2-1024x821.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2-768x616.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-2-850x681.png 850w\" sizes=\"auto, (max-width: 1375px) 100vw, 1375px\" \/><\/a><figcaption id=\"caption-attachment-1158\" class=\"wp-caption-text\">Cluster explorer page &#8211; &#8220;On hover&#8221; over the peripheral \/ component with warning<\/figcaption><\/figure>\n<hr \/>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_1159\" aria-describedby=\"caption-attachment-1159\" style=\"width: 1379px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1159 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3.png\" alt=\"\" width=\"1379\" height=\"1105\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3.png 1379w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3-300x240.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3-1024x821.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3-768x615.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-3-850x681.png 850w\" sizes=\"auto, (max-width: 1379px) 100vw, 1379px\" \/><\/a><figcaption id=\"caption-attachment-1159\" class=\"wp-caption-text\">Cluster explorer page &#8211; &#8220;On hover&#8221; over the pod with warning or error<\/figcaption><\/figure>\n<hr \/>\n<figure id=\"attachment_1160\" aria-describedby=\"caption-attachment-1160\" style=\"width: 1376px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1160 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4.png\" alt=\"\" width=\"1376\" height=\"1104\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4.png 1376w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4-300x241.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4-1024x822.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4-768x616.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/09\/Cluster-Explorer-4-850x682.png 850w\" sizes=\"auto, (max-width: 1376px) 100vw, 1376px\" \/><\/a><figcaption id=\"caption-attachment-1160\" class=\"wp-caption-text\">Cluster explorer page &#8211; &#8220;On click&#8221; over the peripheral \/ component with warning or error<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Goal To redesign the layout of the Cluster Explorer to improve the overall user experience Problems The current design is difficult to understand. The current design is also not very scalable, because the base layout is \u201ccircular\u201d and if the nodes have a larger number of pods, it will appear \u201ctoo dense\u201d. The segregation of&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1160,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[79,80],"class_list":["post-1149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-portfolio","category-uncategorized","tag-cluster","tag-explorer"],"_links":{"self":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/comments?post=1149"}],"version-history":[{"count":8,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1149\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1149\/revisions\/1165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media\/1160"}],"wp:attachment":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media?parent=1149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/categories?post=1149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/tags?post=1149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}