Reduce developer onboarding time and cognitive load when navigating complex GitLab issues with a new context pinning feature

Reduce developer onboarding time and cognitive load when navigating complex GitLab issues with a new context pinning feature

Reduce developer onboarding time and cognitive load when navigating complex GitLab issues with a new context pinning feature

GitLab is an open-source platform built on Git, the distributed version control system. It offers a comprehensive suite of tools for managing repositories, project planning, continuous integration/continuous deployment (CI/CD), code reviews, issue tracking, and more.

In the spring of 2024, I collaborated with GitLab’s UX team - including senior product designers, UX researchers, product managers, and engineers - for my Human Factors Psychology Capstone Project. My UX challenge centered on streamlining developer onboarding: when receiving a task in the form of an issue, developers often lose time digging through lengthy threads and scattered discussions to understand their next steps. Working in a team of 4, I led the design of a new context pinning feature aimed at reducing onboarding friction and helping developers quickly orient themselves within new GitLab issues.

Date

Jan 2025 - May 2025

Role

Product Designer

Skills

UX Design, Visual Design, User Research, Concept Testing, A/B Testing

Team

1 Project Manager, 2 UX Researchers, 1 Product Designer (me)

TL;DR

The project at a glance

⎯⎯⎯

What is GitLab issue?

Issues help contributors collaborate with the team to plan, track, and deliver work in GitLab. One of the use cases of it is to facilitate team discussion and decision-making through comments and threaded discussions.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

The Problem

THE CURRENT GITLAB ISSUE BOARD SLOWS DOWN DEVELOPER ONBOARDING

Developers waste time and risk misalignment when onboarding themselves to new issues as they jump between multiple discussions, scan through lengthy threads, and manually piece together decision trails.

Developers waste time and risk misalignment when onboarding themselves to new issues as they jump between multiple discussions, scan through lengthy threads, and manually piece together decision trails.

Pain point 1: lengthy thread

Pain point 1: lengthy thread

It is overwhelming to click through numerous ancestor links and understand how the current issue relates to other issues.

Endless scrolling …

Pain point 2: complicated issue dependancies

Pain point: complicated issue dependancies

What are the relationships between the blocking issues and related issues?

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

The Solution (demo)

A NEW WAY TO GATHER NEW CONTEXT

The pinning feature helps users stay updated on the most relevant discussions by having a section for important comments. Clicking a pin instantly navigates users to that comment in the discussion thread.

The pinning feature helps users stay updated on the most relevant discussions by having a section for important comments. Clicking a pin instantly navigates users to that comment in the discussion thread.

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Let's backtrack a little

Validating the problem with research

⎯⎯⎯

Together with my team, I conducted 10 interviews with internal and external GitLab users

1.

It can take any time from a couple of minutes to days for users to fully understand the issue depending on the complexity

Austin, Staff Product Designer

"Sometimes the issue is not as straightforward as it might seem, and you commit to something that is really like a trapdoor, and you start working on something that you think is going to take maybe half a week or a full week. All of a sudden, there are so many other components to it that weren't visible at the beginning."

"Sometimes the issue is not as straightforward as it might seem, and you commit to something that is really like a trapdoor, and you start working on something that you think is going to take maybe half a week or a full week. All of a sudden, there are so many other components to it that weren't visible at the beginning."

2.

There are many hyperlinks/ ancestor links, so the user needs more time to find more context on previous issues

Alyssa, Product Designer

"There are always parallel ongoing discussions about related issues. And so then sometimes you end up in a rabbit hole discussion about a feature that tangentially touches another feature or a vision roadmap that is interfering with another one, and you have to figure out what to do."

"There are always parallel ongoing discussions about related issues. And so then sometimes you end up in a rabbit hole discussion about a feature that tangentially touches another feature or a vision roadmap that is interfering with another one, and you have to figure out what to do."

3.

When the project summary is not updated, it is hard to onboard onto an issue when there is little context or updates

Thomas, Staff Fullstack Engineer

