Skip to content

Design: Revisit the Kubernetes section UX

Problem to solve

When a user lands on the Kubernetes section it is not clear what options they have for integrating their Kubernetes infrastructure with GitLab. The language we use on the UI is confusing and the documentation is not helpful either to help them understand what options they have, what use cases each solution can be used for, what benefits and drawbacks there are in each option. The Agent and cluster listings are confusing as the terminology is not consistent and we use our internal understanding to describe GitLab's Kubernetes offering. Finally, we make a distinction between Agents and clusters connected with certificate even though we don't know what the mental model of the users is. Do they consider these two ways to connect their clusters to GitLab or do they also consider them to be separate Kubernetes solutions?

Intended users

User experience goal

Make all the Kubernetes integrations options clear for the user so that they can choose the option that helps them achieve their goals.

Proposal

  • Redesign the Kubernetes landing page so that all the integrations and integration options are present. Clear and concise information should give an overview of what options the user has for integrating their Kubernetes infrastructure with GitLab. All possible integrations should be available from the landing page.
  • Fix the breadcrumb so that it reflects the hierarchy and navigation.
  • Change the way we speak about the GitLab Kubernetes management offerings. Use a language that is clear and understandable even to users who know nothing about the Agent or the certificate-based integrations. Modify all the copy in the UI with the updated language.
  • Make the language consistent on all the UI components.

Empty state

State with content

Long-term design vision

Iteration 1: new overall UI

  • Empty state design
  • Content design should implements
    • 3 tabs at the top
    • "All" tab should show the currently existing listings one under the other
    • The other 2 tabs should show the currently existing listings
  • Actions button is constant across tabs:
    • Create new cluster
    • Connect with agent
    • Connect with certificate

Iteration 2: fix the links

  • Each tab should have a "permalink" - reloading the page should show the current tab
  • The "Add Kubernetes cluster" think on the main project page (example here) should point to the "Connect with agent" page

Related issues

Documentation

Created an issue to improve the documentation as well as the navigation for Kubernetes: #324030 (closed)

Links / references

Figma (design) file: https://www.figma.com/file/J1BRYrcK8fZ6YK9lcMhcYp/Revisit-the-Kubernetes-cluster-UX-after-the-Agent-is-released-project-254998?node-id=2%3A50

Edited by Justin Mandell