GitLab Geo

UX/UI Design, Illustration, Design System

Intro

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.

The First Iteration

Problems

There are a few problems we were going to address:

A bunch of information in a single page, and it relied on plain text heavily to show the info.

Goals

Approach

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.

The Second Iteration

Problems

In the second iteration, we were going to address:

There were more than eleven items display at once in the Geo table 😱

Goals

Approach

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.

Geo Table Components and document

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.

Related Links

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:

Who Else was Involved in the Project

Product Manager, Frontend Developer, Backend Developer

More Projects