"You would have 20, 30 long comments shifting the requirements. And then somewhere towards the end of this comment stream, you find this is the final requirement for the issue, and it doesn't match the description."

"You would have 20, 30 long comments shifting the requirements. And then somewhere towards the end of this comment stream, you find this is the final requirement for the issue, and it doesn't match the description."

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Through affinity mapping, we group the problem areas into 3 main themes:

Navigation

There was complexity in navigation, which was due to scanning through links, code files, other issues, and even people to get further clarification from

There was complexity in navigation, which was due to scanning through links, code files, other issues, and even people to get further clarification from

Lack of context

It wasn't immediately clear where an issue lies within the broader goals or project, or because the description did not contain enough updated information

It wasn't immediately clear where an issue lies within the broader goals or project, or because the description did not contain enough updated information

Information Overload

The long discussion threads and the long scroll format of an issues page

The long discussion threads and the long scroll format of an issues page

Which then came down to 2 paths moving forward:

HOW MIGHT WE #1

How might we make it easier for users to see the most relevant discussion comments?

How might we make it easier for users to see the most relevant discussion comments?

How might we make it easier for users to see the most relevant discussion comments?

HOW MIGHT WE #2

How might we improve the process of understanding the relationships between ancestors, child items, linked items, and epics?

How might we improve the process of understanding the relationships between ancestors, child items, linked items, and epics?

How might we improve the process of understanding the relationships between ancestors, child items, linked items, and epics?

The 1st one focused on the problem of lengthy discussion threads, while the 2nd one focused on the problem of navigating between different issues pages.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

Problems defined, let's move on to…

Ideation and Testing

⎯⎯⎯

Concept Testing

Through Crazy 8's Ideation, we came up with 2 concepts for the 2 HMW statements. I led the design for the initial concept prototypes.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

Concept #1: Pinning Feature

Concept #1: Pinning Feature

The pinning feature helps users stay updated on the most relevant discussions by having a section for important comments. Clicking a pin brings a user to the comment's origin in a discussion thread, providing an easier path for gaining context through these relevant discussions.

Concept #2: Linked Tree Diagram

The linked tree diagram helps users navigate related issues to gain context. It's located next to the list of child, linked, and merge requests. Clicking on an issue bubble takes you to the issue's page, where a block is indicated if it exists.

Pain point: complicated issue dependancies

It is overwhelming to click through numerous ancestor links and understand how the current issue relates to other issues.

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Through testing with 5 internal and external GitLab users, 4/5 prefer the pinning feature!

External Gitlab User 1

"I can immediately see the highlights or the main problem for this issue, which I think is a very good feature that I would actually go and use."

External Gitlab User 2

"It just makes my life a lot more easier now I don't have to find those information, I can just directly find it from here and then either reach out to the person or take a deeper look at the issue from the section."

Problems defined, let's move on to…

Design Iterations and Testing

⎯⎯⎯

A/B Testing

Through user feedback, one biggest design question that came up was: Where is the best location for the pin feature?

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

Placement #1: Main Section Layout

Placement #1: Main Section Layout

✅ Pros:

  • Pins located after the issue description align with users’ natural reading flow.

  • Richer content visibility.

  • Feels naturally integrated into the issue narrative.

✅ Pros:

  • Pins located after the issue description align with users’ natural reading flow.

  • Richer content visibility.

  • Feels naturally integrated into the issue narrative.

❌ Cons:

  • Requires scrolling back after reading comments.

  • Can feel cluttered with many or long pins.

  • Harder to compare multiple pins at once since they are vertically arranged in-page.

❌ Cons:

  • Requires scrolling back after reading comments.

  • Can feel cluttered with many or long pins.

  • Harder to compare multiple pins at once since they are vertically arranged in-page.

Placement #2: Side Bar Layout

Pain point: complicated issue dependancies

It is overwhelming to click through numerous ancestor links and understand how the current issue relates to other issues.

