Timeline: May 2019 – July 2019
Role: Product Designer
Tools: Sketch, GitLab
Field: IT Infrastructure, Virtualization, Enterprise Cloud

时间:2019 年 5 月 – 2019 年 7 月
领域:IT 基础架构、计算虚拟化、企业云

From understanding and defining problems, designing prototypes and visual interactions, to working with engineers to improve products, I stayed in close contact with the team throughout the process. The project team consisted of 2 back-end engineers, 3 front-end engineers, 1 test engineer and 1 product manager. In addition, I also communicated with the after-sales technical support team.

从了解和定义问题、设计原型和视觉交互,到与工程师合作以完善产品,我在整个过程中都和团队保持密切的联系。这个项目的团队包括 2 名后端工程师、3 名前端工程师、1 名测试工程师和 1 名产品经理。此外,我还与售后技术支持团队沟通。

Project Background and Problems

The Migration Process Is Not as Simple as Expected


Corporate customers will create and use virtual machines on SmartX software products after purchasing them. If a customer believes that the products perform as expected within a certain period, they will gradually migrate more or even all virtual machines from the old virtualized computing platform to SmartX platform.

企业客户在购买 SmartX 公司的软件产品后,会在其上创建并使用虚拟机。如果客户认为产品在一定周期内的表现符合预期,就会陆续将更多甚至全部虚拟机从旧的虚拟化计算平台迁移到 SmartX 的平台。

However, virtual machine migration is a challenge for both corporate customers and SmartX’s after-sales team. Because there is no specialized tool for the migration operation, each step needs to be performed manually, which is tedious, time consuming and prone to errors. The virtual machine may eventually need to be shut down before the migration starts, thus affecting the business.

但是,虚拟机迁移对企业客户和 SmartX 公司的售后团队来说,都是一项挑战。因为迁移操作没有专门的工具,每个步骤都需要手动执行,过程繁琐,耗时较多,还容易出错,并且在迁移开始前就必须关闭虚拟机,业务会因此受到影响。

Whether the migration is easy will also affect the purchasing decision of corporate customers and the cost of after-sales service. Therefore, a specialized tool is urgently needed to help make the migration of virtual machines easier.


Measuring Success

Easy-to-use Graphical Tools Can Make the Migration Easy


Our goal is to provide a graphical tool to help simplify the migration process. This tool includes the following features:


  1. Simple graphical interface, obvious or predictable operation process. This will change the purely manual operation process and reduce the possibility of operation errors;
  2. A more efficient data transfer method (full snapshot + incremental snapshot) is used. This will change the shutdown time point of the virtual machine, shorten the window, and minimize the loss of business caused by migration;
  3. Has extendibility to support possible future product routes, such as allowing seamless bidirectional migration of virtual machines between SmartX platform and public cloud, private cloud and other virtualization platforms. It will make the structure of the tool more robust and easier for customers to make purchase decisions because good virtual machine mobility can avoid “platform locking”.
  1. 具有简易的图形界面、显然或可预期的流程。这将改变纯手工操作流程,并减小操作出错的可能性;
  2. 使用一种更高效的数据传输方式(全量快照 + 增量快照)。这将改变虚拟机关闭的时间点,并缩短窗口期,最大限度地减小迁移对业务造成的损失;
  3. 具有可扩展性,以支持未来可能的产品路线,例如允许虚拟机在 SmartX 平台和公有云、私有云及其他虚拟化平台之间无缝双向迁移。这将使该工具的结构更健壮,并使客户更容易做出购买决策,因为良好的虚拟机移动能力可以避免“平台锁定”。

Among the three features above, the second one is dominated by back-end engineers. As a product designer, I mainly focus on how this new technical solution is integrated with the product.

其中,第 2 点特性是由后端工程师主导的。我作为产品设计师,主要关注这种新的技术方案如何与产品融合在一起。


Journey Map and Prototype: Hypothesis Verifiers


This is a very specialized tool used by frontline after-sales technical support personnel, and I have no previous experience of migrating virtual machines across platforms. Therefore, I must fully understand the previous operation methods and the reasons for each step of operation, as well as think about what all these processes should present itself in a graphic software application.


Journey Map


Based on information obtained from documents and interviews, I have explored the original work flow. I tried to integrate it into a framework that conforms to human intuition and establish a process suitable for graphical software operation.




