0-1 Context Navigation Tool,
0-1 Context Navigation Tool,
0-1 Context Navigation Tool,
GitLab
GitLab
Overview
Timeline
Timeline
3 months
Role
Role
Lead Product Designer (Contract)
Skills
Skills
Interaction Design, Visual Design, UX Research
Tools
Tools
Figma, Dovetail, Notion
Team
Team
1 Project Manager, 2 UX Researchers, GitLab Senior Designers and Researchers
Context
GitLab is an AI-powered DevSecOps Platform that supports the full software development lifecycle in a single application.
Issues are a core building block in GitLab that enable collaboration, discussions, planning and tracking of work.
Over 3 months, me and the team collaborated with GitLab UX team to tackle the challenge of reimagining how software members can get onboarded onto new issues faster without hassle.
The problem
Finding critical project decisions in GitLab is unnecessarily difficult
Important decisions are buried across lengthy issue threads, forcing software teams to spend valuable time reconstructing context before they can move work forward.
Finding critical project decisions in GitLab is unnecessarily difficult
GitLab's issues are the source of truth for software teams. But as projects scale, important decisions become buried among hundreds of comments, making it difficult for teams to maintain alignment.
The Solution
Project decisions are now surfaced when teams need them most
I designed a scalable navigation system that surfaces key decisions directly within GitLab issues, allowing teams to quickly rediscover important context without rereading entire discussions.
Surface critical decisions without manually searching lengthy discussions.
Jump directly to the conversations behind key decisions
Impacts
85%
of user testers would recommend the feature to a colleague
85%
of user testers would recommend the feature to a colleague
85%
of user testers would recommend the feature to a colleague
4.3 / 5
average ease of use score on final prototype
4.3 / 5
average ease of use score on final prototype
4.3 / 5
average ease of use score on final prototype
Research
Researching pain points and understanding user rationale
We conducted internal audit of the GitLab issues and scheduled interviews with 10 GitLab users, including both internal and external users. This enabled us to gather a wider range of context.
Our goal was to understand user workflow and onboarding process.
All of our sorted insights
Research -> Problem Framing
Consolidating research insights into affinity mapping, we uncovered the two pathways we could move forward…
Who we are designing for
Meet John - our representative user
Based on the collected insights, I created a persona to help guide the design and development strategy.
Design Exploration - Concept Testing
After ideating different solutions with the team through our Crazy 8 Exercise, we tested with users and selected 2 most promising concepts that align the most with our user values and scenarios.
Hearing the user challenges through interviews and our feedback loop helped me justify the decision (with good confidence) to push for a high-impact, high-effort feature.
User feedback to justify the decision
Design Iterations and A/B Testing
Where is the best location for the feature?
Our team ran an A/B test to determine whether the pinning tool should live in the main section or the sidebar, but results were inconclusive. As the lead designer, I explored a hybrid approach that combines both patterns into a single final design.
The nitty gritty pixel perfect details
With the main design challenges resolved, the next step was refining the finer details like copy, colors, technical feasibility, and interactions to ensure clarity and usability for GitLab users. This was done in close collaboration with GitLab team.
Some design questions I went through
Interaction Design Considerations
Limiting the number of pins
We wanted to surface important decisions while avoiding pin fatigue caused by having too many pinned comments, which would defeat the feature purpose. Through user testing, I found that 5 pins was the sweet spot, helping ensure discussions remain clear, focused, and easy to scan.
Balancing Technical Feasibility
Navigating Engineering Pushback
Engineering feedback revealed that pinning individual discussion sections was too complex for the MVP. Therefore, I redesigned the feature to pin entire comment threads, leaving granular pinning for future iterations.
Interaction change
Higher Level Design Flow, Edge Cases
Building a Fallback Experience
When I brought the concept to engineers for feedback, they uncovered a backend edge case where comments could fail to pin due to temporary system issues. I quickly designed a lightweight error state with clear copywriting, which my engineer could easily implement in minutes.
Failure State
Expanding beyond the MVP
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
Phase 2 Mockup
Key Learning
💻 Designing for technical users
Before this project, I knew little about the developer workflow and GitLab's technical issues board. 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.
🤔 Balances exploration with real-world constraints
As designers, it's easy to get carried away during ideation. But I learned product design is ultimately grounded in technical implementation. The best solutions balance creativity with feasibility, so understanding engineering constraints early helps ensure ideas are practical, scalable, and worth the development investment.
🧑🏻🎨 Getting into nitty gritty visual design
Through this project, I was able to delve into the finer details of visual design - spacing, typography, color - and intentionally crafted solutions that balance usability and adherence to design systems. I also realized how even the smallest design changes can have significant effects on the overal user experience.
Thanks to my GitLab team for a successful collaboration!
0-1 Context Navigation Tool,
0-1 Context Navigation Tool,
0-1 Context Navigation Tool,
GitLab
GitLab
Overview
Timeline
Timeline
3 months
Role
Role
Lead Product Designer (Contract)
Skills
Skills
Interaction Design, Visual Design, UX Research
Tools
Tools
Figma, Dovetail, Notion
Team
Team
1 Project Manager, 2 UX Researchers, GitLab Senior Designers and Researchers
Context
GitLab is an AI-powered DevSecOps Platform that supports the full software development lifecycle in a single application.
Issues are a core building block in GitLab that enable collaboration, discussions, planning and tracking of work.
Over 3 months, me and the team collaborated with GitLab UX team to tackle the challenge of reimagining how software members can get onboarded onto new issues faster without hassle.
The problem
Finding critical project decisions in GitLab is unnecessarily difficult
Important decisions are buried across lengthy issue threads, forcing software teams to spend valuable time reconstructing context before they can move work forward.
Finding critical project decisions in GitLab is unnecessarily difficult
GitLab's issues are the source of truth for software teams. But as projects scale, important decisions become buried among hundreds of comments, making it difficult for teams to maintain alignment.
The Solution
Project decisions are now surfaced when teams need them most
I designed a scalable navigation system that surfaces key decisions directly within GitLab issues, allowing teams to quickly rediscover important context without rereading entire discussions.
Surface critical decisions without manually searching lengthy discussions.
Jump directly to the conversations behind key decisions
Impacts
85%
of user testers would recommend the feature to a colleague
85%
of user testers would recommend the feature to a colleague
85%
of user testers would recommend the feature to a colleague
4.3 / 5
average ease of use score on final prototype
4.3 / 5
average ease of use score on final prototype
4.3 / 5
average ease of use score on final prototype
Research
Researching pain points and understanding user rationale
We conducted internal audit of the GitLab issues and scheduled interviews with 10 GitLab users, including both internal and external users. This enabled us to gather a wider range of context.
Our goal was to understand user workflow and onboarding process.
All of our sorted insights
Research -> Problem Framing
Consolidating research insights into affinity mapping, we uncovered the two pathways we could move forward…
Who we are designing for
Meet John - our representative user
Based on the collected insights, I created a persona to help guide the design and development strategy.
Design Exploration - Concept Testing
After ideating different solutions with the team through our Crazy 8 Exercise, we tested with users and selected 2 most promising concepts that align the most with our user values and scenarios.
Hearing the user challenges through interviews and our feedback loop helped me justify the decision (with good confidence) to push for a high-impact, high-effort feature.
User feedback to justify the decision
Design Iterations and A/B Testing
Where is the best location for the feature?
Our team ran an A/B test to determine whether the pinning tool should live in the main section or the sidebar, but results were inconclusive. As the lead designer, I explored a hybrid approach that combines both patterns into a single final design.
The nitty gritty pixel perfect details
With the main design challenges resolved, the next step was refining the finer details like copy, colors, technical feasibility, and interactions to ensure clarity and usability for GitLab users. This was done in close collaboration with GitLab team.
Some design questions I went through
Interaction Design Considerations
Limiting the number of pins
We wanted to surface important decisions while avoiding pin fatigue caused by having too many pinned comments, which would defeat the feature purpose. Through user testing, I found that 5 pins was the sweet spot, helping ensure discussions remain clear, focused, and easy to scan.
Balancing Technical Feasibility
Navigating Engineering Pushback
Engineering feedback revealed that pinning individual discussion sections was too complex for the MVP. Therefore, I redesigned the feature to pin entire comment threads, leaving granular pinning for future iterations.
Interaction change
Higher Level Design Flow, Edge Cases
Building a Fallback Experience
When I brought the concept to engineers for feedback, they uncovered a backend edge case where comments could fail to pin due to temporary system issues. I quickly designed a lightweight error state with clear copywriting, which my engineer could easily implement in minutes.
Failure State
Expanding beyond the MVP
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
From Context Pinning to AI Context Intelligence
User research revealed strong interest in AI-assisted workflows. Therefore, for the future expansion of the future, I envisioned that we implemented a two-phase product release:
Phase 1 (Validation): We built Manual Pinning first to prove that surfacing critical context speeds up developer onboarding, de-risking the feature without building expensive AI early.
Phase 2 (AI Intelligence): Once validated, AI will proactively recommend high-value discussions to pin, keeping developers in the loop to review and maintain accuracy.
Phase 2 Mockup
Key Learning
💻 Designing for technical users
Before this project, I knew little about the developer workflow and GitLab's technical issues board. 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.
🤔 Balances exploration with real-world constraints
As designers, it's easy to get carried away during ideation. But I learned product design is ultimately grounded in technical implementation. The best solutions balance creativity with feasibility, so understanding engineering constraints early helps ensure ideas are practical, scalable, and worth the development investment.
🧑🏻🎨 Getting into nitty gritty visual design
Through this project, I was able to delve into the finer details of visual design - spacing, typography, color - and intentionally crafted solutions that balance usability and adherence to design systems. I also realized how even the smallest design changes can have significant effects on the overal user experience.
Thanks to my GitLab team for a successful collaboration!