VMware Cloud Foundation Redesign

Complete revamp of a cloud infrastructure web app

ABOUT THE PROJECT

VMware Cloud Foundation is a web app that helps Cloud admins monitor and manage both hardware and logical resources to support cloud networking, storage, and computing at the foundational level.

It was initially built by engineers and was able to gain initial customers in its first year of release. However, it has many usability issues, making a negative impact to business growth.

MY ROLE

UX Designer

TIMELINE

8 months, 2017-2018

TEAM

Engineering lead, Engineers, Technical PMs
Another staff-level product designer as a “consultant.” UX writer, researcher.

Context

I was brought to the team to redesign the whole product to improve its consistency and overall user experience.

In my first couple of weeks, I focused on learning about the product and the domain. I collaborated with another researcher to conduct stakeholder interviews and worked with marketing and sales to develop my understanding of the product functionality areas and problem sets we're trying to solve.

Dashboard before redesign

High Level User Journey and Problem Areas

Problem areas

How might we empower cloud admins to manage their cloud infrastructure with more confidence and success?

Define Project Goals

After discussing with stakeholders, we aligned on these goals.

Strategies

Key UX Metrics

During prototyping and testing, my fellow UX researcher and I focused on measuring these metrics:

• Ease of use   • Meet Requirements

Setup 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.

Check them out on VCF's Youtube Channel for some of the implemented user flows.

Workflow stepper

• Applied a consistent stepper component.
• Used appropriate interaction patterns, including data grids, inputs with real-time verification, etc.
• Providing helpful default values.
• Provides more guidance & help info along each step; to aid efficient decision making.

Update Journey Redesign

Old user journey

Cloud Admin Jason wants to keep his domain up-to-date. He starts browsing update bundles from the Life Cycle Management page, downloads the bundles and bulk applies each bundle to select workload domains.

By talking to proxy users I identified pain points along the way. After discussing them with the PM and Eng team, we aligned to solve these key pain points:

• Bundle-centric update flow mismatches users' expectations. Users actually prefer to update one workload domain at a time instead of applying bulk updates.
• User doesn't have an effective and efficient way to pinpoint risky alerts on a domain that will lead to update failure.

After talking with the team, we aligned on the following strategy.

LCM redesign strategy

I started on the new update user flows and low-fi wireframes. During this step, I collaborated closely with engineering team to make sure I take all the edge cases into consideration.

New update user flowNew update user flow low-fi

Med-fi Designs & Testing

After building the med-fi designs for both success and error scenarios, I collaborated with the UX researcher to validate the designs at VMworld, VMware's customer-facing conference. We were glad to find out that all 9 users we tested gave 5/5 ratings for ease of use and they found starting the update flow from workload domain page very intuitive.

New update user flow prototype

Taking feedback learned from user testing, I continued to iterate the designs in the Hi-fi stage.

New update flow hifi

Monitoring Resource Allocation & System Status

The home page dashboard was expected to be the central hub for users to monitor system status and advise actions to take. However, the old dashboard doesn't showcase system status, and the capacity allocation information is too high level to be useful.

old dashboardold status page

Initial Designs

After making several low-fi sketches, I arrived at the initial design of the dashboard, which surfaced high-level status information, and had clearer visualization of capacity utilization.

medium-fi dashboardFixed status footer

Testing & Takeaways

By showing the designs in front of users at VMworld, we found that users generally liked the direction the Dashboard is going and appreciated that it stays simple. They also loved the quick access to system status. However, there were a couple of takeaways.

medium-fi dashboard feedback

One other finding is regarding browser width. All cloud admins we talked to use VCF from their wide-screen monitors at work. I also got guidance from the VMware design team to design for the bigger screen size (1920X1080).

Final Version

I continued to iterate based on the feedback from user testing.

hi-fi dashboard

Impact

The whole end-to-end design has been implemented by developers and started serving existing and new VCF users in 2018. As the initial sole designer brought on the team, I was able to build a foundation that's cohesive with other VMware products, easy to perform key setup & update workflows, track system status, and stay informed of capacity usage.

During the first year of its official launch, VCF also 10X its annual revenue.

My Takeaways

Get to the root problem.

Before kickstarting a project, it’s good to get buy-in on what problems we’re solving.  If the core problem happens to be a technical one, that’s fine too. Get to the root of it by having conversations with relevant parties, and having a curiosity mindset.

Think in systems.

Having a design system is excellent for scaling designs. Working on this project for almost a year, I learned extensively about building designs on top of a design system. It changes how I view designs holistically.

There’re more ways to validate.

Of course, it’s ideal that we can validate our designs with users/ prospect users. However, when conditions don’t allow, testing the design with other proxy users could help as well. Don’t sit and wait for conditions to change. Try to create that condition and push for change.