VMware Cloud Foundation Redesign

Revamping a cloud infrastructure web app


Being a global leader in cloud infrastructure & digital workspace technology, VMware provides cloud computing and platform virtualization software and services. VMware Cloud Foundation is a web app that helps Cloud admins monitor and manage both hardware and logical resources. I was brought to the team to do a complete redesign of the user interface and user flows to improve usability and achieve consistency with other VMware products. 


Interaction Design, Visual Design


Apr 2017 to Feb 2018


PM, Front End, Back End, Research, Design, Marketing

Develop Empathy

VMware Cloud Foundation was initially built by engineers and was able to gain initial customers in their first year of release. However not only it's out of date visually, it also has a lot of usability issues that customers complain about . After conducting 10+ interviews amongst proxy users and technical marketing people who spoke to existing customers constantly, we started to develop empathy for the users's pain points working with the current UI and came to know what we can improve on for the new UI.

Dashboard before redesign
Problem set (Dashboard)

Synthesize Findings

A problem set was created to combine all the findings from interviews and UI audits.
It serves as the major requirement doc for redesign.

Model the work

During the empathy building and synthesizing, we also started modeling the work. Target users of VCF UI are cloud admins—usually they're very familiar with existing vSphere UI. They have expert knowledge of compute, network and storage. They usually manage the workloads for a company or a single department in a large company. Storyboards were used in the discover process to help understand the typical workflows of the users.  In the example below, Sam is a cloud admin, he works at the same company as Frank. The storyboard illustrates the use case of Add Rack and Create a VDI workload domain.

Understand how the current system works, using conceptual modeling.

Storyboards were used in the discover process to help understand the typical workflows of the users.
In the example to the left, Sam is a cloud admin, he works at the same company as Frank. The storyboard illustrates the use case of Add Rack and Create a VDI workload domain.

Information Architecture Redesign

Site map after redesign
Site map after redesign

Flatten the IA

In the Old UI, hosts are accessible from under Racks or associated from a workload domain. In the redesign we decided to elevate it because it has its own group of frequent actions and is more appropriate to be treated as an object, rather than an attribute.
Further more, we introduced a left nav that has sub menu under main categories. This way we reduced one click and make the navigation more efficient. It also shows the users what's in the system at a glance.

Combine Status screen with Dashboard

Based on UI audit and user feedback, we identified a major IA flaw in the old UI—User is forced to go to a separate status screen to see alerts in the system or just to know whether a running workflow has succeeded or failed. It has slowed down the workflow of users and we decided to migrate important status info to dashboard. In the new dashboard, only critical alerts and errors are filtered to surface up because we don't want to flood the users with warnings and info messages.

A collapsable Status footer

Users wants to know the overall system's health as soon as they arrive at the landing screen, they also would like to access it while performing other tasks. So I went into the direction of having a status footer that is collapsable and accessible from all screens.

Redesign the update flows

Shift the focus

In the old UI, the update flow was bundle centric. Through the discovery phase, we found out that users would in fact prefer a more precise and powerful way of doing update—updating a workload domain at a time. So we proposed this new journey of domain centric updates. The notion of "pre-check" was introduced by PM and backend to do error prevention.

The update user flow after redesign
Old VS New high level user journey
The update user flow after redesign
The update user flow mockups

Minimize the repo page functionalities

Us moving away from bundle centric updates led to a simpler global repository page—users are limited to exam and download bundles from this page.
One interesting challenge I faced was that VCF update team has built the backend in a way that a workload domain must follow certain order to do patches, and it cannot skip ahead to apply latest patches. This is certainly a flaw in the backend design, but at that point of time, there's no time for backend to fix it in the short term.

The requirement becomes to direct users intentionally to download the bundles that are immediately applicable for workload domains(but not the most recent).

The solution is to separate the page into two sections and prioritize the "applicable bundles" section on the top and tuck non-applicable bundles at the bottom. Although user can download bundles from both sections, the top section is more actionable by giving links to domains that these bundles can apply to.

Testing + Iteration

I worked with a user researcher together to craft tasks and script for testing during VMworld 2017(Las Vegas and Bacerlona). It's a confluence that VMware holds annually to present new products and features. We were able to schedule with around 10 participants to go through major tasks like create and expand workload domain, add physical resources, perform updates, etc. The feedback was pretty positive. Tweaks to the main navigation and a couple places were made to address issues discovered.

Invision Prototype (Medfi)Invision Prototype(Hifi)

Closing thoughts

Most challenges I faced during this almost one year project was working with technology constraints. A couple times, my highest priority wasn't my developer peer's highest priority and thus I have to work with some not ideal existing patterns. However I do feel proud of my work, as it helps improve the usability drastically and made it super easy for other designers to collaborate because of the adoption of a common design library— Clarity. Being the single designer on a product, I really enjoyed the collaboration with other team members like PMs, engineers and other UX folks that I occasionally reach out for help.