UI Navigation and Layout Redesign

3/9/2026

Introduced a file tree browser as a new UI component within the repository view. This feature adds a collapsible, resizable panel that displays the project's file and directory structure in a tree format alongside the file content. Key functionalities include expanding/collapsing directories, highlighting the current file, synchronizing with the main content area, filtering files by name using a global search dialog, and enabling keyboard-first navigation via ARIA treeview patterns. The component is designed for performance with large repositories using pagination and is responsive across different viewports.

8/20/2025

Introduced dark mode, aligned branding with marketing site and product UI, implemented a simplified feedback mechanism on documentation pages, redesigned navigation by moving primary navigation to the top and restructuring the sidebar, and addressed technical debt related to typography, spacing, and code blocks. This redesign was enabled by a replatforming project that migrated the documentation site from Nanoc to Hugo, resulting in significant performance improvements (130x faster local builds, 30x faster full builds).

3/6/2025

This post details the 'Beautifying our UI' initiative's focus on the continuous deployment (CD) area. Key improvements include a redesigned Environment List page to surface critical deployment information directly, an enhanced deploy keys filtering interface with a search field, and significant improvements to the Kubernetes agent management experience, including streamlining the registration process and improving visibility into agent status. Additional usability enhancements include enhanced Kubernetes pod search, improved Flux status visibility, better release information display, streamlined environment search, and enhanced error message display for Flux details.

10/15/2024

This post details the planned redesign of GitLab's dark mode, moving from an experimental, algorithmically inverted approach to a more refined, principle-driven design. The new approach focuses on visual hierarchy, reduced color saturation, and a 'dimmed, not inverted' aesthetic. The implementation will be iterative, starting with Pajamas Design System elements and gradually expanding across the product. This represents a significant technical and design evolution for the dark mode feature.

8/30/2023

This post details upcoming URL structure changes in GitLab 17.0, affecting settings pages, project pages (e.g., Contributor statistics, Repository graph, Locked files, Alerts, Webhooks, Monitor settings), and user settings pages (e.g., Profile, Account, Applications, Chat, Personal access tokens, Emails, Password, Notifications, SSH keys, GPG keys, Preferences, Active sessions, Authentication log, Usage quotas). These changes aim to create a more predictable and consistent site map, with 301 redirects to be implemented before the removal of old routes in 17.0.

8/15/2023

This post details the iterative process of redesigning GitLab's navigation based on user research. It outlines the approach of understanding user behavior and mental models through diary studies and card sorting to address specific pain points like feeling overwhelmed, differentiating groups/projects, and context switching. The post highlights the development of a task-based sidebar and features like pinning items, and discusses user feedback on the new navigation, including areas for improvement such as pinning specific projects/groups and visual clarity.

6/12/2023

This post details specific accessibility improvements made during a recent navigation redesign. Key contributions include: early and frequent accessibility reviews using low-fidelity prototypes and ARIA attributes, manual testing with popular screen reader and browser combinations (JAWS/Chrome, NVDA/Firefox, VoiceOver/Safari), and the successful implementation of the `inert` HTML attribute for improved keyboard and screen reader interactivity when navigation elements are collapsed. Specific ARIA attributes like `aria-expanded`, `aria-controls`, and `aria-current='page'` were utilized, along with a 'Skip to main content' link and exclusion of collapsed navigation content from the focus order. The post highlights the iterative nature of accessibility improvements and the importance of leveraging browser standards for robust implementations.

5/15/2023

This post details the iterative process of redesigning GitLab's platform navigation. It outlines the design themes (minimize overwhelm, orient users, ease of pickup), the exploration of five visual concepts, and user testing to evaluate different layouts. The 'Super Sidebar' was chosen over 'Element Reswizzle' based on user testing. The post also describes the planning and foundational work for the redesign, including adding critical contexts like 'your work', groups, and projects, and iterating on UI elements like the context switcher based on user feedback.

5/1/2023

This post details the vision and process behind a complete redesign of GitLab's product navigation. It highlights the user-centric approach, including extensive UX research and design ideation over nine months. Key themes identified were minimizing overwhelm, improving user orientation, and enabling users to pick up where they left off. The iteration strategy emphasizes protecting the core user experience, ensuring no degradation from the current state, and shipping fully usable features internally first. The rollout will include an on/off switch for gradual adoption and will be followed by further enhancements like customizable navigation and improved landing pages.

10/5/2021