I have drawn a simple prototype of the interface according to the process defined by Journey Map. Since I need to verify this plan with my colleagues in the after-sales technical support department, the plan must not only be quickly formed to save time, but it also has to be intuitive so that my colleagues can fully understand what I mean.


First of all, I will provide 3 main pages. Depending on whether or not the migration task has been completed, there are the “In Progress” and “History” pages, as well as the “Sites” management page.

首先,我将提供 3 个主要页面。按照迁移任务是否已经结束,分出“任务队列”和“历史记录”页面,此外还有“站点”管理页面。

Users can create migration tasks on the “In Progress” page under the premise that there are 2 existing sites that can migrate virtual machines to each other before the migration task can be created.

用户可在“任务队列”页面创建迁移任务。但前提是,需要先存在 2 个可以互相迁移虚拟机的站点,才能创建迁移任务。

Adding a site on the “Sites” page. You may ask, why not start a migration task directly and connect the source side and target side at the same time? The reasons for this are as follows: 1. To support the reuse in a better way and provide convenience; 2. To prepare in advance to ensure the site is available and the operation process is stable; 3. To not restrict a site as the source side or target side, leaving room for extendibility (any site may be either side in the future).

在“站点”页面添加站点。你可能会问,为什么不直接开始一项迁移任务,同时连接源端和目标端站点呢?这样做的原因有:1. 更好地支持复用,提供便利性;2. 提前准备以确保站点可用,稳定操作流程;3. 不限定一个站点是源端或目标端,留有可扩展性(未来任一站点都可能是任意一端)。

The migration task consists of 4 simplified steps.

迁移任务包含经过简化的 4 个步骤。

Step 1: Select the source side and target side for migration;

第 1 步:选择迁移的源端站点和目标端站点;

Step 2: Select one or more virtual machines to be migrated and add to the migration task;

第 2 步:选择需要迁移的一个或多个虚拟机,以加入迁移任务;

Step 3 and step 4: Select the virtual network mapping relationship and storage policy on the source side for the virtual machine.

第 3 步和第 4 步:为虚拟机选择在目标端的虚拟网络映射关系和存储策略。

The created migration task, including one or more virtual machines, will be displayed on the interface. Migration of each virtual machine can be paused, continued and stopped.


Virtual machines that have completed migration will be moved to the “History” page. Here, you can also view the completed timeline and migration details.


At the same time, I have come up with some questions and hope to ask my colleagues in the after-sales team in the later verification phase. For example:


  1. Since the migration process is relatively long, is it necessary to add a timer start function to help users allocate time reasonably?
  2. Is it necessary to add a rate restriction function to ensure that network resources will not be excessively occupied by migration operations?
  3. Is it necessary to design the installation and deployment? If the software can be pre-installed on the computers of the after-sales personnel, will the operation time in the customer company be shortened?
  1. 既然迁移的过程是比较漫长的,那么是否需要提供定时开始的功能,来帮助使用者合理分配时间呢?
  2. 是否需要提供限速功能,以保证网络资源不会被迁移操作过多地占用?
  3. 是否有必要对安装部署进行设计?如果能将该软件预先安装在售后人员的电脑上,是否就可以缩短在客户公司里的操作时长?

Internal Feedback

Think Outside the Box and Correct Inappropriate Practices


In an attempt to verify my plan with busy after-sales colleagues, I made an appointment with the leader of the team for half an hour after a full team meeting to collect feedback from each of them as much as possible. The back-end engineers of the R&D team also joined me in the meeting.

为了与繁忙的售后同事验证我的方案,我和该团队的 leader 预约在一次团队全员会议后的半小时的时间,以尽可能收集他们每个人的反馈。研发团队的后端工程师也和我一起参加。

