VMware

Bridging Environmental Awareness with Design

Project Information

Client: VMware Inc.

Date: July 2018 - March 2019

Team Size: 10-15

Role: Principal UI/UX Designer

Key Learnings

Thoroughly understanding Clarity Design principles
Designing dynamic search experiences
Complex data reporting interfaces
Comparative experiences for data graphs
Data visualization for diverse parameters
Report management for returning users

The Problem

In recent years, there has been much discussion surrounding the world’s energy crisis. While no simple solution exists, individuals and companies are often looking for ways to reduce their carbon footprint by more efficiently using their current resources.

An area that might go overlooked by some is the amount of energy used to power the hardware needed to run computers and servers. The client for this project, VMWare, wanted to give its users an interface that could display energy usage information to its customers based on the location of their hardware. This Carbon Avoidance Meter would allow users to quantify their carbon footprint, and give them an opportunity to find ways to reduce their energy consumption.

Since many users have hardware situated in multiple locations, the goal was to create an interface that would allow users to enter up to four locations to track their energy consumption, with the ability to add and delete locations seamlessly.

This Carbon Avoidance Meter would allow users to quantify their carbon footprint, and give them an opportunity to find ways to reduce their energy consumption.

Key Challenges

The Carbon Avoidance Meter interface design had to incorporate VMware’s design language, Clarity Design.
Users would need a simple way to add/edit/delete new locations within the interface, and quickly identify the data’s relation to hardware locations.
The data output about energy consumption needed to be user-friendly, easily-interpreted, and helpful to the user.
The information surfaced needed to be easy to filter and exportable.
The interface itself needed to be clean, attractive, and simple, to reduce cognitive load on the user and focus on an efficient and readable display of data.

The Breakdown

Since the Carbon Avoidance Meter required a small number of essential functions to be effective, I organized all of the required pieces of the application into three high-level pages:

Home, Dashboard, and Account Details.

Homepage: A Personalized Space for the User

The “Home” page features all of the company news, updates, and account summary--basically, all the things a user would be interested in seeing upon logging into the application without cluttering the space. It utilizes a simple layout, listing the user’s name, company name, account ID, and support entitlement level along the top of the page. Upon first use, the main body of the Home page contains an overview of how to use the Carbon Avoidance Meter and prompts the user to enter their first location in the form of an “Add a location now” call-to-action button.

Adding a Server Location

The “Dashboard” tab is where the data about energy consumption is surfaced. I wanted to avoid the appearance of empty dashboard data blocks for first-time users, so users who have not yet added any locations would see a search bar prompting them to enter the first location. The search bar is prominent and resembles a Google search, utilizing a third-party API to suggest locations in real-time as the user begins typing. This makes the search tool easy to use and eliminates the need for a “search” call-to-action button after the user types a location.

Comparing Multiple Locations

Within the Dashboard, the current address (including geographic coordinates) is anchored at the top to help the user identify the data as pertaining to that location. A large “Add more” button is situated next to the current address in order to give the user a quick and convenient way to add another location from the Dashboard. Addresses added after the first are entered using an overlay box with a search bar and map to display the physical location as the user enters the address.

Within the Dashboard page, the user can filter the data by date and specific location using drop-down menus, or click on an “Export” button to download and save the data about the location’s energy consumption as a CSV file. This gives the user finer control over the data displayed and allows them to use this data for outside analyses.

Digesting the Data

The data about energy consumption is displayed using different graphs, colors, and icons so that users can easily understand it. At the top, the application displays the number of kilograms of CO2 saved per hour and a pie chart tracking efficiency, providing users with the most critical information about their energy consumption without being too technical or confusing.

Below those stats, the location’s energy consumption is broken down into percentages by type (wind, nuclear, solar, natural gas, coal, and other) to give the user a more well-rounded picture of the energy sources being consumed. A daily carbon score utilizes a color-coded grid to display the kilograms of CO2 avoided per hour for a given period, allowing the user to note times when energy consumption may be higher or lower.

From there, the user can also see information about carbon emission, power sources, carbon avoidance, and an energy breakdown displayed in easily-understood, colorful graphs. Most importantly, the bottom of the page offers suggestions to help users improve their carbon avoidance score. These offer real feedback about the user’s VM density, power type, and CPU efficiency. This not only helps users to understand what contributes to their level of energy consumption but also gives them an opportunity to change it.

Account Details

Finally, the “Account Details” page is where the user sees a summary of data centers and collectors. The top header of the page provides a quick summary of global information about all of their data centers at a glance. It lists the master ID, number of registered collectors, total number of VCs collected, total number of hosts, total number of VMs, and when the last activity took place.

Below the header, all of the locations that have been added to the account are listed in rows with information about the collectors’ status and activity. An “add location” button located to the right of each collector gives users an additional way to add server locations, or the option to edit existing locations.

Conclusion

This project challenged me to create an interface that presents data in a way that is meaningful and engaging for its users. Through the use of a minimized backdrop, colorful graphs, and streamlined information delivery, the final product provides a simple and effective way for VMWare users to monitor their energy consumption and take steps towards reducing their carbon footprint.