Timeline: September 2020 – October 2020
Role: Product Designer
Tools: Figma
Field: UI/UX,Interaction Design

时间:2020 年 9 月 – 2020 年 10 月


Designed user interfaces for web-based IT management software

为基于 Web 的 IT 管理软件设计用户界面

The team started designing the web-based user interface for the new CloudTower software in late 2019. During the development process, we gathered a lot of feedback through internal trials. Later in development, the team decided to redesign the user interface (excluding requirements-defined features) based on internal feedback and accumulated design experience. I led and was responsible for this redesign.

团队从 2019 年底开始为全新的 CloudTower 软件设计基于 Web 的用户界面。在研发过程中,我们通过内部试用收集到了许多反馈。在研发的后期,团队决定基于内部反馈和积累的设计经验,重新设计用户界面(不包括需求定义的功能)。我主导并负责此次重新设计。

The concept screens in the design are shown here. They are not the same as the final user interface, so there may be cases where non-focused content has been omitted and left blank. Most of them have been used as final interfaces, while a few have been put on hold due to project time constraints. At the end of this article, I will show examples of the final user interface.


Core Experience

Web-based interactive prototype for conceptual design

为概念设计编写的 Web 版可交互原型

You can click to view the interactive prototype and experience some of the design effects.



Design of feature pages


I will briefly outline the most central design decision and its rationale, but this article may not cover it in as much depth as other projects. I will have the opportunity to add more useful information later. Thank you for your understanding.


Back to Login


The software’s security mechanism causes it to automatically log out after a specific period of inactivity. However, it is usually the user himself who comes back to log in again, so the user name is retained and the user simply enters the password to log in again. The eye-catching and modern greeting not only hints at the current user, but also adds a human touch to the product — providing consumer-level ease of use is part of the product’s business value.




The overview brings together all paginated entries under the current resource level. At the same time, distilled information is presented for important entries. The wide inner margins in the right-hand area allow for a natural separation of the left and right spaces without the need for dividing lines.


The Shortcut Button


The user can create the corresponding resource on each page. However, when a user wants to create a resource, he or she may stay on any page and it takes more time to go to the page of target resource. Shortcut buttons can make the process much more efficient. The menu of buttons will also display the resource on the current page first (e.g. VM of VM pages). When creating a resource, if you need to set the location of the data center, cluster or host where the resource is located, it will be populated with the location of the current page by default.


Modern Style


The resource list is a common interface, and here is an example of the virtual machine resource list. The elements of the entire interface are in a modern style, e.g. more eye-catching headings that allow the user to understand the content of the interface at a glance. The topmost level of the left (collapsed) tree resource list, “Infrastructure”, is the most frequently used level, so it has been specially enlarged to make it easier to click on and access. Also, as the highest resource level, it displays the connection status of all resources at the same time, making cluster management easier. This button is also almost an iconic symbol of the software.


Batch Operation


When a user checks multiple resources, it is often to perform a batch operation. And batch operations are also close to a modal state and are temporary. So highlighting the toolbar for batch operations fits the profile here — eye-catching but not breaking the interface.


Association Function


The design is based on an understanding of what users need. Users can view resources at a specific level in a list on the “Infrastructure” page, or they can manage resources in a unified way through other functional pages, including the “Resource Optimization” feature. Usually, the user enters the feature page to perform administrative actions on the resource, so it should also be possible to see the relevant action options directly when viewing the resource. For example, for the resource optimization function, it can directly display how many “zombie VMs” are available for optimization at the current level of resources. In other words, the two entries apply to different entry points. This not only increases the usage of the feature, but also makes it easier for users who only manage some of the resources in the tier to see the information instantly and make targeted actions.


Alerts Preview


Alarm messages often need to be addressed by the user as soon as possible. Providing a preview panel allows you to see alert messages without leaving your current work environment and without having to immediately go to the alert page. Distinguish the message hierarchy with prominent shading to focus attention.


Tasks Preview


Similar to the alert message preview, users often need to keep an eye on the progress of asynchronous tasks. The task may be in progress when the user views it, or it may have just recently been completed, so it is also important to be able to see the most recent history.


Immersive Modal Dialog


This is a dialog box that fills the entire interface and is often used as a wizard for resource creation. The processed background allows to highlight more the items that need to be filled in.


Enhanced Components


Immersive dialogs may also appear when editing settings. Enhanced components can be set up for certain use-specific scenarios. For example, for “rules” editing, which allows enabling and disabling rules, if switching the enabled state is a high-frequency operation, then the “switch” as a general leader can be more visible and more in line with the user’s intention, which can improve the efficiency of the operation.


Dialog Box


The expanded dialog box looks more spacious, with a modern style that brings focus and leaves plenty of breathing room for operation. The volume of the appearance is more proportional to the information density of the overall interface.




When a resource is to be managed in a targeted manner, a sidebar is expanded. However, there is a lot of information in the sidebar, and it would be more efficient to allocate space and information if the most frequently used operations and information could be distilled. For example, for basic information, only the fields that users care about most are displayed by default, and these fields are more dynamic or serve as identifiable markers, while more information that does not change much can be put away and expanded when needed.


Sidebar with Full Features


The interface layout and appearance of each information module are designed for the management scenario of virtual machines, aiming to improve the efficiency of information presentation and make it easier for users to perceive the information.


Sidebar Located Below


Sometimes users need to manage multiple resources horizontally, and sometimes they are managing specific resources in detail. Providing the right spatial layout can help improve operational efficiency. If both scenarios exist, then consider providing the best experience of each at the same time. This is where the sidebar that is at the bottom comes from. Due to the different spatial relationship, it and the sidebar located on the right side display the same content but have different layouts, but it is still responsive enough to feel familiar to the user.


Sidebar in Normal Mode


Not all resource management scenarios are high-frequency, thus only the common resource management is targeted. Common resources are to be paired with a common mode sidebar, and also, this sidebar is used as the default appearance.


Search Results Panel


The content in the search results panel makes clever use of spatial location relationships to match the order in which users operate when searching and the importance of the information.



Preview of the final interface effect