After discussion, I got a lot of useful feedback.


  1. If the transmission process cannot be unattended, a timer start will be meaningless.

    Since a “timer start” will not actually help due to the need to manually shut down the source side virtual machine during the migration process, and the fact that that the task may encounter other problems, which makes it impossible to be completely unattended, the idea was rejected.

  2. It is necessary to add a network rate restricting function, but someone wishes that the network rate does not get restricted.

    Create an input box to enter the desired rate restriction and set it to optional.

  3. Corporate customers usually do not allow after-sales personnel to bring their computers into their computer room because of security considerations.

    Therefore, the software must be installed on the computers of corporate customers, and then the after-sales personnel shall assist in the operation. The software deployment will be an inevitably repetitive operation. So I will provide a process arranged in the simplest way possible during the initial configuration phase.

  4. The structure of “one migration task containing multiple virtual machines” is somewhat redundant, and it is easier to simplify it to “each virtual machine is a migration task”.

    In the end I accepted the proposal. “Adding multiple objects to one task” is a continuation of the “snapshot schedule” in the company’s flagship software, but the reason is that there are a large number of scheduled tasks and a scheduled task needs to protect the whole group of resources at the same time. There is some correlation between the resources of this group. Therefore, I further inquired the after-sales team and learned that the number of virtual machines migrated at the same time would not be more than 10, and they should all be in the same direction, thus I came to the conclusion that the original structure was somewhat redundant. There is no correlation between each virtual machine.

  5. After the migration of virtual machines is completed, do not set automatic boot on the target side site, because some configuration has to be made to ensure that there are no conflicts between IP addresses.

    Instructions shall be clearly provided on the interface.

  6. The after-sales team expects that a regular mail notification will be provided, however, the nature of the demand is to provide predictability of time.

    We ultimately rejected the mail notification method because the investment in configuring mail notification was not commensurate with the actual benefits. We will display the predictable remaining time to provide predictability and meet the nature of demand.

  1. 如果传输过程不能做到无人值守,则定时开始没有意义。


  2. 需要提供网络速率限制功能,但也有人希望不做限制。


  3. 企业客户通常不允许售后人员带电脑进入企业机房,这是出于安全性考虑。因此,必须将软件安装在企业客户的电脑上,再由售后人员协助操作。


  4. “一个迁移任务包含多个虚拟机”的结构有些冗余,简化为“每个虚拟机都是一个迁移任务”会显得更简单。

    最终我接受了这个提议。“在一个任务中添加多个对象”,这是延续了公司主打软件中“快照计划”的做法,但原因是计划任务的数量较多,且一个计划任务需要同时保护其中成组的资源,这组资源之间是有某种关联的。于是我进一步询问售后团队,得知同时迁移的虚拟机数量一般不会超过 10 个,且都是同方向的,由此可以判断原结构有些冗余。并且,每个虚拟机之间不存在关联性。

  5. 虚拟机迁移完成后,在目标端站点上不要自动开机,因为通常要进行一些配置,以确保 IP 地址不会发生冲突。


  6. 售后团队希望有定时邮件通知,但需求的本质是提供对时间的可预测性。


These suggestions are closely related to front-line business. Although they broke my assumption to some extent, they have also simultaneously improved my design efficiency and confidence. I need to make further optimization on these suggestions.


Plan Optimization and the Completion of Design Draft

Design a User-friendly Pixel-perfect Interface for the Improved Plan


Since there was no major structural problem, I started working on the high-fidelity interface after quickly adjusting the details.


I had tried many different interface layout designs. In the end, I put my mind to one of them, because its layout is the same as the company’s main software (which is also the most familiar to users) “Web Console”, which can reduce the cognitive cost of users, make them feel familiar with it and can get them started in no time. At the same time, in order to prevent the users from feeling overwhelmed when they are unable to create a blank page for the migration task after logging in to the software, I provided conspicuous operation instructions at the center of the default page.

我尝试了多种不同的界面布局设计。最终我选择了其中一种,因为它的布局和公司的主要软件(也是用户最为熟悉的)“Web 控制台”相同,可以降低用户的认知成本,使用户感到熟悉,并能快速上手。同时,为了避免用户登入软件后,面对暂时无法创建迁移任务的空白页面感到不知所措,我在默认页面中央提供了醒目的操作指引。

I designed icons for each page. For “In Progress”, I tried two plans. Circling graphics may bring anxiety, while timers are more stable and can be quickly understood by users.

我为每个页面设计了图标。对于“任务队列”,我尝试了 2 种方案。转圈的图形可能会带来焦虑感,而计时器则更稳定,而且能被使用者快速领会。

The “History” page adopts the clock icon and I combined it with the “List” icon. The “pushpin” icon on the “Sites” page vividly expresses its meaning. The graphics of server host or cluster is not adopted to represent “Sites” because the concept of “Sites” here may be different types of objects, such as public cloud in addition to local server cluster or the vCenter Server.