This post introduces GitDock, a desktop application developed as a Minimum Viable Change (MVC) to explore user-centric navigation patterns for GitLab activities. It details the motivation behind GitDock, stemming from the limitations of the current project-centric navigation model and UX research findings. The post describes GitDock's features, including access to recent pipelines, viewed objects, favorite projects, recent comments, and bookmarks, as well as system notifications. It explains the decision to build GitDock as a separate product for faster iteration and testing of new ideas, acknowledging its use of shortcuts and less optimized API calls. The post also outlines the next steps, which involve using learnings from GitDock to build a better start page for GitLab.

5/3/2021

Introduced web components (custom elements, shadow DOM, templates, slots) to encapsulate CSS and resolve conflicts between the new Slippers design system (using Tailwind CSS) and existing legacy CSS on the GitLab blog. Implemented a fallback mechanism using `yield` in the light DOM for cases where JavaScript fails to load. This allowed for incremental adoption of the new design system without a full site rewrite.

3/5/2021

This post details the creation of Slippers, a new design system at GitLab, built by the Digital Experience team. It highlights the process of developing a reusable library of design assets (typestack, colors, spacing, grid, buttons) and code, emphasizing the need for a single source of truth to enable rapid iteration and scalability. The post discusses the technical choices made, including using Figma for design and refactoring existing pages to stress-test the foundations package. It also touches upon the value of a shared language between design and engineering and the ongoing R&D nature of the project.

2/16/2021

This post details the evolution and impact of GitLab's design system, Pajamas, on designer workflows. It presents survey data from 2018 and a recent survey to demonstrate improvements in efficiency. Key findings include increased frequency of Pajamas reference, higher perceived usefulness, a decrease in questions about component styling and usage, and more time for designers to focus on brainstorming and solving user problems. The post also notes that the time spent writing documentation has not significantly changed. The design system has grown to include design principles, guidelines for foundational elements and components, accessibility audits, and usability standards, with live-coded components and conceptual models for core objects.

2/12/2021

This post highlights the impact of small, incremental UI refinements on user experience, showcasing contributions to the Jira Connect app (type scale, CTAs) and the merge request widget (alignment). It also details a fix for vertical alignment in card headers for on-demand security scans. The post emphasizes the collective effort of developers and designers in making these small but impactful changes.

2/12/2021

This post details specific UI redesign efforts for the GitLab documentation site, focusing on the homepage, type scales, alert box styling, heading presentation, bullet list spacing, and image margins. It describes iterative improvements and planned overhauls to enhance information discoverability and site usability.

5/20/2020

This post details the design and implementation of a dark mode for GitLab's Web IDE. It explains how the dark mode was integrated with existing syntax highlighting themes, the design process using Figma and asynchronous feedback, and the specific challenges encountered with stateful elements, visual hierarchy, depth, and graphics. The post also highlights the iterative release strategy using Minimal Viable Change (MVC) and the use of a Figma community toolkit.

12/2/2019

This post details the iterative update of GitLab's iconography library using a Minimum Viable Change (MVC) approach. It covers the process of updating icon documentation, establishing design guidelines, embracing constraints like the 16x16 pixel grid and 2-pixel stroke weight, and the batch-based review and merge request process for icon updates. It also highlights early results and next steps, including reducing FontAwesome icon usage, introducing new grids, and conducting further usability testing.

7/31/2019

This post details the history of GitLab's navigation design, from its original design to the 2017 redesign. It highlights the challenges of balancing global and contextual navigation, the pain points that led to previous redesigns, and the lessons learned. The current focus is on improving context and discoverability, with plans for further research and phased implementation of changes.

7/26/2019

This post details the UX research and decision-making process behind repositioning the 'clone' button on GitLab's project overview page. It quantifies the impact of moving the button from the header to the file tree control area using click tests, demonstrating improved discoverability and reduced time to complete the cloning action. It also addresses the scenario of empty repositories by introducing a clone button within the instructions section, again supported by user testing.

7/2/2019

This post details specific tactical UI improvements made to GitLab, including redesigning threaded discussions with subtle background colors for better distinction, ensuring the 'Changes' tab in merge requests is always visible across different screen sizes and sidebar states, and aligning merge request icons for improved scannability. It also outlines a broader strategy involving updating the visual design strategy with a new senior product designer and building out the Pajamas design system with reusable components.

3/13/2019

This post details the validation of a redesign for GitLab's group and project settings pages. The redesign focused on improving information architecture and content prioritization by applying the 80/20 principle, making section labels more descriptive, and making titles clickable. The validation was performed using click tests on Usability Hub, comparing the original design with the redesigned version. The results showed improvements in the percentage of correct answers and user confidence, and a decrease in perceived difficulty, although task completion time increased for some tasks. Three out of four initial assumptions were validated, leading to the conclusion that the redesign was successful and would be applied to other settings pages.

