VMware Cloud Foundation Redesign

Complete revamp of 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 more efficiently to support cloud networking, storage and computing at the foundational level.
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


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 was out of date visually, it also had a lot of usability issues that customers complained 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 served as the major requirement doc for redesign.

Model the work

Following the empathy building and synthesizing, we started modeling the work. Target users of VCF UI are cloud admins—usually they're very familiar with existing vSphere UI (VMware's core product). 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.

I also maped out how the current system works by 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 usability flaw in the old UI—when user completed a workflow, she 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.

Workflow redesign

Working alongside the PMs and engineers, I've redesigned multiple workflows for Add & Delete Workload Domain, Expand Workload Domain, Extend and Stretch Cluster, Add Rack, Add Host, Decommission Host, etc. These workflows all utilizes the stepper component. Check them out on VCF's Youtube Channel.
I also introduced this notification pattern to make the status monitoring of workflows much easier.

Deleting Workload Domain & tracking status of workflow (Implemented)

Update flows redesign

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.

Later the functionality was implemented and here's the product update flow walkthrough.

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

Minimize the repo page functionalities

We decided to move away from bundle centric updates and that led to a simpler global repository page—users are limited to exam and download bundles from this repo 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 immediately apply to once downloaded.

Testing + Iteration

I worked with a user researcher together to craft tasks and script for user testing of med-fi prototype during VMworld 2017(Las Vegas and Bacerlona). It's a conference that VMware holds annually to present new products and features. We were able to schedule with around 10 participants to go through major tasks. The feedback was generally pretty positive. Tweaks to the main navigation and a couple places were made to address issues discovered. The testing has many impacts on high-fi creation.

Invision Prototype (Medfi)Invision Prototype(Hifi)

More prominent Alerts in Dashboard

In the mid-fi testing stage, Tasks/Events/Alerts panel is by default closed, and in the testing, we found that it was hard to discover. User would like to see some recent critical alerts really quickly once they log in. So we added alerts widget showing recent critical alerts in dashboard and make the alerts panel open by default.

Research informed navigation changes

In the mid-fi prototype, most participants overlooked "Inventory" from the header and relied a lot on dashboard to navigate to workload domains. To resolve the discoverability issue, we moved towards a left nav.

Closing thoughts

Looking back after 6 months after completion of this project there is a lot of room for improvement.  

I could have pushed harder on the process— we need to put more rounds of user test in to get things right.  Also, Our client were extremely protective of their users so often times we were getting feedback from marketing folks who talk to customers constantly. Especially the initial research with which the problem set was based on, we were only able to talk to proxy users who represented the existing customer base and failed to talk to many prospect users. On the other hand I do understand that the goal of this project was to achieve parity of functionality so there weren’t  many strategic business decisions to make.

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.