Further improvements to Project overview UI
This is the implementation issue for related ~"product discovery" in https://gitlab.com/gitlab-org/gitlab-ce/issues/47759 and an iteration of https://gitlab.com/gitlab-org/gitlab-ce/issues/44704.
Problem to solve
With 11.3, we introduced a design update to our Project overview page. There has been additional feedback during exploration we addressed in the second discovery iteration.
- De-stress the top info overload section, add more whitespace
- Look into specced out projects, but also barebone projects that only have a name
- Enhance contrast to better differentiate between frequently used actions and less important actions
- Review new repository languages bar as additional UI element
- Project ID field should be less intrusive
- Remove remaining full-width horizontal border lines
- Can we utilize more color?
- Move meta information in title row to its own row?
With this implementation issue, we adress this input and further improve this page.
Solution
From https://gitlab.com/gitlab-org/gitlab-ce/issues/47759.
After around 5 iterations and lots of received feedback I managed to clean up the UI. I achieved that by only removing certain (duplicated) elements but mostly by moving things around and grouping them.
Desktop
Fully specced out | With clone dropdown | Barebones |
---|---|---|
![]() |
![]() |
![]() |
Changes:
- moved star, fork and new clone button (copy SSH/HTTPS URLs) to top right, made them smaller
- avatar is now larger (64px)
- 'Request access' is now a link instead of a button
- overview comes before the description + changed styling and added icons
- description font-size is now 16px (large-paragraph)
- quick links to files are moved downwards below the commit/pipeline info
- margins changed to group content into 4 groups to clean up the interface
- visibility info reduced to icon-only and moved to the right of the title
Tablet
Fully specced out | Barebones |
---|---|
![]() |
![]() |
Mobile
Fully specced out | Badges expanded | Barebones |
---|---|---|
![]() |
![]() |
![]() |
Edited by Andreas Kämmerle