“历史记录”页面继承了时钟的符号,再和“列表”符号结合。“站点”页面的“图钉”符号则形象地表达了它的意思。没有采用服务器主机或集群的图形来代表“站点”,是因为此处的“站点”概念可能是不同类型的对象,例如除了本地服务器集群或 vCenter Server 外,还可能是公有云。

In the first step of creating the migration task, I added the function of network rate restriction and used the more commonly used unit in network management, i.e., Mbps, instead of MiB/s for disk data rate. I was challenged by some colleagues who were proficient in data storage. After a quick communication with our after-sales colleagues, we made this decision clear, because the restricted value was limited by the network administrator and was only related to the network, not storage.

我在创建迁移任务的第 1 步添加了网络速率限制的功能,并使用网络管理的常规单位 Mbps,而非磁盘数据速率的 MiB/s。有精通数据存储的同事向我提出质疑。在和售后同事快速沟通后,我们明确了这个决定,因为限制的值是由网络管理员限定的,只与网络有关,而与存储无关。

In step 2 of creating the migration task, virtual machines were allowed to be retrieved by cluster or host, and the specific reasons were displayed for virtual machines that could not be migrated currently. The estimated values of storage and memory usage were also provided to reduce the possibility of operational errors.

在创建迁移任务的第 2 步,允许按集群或主机来检索虚拟机,针对当前无法进行迁移的虚拟机,显示具体原因。并提供了存储和内存占用的估算值,以减小操作出错的可能。

Steps 3 and 4 were to set up network mappings and storage policies.

第 3 和第 4 步则是设置网络映射和存储策略。

Since the level of migration tasks is optimized, each virtual machine migration is now a separate task, which is only displayed on the interface according to the migration direction. This is to eliminate redundancy while maintaining order. The task cards will be sorted by the priority level to ensure that users see the tasks they need to deal with first.


Tasks have different states. Due to the data transmission method of “full snapshot + incremental snapshot”, it is necessary to shut down the virtual machine at the source side site after the full snapshot transmission accounting for a large proportion is completed, while the remaining data needs to be transmitted in the form of incremental snapshot. I provide operations at different points in time by changing the contents of the card, whereas users only need to focus on the current operations.

任务有不同的状态。由于采用了“全量快照 + 增量快照”的数据传输方式,在完成占大比重的全量快照传输后,需要在源端站点关闭虚拟机,并以增量快照的形式传输剩余数据。我以改变卡片内容的方式来提供不同时间点的操作,用户只需要关注当前的操作。

After the migration task is completed, the user will be explicitly prompted that the virtual machine will not boot automatically. Manually confirmed completed tasks will be moved to the “History” page.


Finally, I designed a simple initialization configuration process for the migration tool. This software will be copied to the customer’s enterprise equipment by after-sales personnel, and will run after a simple initial configuration.


Optimization During the Development Process

Handle Unpredictable Edge Conditions in the Design Process


A front-end engineer told me that when selecting a virtual machine in the step 2 of creating a migration task, it would take some time to query the storage and memory data of the virtual machine, and the estimated value would not be refreshed immediately, possibly resulting in a very short delay.

前端开发人员告诉我,在创建迁移任务的第 2 步选择虚拟机时,查询虚拟机的存储和内存数据需要一定时间,预估的数值将不能立即刷新,可能有非常短暂的延迟。

I am not sure if it is necessary to set a friendly prompt of “Loading…” for the short delay, because it may bring very subtle feeling.


Hence, I built the prototype of the operational experience in a very short time. Please visit https://codepen.io/lujw/pen/wvBoBXy to experience it. After comparing these experiences, I decided to add a brief status prompt because it can provide an immediate feedback.

于是,我快速构建了可操作体验的原型。你可以访问 https://codepen.io/lujw/pen/wvBoBXy 来体验。通过体验比较,我决定为数据显示添加短暂的状态提示,因为它能立即提供反馈。


Actively Shared Information and Presented Ideas in Team Collaborations


Sometimes, product designers will “work behind closed doors”. It’s great to have a keen sense of perception, but this project particularly requires a full understanding of the status of front-line work. It gives me the opportunity to put the verification process as far ahead as possible. In fact, I learned a lot of useful information through interviews early in the original process stage. This process has been extremely helpful, allowing me to try and correct mistakes in the early stage, hence improving the overall efficiency.


The experience of this project makes me think that engaging in ample communication is a very joyful thing. It can keep information flowing and is greatly conducive for team collaboration.