Use Case: VMware Tanzu Hub
The Hub is a centralized multi-cloud management platform that aims to simplify visibility, governance and collaboration. It provides users with a holistic solution to develop, deliver, and optimize apps across clouds.
The Hub is a new product being developed as a fast paced, agile effort. The Hub is also a central service that acts as a platform for multiple other products and services. I worked with multiple design teams to align them with the Hub to ensure that patterns and visuals all matched throughout the platform.
My role: Design lead
Designers on the Hub: 5
Designers on integrating products: 25+
Process: Agile, 2 week sprints, design reviews, stakeholder reviews, demos, Jira tickets
VMware Tanzu Hub home page
The Hub home page includes a customizable dashboard with widgets for multiple services.
There’s also an AI assistant that helps users navigate to objects that need attention, as well as a traditional left navigation to other products and services.
Image: VMware Tanzu Hub home page with AI Assistant
Using the Clarity design system
My first responsibility on the Hub was to align it with Clarity, the VMware corporate design system. Our stakeholders wanted to build an exciting modern interface, but we needed to use the existing design system to ensure alignment with other teams, as well as to ensure ease of implementation. I worked with the team to define how we could use Clarity wherever possible and design dynamic new visuals only where they were most effective.
Image: An example page of the Clarity design system
Graph view
The Hub uses a dynamic graph view to visualize objects in the customer’s cloud accounts. Users can select objects to see a side panel of widgets about each object.
In this screen you can also see the left nav which allows the user to move between different products and services. I led the effort to design and test the left nav so it is intuitive to the user.
Image: VMware Tanzu Hub graph view
Multiple step flows
Most of the Hub is graphical, but it includes some interesting forms and multi step flows. To make this easier I designed a layout that presents a series of flows that step the user through related tasks, giving them one logical set of tasks per flow. The steps are not always sequential, but are presented in a “best practices” order.
In this example the user can launch flows to add and configure AWS organizations and accounts.
Image: Account onboarding flows for adding AWS accounts
Guided flows
Continuing from the previous screen, this is one of the guided flows. Each section completes one task, and directions are given for difficult tasks.
In this example the user must jump to the AWS console and then back to the Hub. Due to technical and security issues we could not have the user do the task in the Hub, so we give “just in time” directions. I worked with the documentation team to ensure our directions aligned with the product documentation.
Image: Account onboarding flows for adding AWS accounts
This is a brief summary of my work on the Hub. Contact me to learn more.