✅ Pros:

  • Users could quickly switch between multiple pins without scrolling.

  • Keeps the main issue content clean and allows pins to function as an overview or quick-access panel.

  • Good for quick overviews or comparisons.

✅ Pros:

  • Users could quickly switch between multiple pins without scrolling.

  • Keeps the main issue content clean and allows pins to function as an overview or quick-access panel.

  • Good for quick overviews or comparisons.

❌ Cons:

  • Lower discoverability.

  • Pins in the sidebar lacked full context.

  • Hover-based interactions are less inclusive for mobile and assistive technologies.

  • Users need to shift focus between main content and sidebar, which can increase mental load during onboarding.

❌ Cons:

  • Lower discoverability.

  • Pins in the sidebar lacked full context.

  • Hover-based interactions are less inclusive for mobile and assistive technologies.

  • Users need to shift focus between main content and sidebar, which can increase mental load during onboarding.

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Through A/B testing with 5 internal and external GitLab users, we came to some surprising findings:

Participants like the main section layout for its in-depth content

  • Efficiency: 3.75 / 5

  • Interpretability: 4 / 5

  • SUS score: 87.5

Participants like the main section layout for its in-depth content

  • Efficiency: 3.75/5

  • Interpretability: 4/5

  • SUS score: 87.5

Participants liked the side navigation bar for easier navigation between comments

  • Efficiency: 4 / 5

  • Interpretability: 3.25 / 5

  • SUS score: 89.16

Participants liked the side navigation bar for easier navigation between comments

  • Efficiency: 4/5

  • Interpretability: 3.25/5

  • SUS score: 89.16

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Since there was a tie between two variations, we decided to combine the best of both worlds

Combine the in-depth content of the main section layout with the easy navigation between comments: by clicking on the bottom link of the pinned comment, the user will be redirected to the pinned section.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

But can we technically build this?

Through a grooming session, I gathered feedback from the principal and backend engineers, as well as a senior product manager, to assess the technical feasibility of our feature and uncover potential edge cases we may have overlooked.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

"Pinning a section of the comment would be technically complicated."

One biggest engineering feedback is the technical complexity of pinning a section of the comment.

Therefore, for the MVP design, I shifted to pinning a whole comment first, and leaving pinning a section of the comment to future development if the team receives a significant number of requests and feedback about pinning just sections of comments.

The redesign of the MWG Loyalty App improves engagement at three levels:

  • Micro: Focuses on moment-to-moment experiences, optimizing the homepage for easier navigation and access to key features.

  • Meso: Enhances user journeys, providing clearer information on point accumulation and redemption.

  • Macro: Strengthens long-term engagement with a newly proposed tiered loyalty program that rewards users for their continued use, increasing retention and Monthly Active Users (MAU).

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Gathering design inputs

Given GitLab’s collaborative culture, I created a GitLab issue to facilitate design discussions with senior designers, gathering valuable inputs on visual and interaction design, alignment with the Pajamas design system, and key design decisions.

Introducing…

Final Design Concepts

⎯⎯⎯

Main Functionalities

Create A Pin

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Edit/ Remove a Pin Title

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Unpin

Take Care of the Edge Cases

Reach Max Pins

—————————————————————————————————————————————————-

————————————————————————————————————————————

—————————————————————

Unable to Pin

Reflection…

What did I learn?

⎯⎯⎯

Designing for technical users

Before this project, I knew little about the developer workflow and GitLab's technical issues board. Working within a real-world system revealed just how nuanced technical workflows can be. By speaking with multiple users and validating my findings through research, I gained a deeper understanding of the GitLab user experience and navigated the complexity of a technical platform with more ease. Each user experiences the system differently depending on their role and how their company is set up.

Crafting research methodologies

With the support from the GitLab team, I learned how to determine which research methods aligned with project goals, clarify what data would drive meaningful decisions, and incorporate new tools (e.g., Dovetail) to organize and analyze insights.

Next Project

Overview

TLD;R

Problem Validation

User Testing

Design Iterations

Final Solution

Reflections