Beautify the UI of Build Features
Release Notes
One of GitLab's most used areas is pipelines. In 16.1, we focused on improving the usability and experience of the jobs list view, pipeline details pages, and pipeline index pages making it easier to find the information you are looking for!
Design
- Designer: @veethika
- Engineer: @pburdette
- Milestone(s): %16.1
Focus - ✨ Pipeline/Jobs related workflows ✨
| Effort | Change | Related workflow | MR | Design | Status |
|---|---|---|---|---|---|
| Quick win | Change tooltips on job list view | Checking the status of a running job/reviewing the performance of an old job | !119782 (merged) | No design required | Done |
| Quick win | Change the button label on pipeline detail page from cancel running to cancel pipeline and add an appropriate tooltip |
Monitoring a pipeline run | !119982 (merged) | No design required | Done |
| 2-3 | Runner number does not link to runner admin page | Investigating a runner's performance | !120008 (merged) | No design required | Done |
| 2-3 (design required) | Harmonize fonts for pipeline ID, branch name, commit ID across pipeline and job list views and details views | Navigate to related MR or commit that trigerred a pipeline | |||
| 3-4 (design required) | Unbox pipeline detail page | Monitoring a pipeline run | Multiple MRs (see related MR section of this issue) | Link | In progress |
| 3-4 (design required) | Re-arrange data on jobs list view to match the pipeline list view | Checking the status of a running job/reviewing the performance of an old job | Link | ||
| 2-3 (design required, STRETCH) | Improve the layout of Pipeline analytics page | Link | |||
| 2-3 | Update badges across pipeline pages | Checking the status of a running job/reviewing the performance of an old job | !121876 (merged) | Link | Done |
Ideas
| Problem and Suggestion | Before | After |
|---|---|---|
| Change the tooltips on the job list view |  |
TBD |
| Problem and Suggestion | Before | After |
|---|---|---|
| Unbox pipeline detail page |  |
TBD |
| Problem and Suggestion | Before | After |
|---|---|---|
| Use single stats and other prescribed patterns for CI/CD analytics page |  |
TBD |
| Problem and Suggestion | Before | After |
|---|---|---|
| Harmonize fonts for pipeline ID, branch name, commit ID across pipeline and job list views and details views |  |
TBD |
More details
Every milestone, we will ask Product Designers and Engineers to volunteer to partner in making self-directed usability improvements. It is an opportunity to fix the things that have been bugging you or that you've heard from users without worrying about prioritization.- Self-Directed: There are no restrictions on where in the product the pair can make improvements. The goal is to empower the pair to focus on usability improvements that they personally want to see fixed in a product that they use themselves almost every day.
- No restrictions on product area: The pair is not required to work within product areas owned by their own stage groups.
- No restrictions on pairings: The Product Designer and Engineer pair do not need to be from the same stage group. This is a voluntary initiative.
- Work in MRs, not issues: Both the Product Designer and the Engineer should work directly in MRs to make changes. For the Product Designer, these MRs will likely be focused on less complex usability issues that the pair identifies, such as documentation, minor UI polish, or UI text changes.
- Length of rotation: The length of the pairing will be 1-3 milestones, depending on what the pairing believes is appropriate for them. This means that multiple groups could be working on Beautifying our UI in parallel.
- Prioritization: The Product Designer and Engineer will inform their stage group team of their involvement in the initiative, so that they can make time for it during milestone planning.
What this issue is for
- Link each MR to this issue
- Brain dump potential UI fixes
Testing
Please make sure package-and-qa job passes in every MR as we expect some E2E tests will be broken by the changes. QA review would also be beneficial.
Edited by Jackie Porter