Introduction

SmartX is a leading provider of hyper-converged products and enterprise cloud solutions in China, SmartX redefines the data center through software, bringing the architecture of data centers similar to Google and other Internet companies to enterprises, building faster, more scalable, and more flexible data centers for enterprises.

Fisheye Dashboard is the visual data platform for SmartX hyper-converged systems, providing IT administrators with the ability to monitor, alert, and manage hardware and resources. After 2 major releases, our design team completely redesigned Fisheye to create the first design system for our product.

The redesign process used the Design Sprint and Atomic Design methodologies to experiment and validate the design ideas in a short period of time, and to build the system from the smallest interface elements.

After the design was completed, a detailed UI Kit was compiled.

Why Redesign?

SmartX OS is an operating system designed for hyper-converged architectures, helping customers build agile and efficient modern data centers. Fisheye is the web-based console for SmartX OS, providing the most intuitive platform for system administrators to monitor system status and data metrics.

It has completed 2 major feature iterations in the past 2 years, adding several important features such as virtual machine management, snapshots, storage pools, etc., and is about to receive the 3.0 version update. In the previous version, the design was more focused on completing the features planned in each version, and the design was focused on how to design the feature well, lacking systematic design thinking. For example, the same component is designed multiple times in different versions, but the style and interaction are not exactly the same.

Duplication of components affects development efficiency

There are a lot of duplicate components in the design component library and front-end code, which reduces design and development efficiency and needs to be streamlined.

Inconsistent experience

Redundant components are inconsistent in style and interaction, resulting in an inconsistent experience.

Poor scalability of information architecture

Version 3.0 will add more complex functions such as rack awareness and networking, and the existing information architecture cannot meet the large amount of data and information and complex interaction functions.

Therefore, the design team decided to conduct a thorough reorganization and refactoring of the product design.