‘How quickly can I see value?’
Onboarding new users to VMware Tanzu Hub
The Problem
VMware Tanzu Hub is a powerful new system for managing large-scale multi-cloud environments. But before customers can see the value of the system they need to go through a multi-step onboarding process. If onboarding is too difficult or takes too long, customers may drop off before they realize the value of the Hub. The onboarding flow needs to ensure that customers successfully complete the tasks so they quickly experience value.
The Product
VMware Tanzu 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.
In simpler terms, the Hub provides a series of dashboards and dynamic graphs that monitor and visualize large-scale cloud environments and applications. Users can see alerts and insights from their entire system, and ask the AI assistant to find resources and applications that need attention.
The Users
Users of the Hub are IT professionals that build, monitor, and troubleshoot infrastructure in large-scale, multi-cloud environments. They provide resources for applications, and troubleshoot issues that arise with networking, security, and storage. They troubleshoot alerts, and watch for areas where they can improve efficiency and reduce costs.
The Team
The Hub was a new product being developed as a fast-paced, agile effort. We started as a small team but grew as our business strategy aligned around the Hub being the new platform for all our cloud management products.
My role: Design lead
Designers on the Hub: 5
Cross functional team includes: Product Management, Development, Documentation
Process: Agile, 2 week sprints, design reviews, stakeholder reviews, demos, Jira tickets
Design timeline: About 6 sprints
Design system: Clarity
The Design Process
Design Exercises
As the design lead I guided the team through exercises to understand the entire customer onboarding journey, and identify the most difficult steps.
Design brief
My favorite way to start a project like this is to get the team together and run them through a design brief template. I’ve tried many tools over the years but find that the example shown here gets results fast and helps everyone come together and focus on the prime use case. The form is fairly simple but getting the team to work through it together brings clarity around the stakeholders, prerequisites, and main scenario. Any variations and related flows can be noted at the bottom so they aren’t lost, but the goal is to keep the team focused on the main scenario that a user experiences.
Journey Mapping
Next I led the team through an exercise to map the customer journey in a Miro board. We added screens and mocks of the different areas being worked on so we could see the entire experience. This showed us the scope of the journey and the parts that still needed to be designed.
What We Discovered
Customers need to go through a fairly long journey. From their perspective this is all one flow and we have to guide them through the entire experience.
The hardest task is adding their cloud accounts. We knew from interviews that customers want to add their own accounts in a Free Trial mode so they see familiar data in the Hub. We explored whether sample data could be used instead, but customers need to see their own data to evaluate the system.
From this we broke the design work up and made assignments. I worked on several parts of the journey and ran design reviews for all areas, but for the rest of this use case I’ll focus on my designs for adding cloud accounts.
Understanding Technical Constraints
My next task was to understand why account onboarding is so complex. I met with PM and Dev understand the process. These are the main challenges we discovered.
Security - Users can’t do all the tasks in the Hub. Due to security access issues, they need to work in both the Hub and in the cloud console for their accounts, such as AWS, Microsoft Azure, or Google Cloud Platform.
Technical - Scripts need to be run in the cloud consoles. We can give the user the script but due to the security issue above we can’t run it for them automatically.
Multiple steps - There is more than one step to adding an account. First the Hub must be given read-only access to the account, then the customer can configure additional access for actions, and configure the account for real time data collection.
Configuration - Accounts can be fairly simple or very complex. Each cloud type supports a hierarchy of accounts. We need to support the ability to add a root account and discover all the accounts below it.
The Release
Splash Page
When a user first enters the Hub they see a splash page with a button to add their first data source.
Design Decision - Users Must Add An Account
Notice in the image that the user can only go to the flow for adding an account. They can’t explore the UI until after they’ve added a data source. We discussed whether we could provide sample data, or show an empty system, but customers strongly preferred seeing their own data in order to evaluate the system. We may revisit this later, but for first release decided to require that an account be added before the user can see the rest of the UI.
Manage Accounts Page
From the splash page, customers are directed to the Manage Accounts page where they can add cloud accounts. They can choose from the supported cloud types.
Design Decision - Full UI vs Quickstart
We decided to show the full UI for account management, instead of creating a special flow for first time users. We discussed how a dedicated first time flow might be easier for a new user, but we didn’t want to limit what type of cloud account the customer could use. We also needed to show all the capabilities so that the customer could evaluate the system.
Multi-step Launch Page
In order to help users understand all the flows available for each account, I designed this Account Setup page which gives the user access and status to each of the available flows. Clicking each item opens a flow.
Design Decision - Required vs Optional Steps
On the multi-step launch page, the steps are presented in a “best practices” order, but not all steps are required for all customers or accounts. When I showed this to customers we didn’t get a strong preference for how to show these. Some customers felt that all steps were required due to their environment, and other customers wanted to skip some steps, at least some of the time. We also tried labeling the steps as “optional” but for some customers this was misleading. We decided to show them in this order for the first release and revisit this once we had more information.
Guided Flows
Continuing from the previous screen, this is one of the guided flows. Each section completes one task, and directions are given for complex 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 entirely within the Hub, so we gave them a button that takes them to the cloud console and pre-populates the required form.
Design Decision - Inline Help Steps
In the form pages, notice that there are instruction steps listed in the interface. We debated whether to keep the UI “clean” and link to instructions, but I tested this and customers strongly preferred seeing the instructions inline. I worked with our documentation team to ensure that our instructions were aligned with the official documentation. This developed into a partnership with the Doc team to review and improve all the wording in our UI.
Success!
Home page is populated
Once the accounts are onboarded, the user is taken to the home page where they see a summary of information about their accounts. Each service such as Cost, Governance, and My Applications shows a customizable widget.
There’s also an AI assistant that helps users navigate to resources that need attention, as well as a traditional left navigation to other pages and services.
Graph view is populated
Once onboarding is complete, users can also explore graph views of their services and resources. 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.
This is a brief summary of some of my work on the Hub. Contact me to learn more.