3/29/2018

This post details the technical process of developing a new color system for GitLab's UI. It outlines the issues with the previous color palette, including lack of brand alignment, too many similar colors, and insufficient contrast. It then describes the process of building a better palette by extending brand colors, generating tints and shades, and ensuring WCAG compliance. Finally, it introduces a color priority system for consistent and objective color selection.

12/12/2017

This post details the initial steps GitLab took to establish a design system, focusing on creating a pattern library of reusable components and defining a design language. It highlights the identification of inconsistencies (e.g., 82 gray values, 30 type scales) and the process of defining perceptual patterns (typography, icons, colors, measurement system). The post also explains the application of these patterns to components, the adoption of Atomic Design principles (atoms, molecules, organisms) for structure, and the evaluation and selection of tooling (Brand.ai) to support the design library creation. It emphasizes the iterative nature of design system development, including adjustments to measurement systems (e.g., allowing 12px for padding) and the future goal of linking the design library with frontend code.

12/4/2017

This post details the technical and design decisions behind replacing the Font Awesome icon set with a custom SVG-based icon system and the creation of new illustrations for GitLab.com. It covers the process of defining a consistent visual style by adjusting color palettes, reflecting GitLab values in illustrations, and creating distinct iconography with thick borders and rounded corners for improved accessibility and brand identity. The use of SVG files and the creation of the `gitlab-svgs` repository are also highlighted as technical enablers for streamlining the process of managing and using these visual assets.

9/13/2017

This post details the technical implementation of several UI navigation enhancements: a collapsible sidebar reducing to 50px with icons, a flyout menu for sub-page access, dropdown links in the top bar for project navigation with frequently accessed projects listed, four additional navigation color schemes (Dark, Light, Blue, Green) alongside the default indigo, improved breadcrumbs with chevrons, ellipsis for subgroups, fixed min/max widths, and removal of action buttons from the breadcrumb bar. It also covers reducing header height and redesigning active/hover/dropdown styles with centered badges.

7/17/2017

This post details the first major redesign of GitLab's navigation, driven by user research and testing. Key changes include the introduction of a standard breadcrumb menu for orientation, placing global navigation links on the top bar for easier access, and using color to differentiate global from contextual content. It also outlines future iteration plans such as fly-out dropdowns, collapsible sidebars, and mobile navigation improvements.

10/19/2016

This post details several UX design improvements for GitLab, including better empty states to guide users and celebrate accomplishments, a streamlined approach to filtering and searching by combining controls into a single powerful flow, and the introduction of time tracking for issues using slash commands. It also highlights advancements in Cycle Analytics by breaking down stages into specific events and refinements to the Review Apps experience with the ability to stop apps and group environments. Future work on settings pages and burndown charts is also mentioned.

6/6/2016

This post details the initial stages of GitLab's UI navigation redesign, focusing on addressing confusion caused by the previous hierarchical navigation and the dynamic nature of the left sidebar. It describes an initial concept that was rolled back due to negative user feedback and then introduces a new approach that separates global navigation (dark left sidebar) from contextual navigation (top header). The post highlights the positive reception of this new approach for profile and group pages and previews its application to project pages in GitLab 8.9, along with mobile improvements.

1/25/2016

This post announces the hiring of the first Principal Front End Engineer and signals the beginning of a focused effort to improve GitLab's front-end architecture. It highlights the dual goals of enhancing user experience (UX) and developer experience (DX) by moving away from jQuery and CoffeeScript towards pure JavaScript, with an emphasis on code quality, maintainability, and ease of contribution. The post frames this as a significant architectural undertaking to match the robustness of the existing Ruby architecture.

11/5/2015

This post introduces user preferences in GitLab 8.1 that allow users to customize their experience. Specifically, it adds options for 'Layout width' (fluid or fixed) and 'Default Dashboard' (Your Projects, Starred Projects, Your Projects' Activity, Starred Projects' Activity). It also highlights the existing 'Project view' preference (Readme or Activity). These features aim to tailor the UI to individual user needs and workflows.

1/16/2015

This post details the redesign of GitLab's UI navigation for version 7.7. The redesign addressed specific problems: limited space in project navigation, two stacked navigation levels consuming screen real estate, navigation being only at the top, lack of space for icons, and complex settings pages with a third navigation level. The solution involved moving navigation to the side, which also provided more vertical screen real estate and eliminated the need for scrolling. The redesign also improved icon usage and removed the third navigation level. The development process included prototyping with web inspector, gathering community feedback through tweets and a staging server, and incorporating community-submitted merge requests.