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
- Sasha (Software Developer)
- Devon (DevOps Engineer)
- Sidney (Systems Administrator)
- Priyanka (Platform Engineer)
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
- Redesign the flow and UI under
Connect with certificate
: #325319 (closed) - Solution validation for this issue: #325716 (closed)
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