UX/UI Design, Illustration, Design System
Geo is a premium feature on GitLab Enterprise Edition. It allows a widely distributed team to work efficiently as Geo reduces the time it takes to clone and fetch large repos. It is very useful on GitLab EE.
Our Geo team found more and more problems in Geo as more new features were added. Since we don't ship a feature with dramatic changes, we prefer to ship small segments of a big change in the monthly milestone so that we are flexible to receive feedback and iterate quickly.
There are a few problems we were going to address:
As you can see in the screenshot of the old Geo page below, there was a lot of information on Geo page, such as “Repositories synced”, “Health Status”, “LFS” etc., so users were hard to browse the info quickly and effortlessly.
You can also notice the way it displayed the names of each item were inconsistent. Some of them were in Uppercase for the first letter of the word, but some of them were shown in a way mixed uppercase and lowercase.
The editable form should not always show on the Geo dashboard page. It should show on a separate page when users need to edit. So that it would be consistent with other features' interaction.
A bunch of information in a single page, and it relied on plain text heavily to show the info.
Display the data with progress bars instead of plain text so it would be intuitive to learn.
The editable form is on a separate page.
Friendly illustration and useful copy improve onboarding experience for the new users 🎨
Display the items in a way which is easy to read on mobile.
In the second iteration, we were going to address:
It was getting harder to interpret the data and status. Also, it was also difficult to read a long list of items.
There were more than eleven items display at once in the Geo table 😱
So that the data with low priority can be hidden. Categorize the data can have the layout clean and let users find it effortlessly.
In the new designs, most of the items are collapsible as default so it can prevent the page from becoming very long when there is a lot of information.
Categorized the items so they could be hidden if they are not the information users need to check all the time.
Based on the new structure, most of the information could be collapsed as default. It prevents users from the distraction.
If a user wants to get more details, you can expand the section to see more info.
During the time, Design team were working on our own Design System. Geo table design was added to GitLab Design System("Pajamas"). The documentation of Geo table is here.
If you are interested in getting more details about GitLab Geo and how we envolved the designs, the links below could provide you more context:
Product Manager, Frontend Developer, Backend Developer