These are a few selected projects that I've been involved with at VMWAre
vCloud Director was VMware's initial offering at a software defined datacenter. It was an on-prem solution focused on cloud providers to support different tenants with resource isolation.
I was one of three designers on the initial efforts looking at information architecture and navigation and eventually focused on the template catalog. I transitioned to UI developer and supported the creation of a number of workflows including the catalog, inclusion of alert mechanism and graphing of resource utilization. [Omnigraffle, Sketch, Flex, Actionscript, Bugzilla, Jira, PivotalTracker, Agile development process]
Home Page with Alerts
The home page includes a guide for the user to walk through the initial installation steps to have a fully functioning system. Other day-2 tasks are available when the user needs to run common workflows. Triggered alerts are surfaced on the home page to make them more visible to the user.
As system administrator I am able to see all the organizations (tenants) that are active in the system and be able to drill into those to manage resource allocation across all tenants.
The vSphere Resources section of the interface allows the administrator to manage those resources that back the infrastructure, including vCenters, resource pools, physical hosts, datastores and networking. Here the vCenters page shows the status of all vCenters that back the infrastructure.
VM Lists Page
The VM lists page was augmented to display any alerts on the resources of a given tenant.
Alarm Creation Wizard - Create Trigger
This new wizard was created to allow the administrator to create specific alarms on resources within a tenant. Here the organization administrator can create triggers for an alarm and set the warning and alert thresholds.
Alarm Creation Wizard - Add Actions
The next step in the wizard allows the organization administrator to create actions that will send emails when specific criteria levels of the alarm have been met. Emails can be sent for both a warning and critical level.
Resource Utilization Graph - All metrics selected
The administrator can view the metrics for CPU, memory, disk and network utilization. The user is able to select those metrics most important to them and the time range in which to view them.
Resource Utilization Graph - Focusing on Specific Metrics
The user can focus in on specific metrics and change the vertical scale of the graph revealing more detail.
Photon Controller is a Cloud Native Application that was designed to deploy thousands of VMs and containers within an infrastructure based solely on ESXi hosts. No vCenter installation is required. This project allowed administrators to manage "pet" machines while allowing developers to deploy thousands of "cattle" to run their workloads.
I was one of a number of designers over the lifetime of the project that applied VMware's corporate visual standard guidelines, Clarity. I worked on information architecture, overall layout and the application of the standard visual look and feel.
[Sketch, Axure, Omnigraffle, Invision, Bugzilla]
Photon Controller - Tenant Page
As a tenant of Photon Controller, the user can see all projects that are available to them. They can drill into a project as can be seen in the next screen.
Photon Controller - VM Page
The user can see the overall utilization of resources for their project as well as the total number of VMs and disks being used. Drilling into a project, the user can view the VMs or clusters that have been deployed within the project.
Project Harbor™ is an enterprise-class registry server that stores and distributes Docker images. Harbor™ extends the open source Docker Distribution by adding the functionalities usually required by an enterprise, such as security, identity and management. As an enterprise private registry, Harbor™ offers better performance and security. Having a registry closer to the build and run environment improves the image transfer efficiency. Harbor™ supports the setup of multiple registries and has images replicated between them. With Harbor™, the images are stored within the private registry, keeping the bits and intellectual properties behind the company firewall. In addition, Harbor™ offers advanced security features, such as user management, access control and activity auditing.
I initially jumped in to help the Harbor team move toward the corporate standard, Clarity. Eventually, I worked on the information architecture, navigation and overall design. This included the integration with Admiral, the management portal for Docker containers.
The login paged serves 2 purposes, access to the authenticated application but also access to public repositories that are in the system for use without authentication.
Projects List Page
The projects page lists all projects the user is allowed to see. Users include administrators, project owners, developers and unauthenticated users. Overall metrics are shown on this page with the ability to create a new project or drill into existing projects.
Projects Details Page
A project is made up of repositories, members and replication rules. The user can also access the logs related to the project as well. On the replication page, the user can create a new rule, see the status of a given rule, or the details of jobs related to a selected rule.
Replications consist of endpoints, the destination of the replication, and a set of rules that trigger the replication from the Harbor installation to the destination endpoint. From this page the administrator can manage all the replications in the system.
Project Repositories Page
Drilling into a project, the user can see all the repositories that live within that project. The user can expand a repository and see all tags, i.e., all versions of that repository, along with whether that image has been signed and the vulnerability based on a scan of all the components of that image. The user can drill even further to see the detailed vulnerability status.
VMware vSphere Mobile Watchlist
vSphere Mobile Watchlist enables secure vSphere infrastructure monitoring and remediation directly from your smartphone. With Watchlist, VMware administrators will be able to log into a vCenter Server or ESXi host directly and choose virtual machines and hosts from inventory to created targeted views of objects and their properties. Remediate directly from the device with power and management operations, VM console interaction, and delegation of tasks to onsite colleagues with linked relevant Knowledge Base articles.
This project was based on extensive research of vSphere administrators and was applied to create an application that does not try to replace the datacenter experience but to augment it with discovery, understanding and remediation when on the go.
I was one of 3 designers that worked with 2 developers to implement this application on iOS and Android. Eventually, I transitioned to developer to add functionality for 2 new screens, the graphing of utilization of CPU, memory and networking and the reconfiguring of a VMs properties. Eventually, we had over 100,000 downloads for iOS and Android and got positive reviews with comments like: "Its vSphere in your pocket"
[Omnigraffle, Briefcase, Pop (Marvel), Xcode, Objective-C]
In order to help design the interaction, I created a site map of the navigation between all the application screens. This early map enabled us to understand the connections between screens and make the experience as straightforward as possible.
A Custom Watchlist
A watchlist shows the status of a collection of VMs and/or Hosts. The user customizes these lists to contain only those resources that are the most important to the administrator. The status can be immediately determined by viewing the VMs console, seeing the power state and any alerts on the resource. Additionally the user can see the resource utilization for CPU, memory and disk. Selecting the row will drill into more detail of the resource.
Watchlist Alternate View
This view shows more VMs or hosts but less information for each item. The user can see the console, power state and any alerts for their watchlist items. Tapping on the item will drill into the details of that resource.
VM Details Page
After drilling into an VM, you can see more details with links to any alerts, system details, any related objects (such as the host on which its running or datastores connected), and other VMs on the same host which may be the cause of any issue. In addition, you can drill into more detail that graphs utilization, provides access to the console, allows the user to manage snapshots, view tasks and events and get access to actions on the VM.
VM Resource Utilization
By tapping on the graph icon in the VM details, the user can explore graphs for CPU, Memory, Storage and Networking. When the user drags their finger across the graphs, the exact value at different locations is displayed.
The administrator can reconfigure the CPU and Memory when the VM is turned off. This allows for simple remediation when away from the datacenter.
List of Articles Related to the Selected Alert
Drilling into an alert shows search results from VMware's knowledge base of articles. Special articles were constructed to address the alerts and point to even more content within the knowledge base. Users can also expand their search to the web in general. Users can bookmark an article and they will show up the next time the same alert is searched. They are placed at the beginning of the list as can be seen here. These alerts, articles and VM status provide a context which can be shared via email to colleagues back in the datacenter that have the full power of vSphere to correct more complicated issues.
Knowledge-Base Article Details
When an article is selected in the search results, the full article is shown within the application. This article has been bookmarked so the next time this alert is seen, this article will show up in the search results.
All alerts that are on items in the user's Watchlists are shown in this list.
List of Bookmarks
All bookmarks that have been saved are stored and shown here. These bookmarks are grouped together based on the alert on which they were created.