_Elevating GitLab Duo to a Premier AI Native Experience._ _This represents a fundamental evolution in how GitLab presents AI capabilities and organizes complex workflows. The success of the GitLab Duo Agent Platform depends on thoughtful implementation across all teams, with AI as a true platform differentiator rather than an add-on feature._  | Demo | Prototype | |------|-----------| | [{width=837 height=236}](https://drive.google.com/file/d/1iqlOCzYTtvQdKfqDrxlfcL-Pe80_sycU/view?usp=sharing) | [{width=805 height=231}](https://www.figma.com/proto/hQ4sPQUAmkztXEb64gRN4W/%F0%9F%9B%A0%EF%B8%8F-Project-Studio?page-id=254%3A27376&node-id=254-27377&p=f&viewport=784%2C25%2C0.06&t=i3OOCASk52dj9GuD-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=254%3A27377&show-proto-sidebar=1) | ## Overview This issue outlines our new application architecture that elevates GitLab Duo to a premier AI native experience: * **Always-ready AI companion** - GitLab Duo becomes a persistent, intelligent assistant available throughout your entire workflow * **Familiar application chrome, refined** - bringing back interface patterns that worked well, so longtime users feel right at home * **Efficient browsing** - interact with page content without opening everything in new tabs **Important Note:** The prototypes demonstrated represent illustrative direction that communicates the intent and feel we're aiming for. Specific UI details will evolve as we ideate and iterate throughout development. This approach may feel uncomfortable, but we have amazing talent across the Product and Engineering departments who can make the right judgment calls as we uncover new insights and opportunities. ## Core Design Principles ### AI as a Premier Experience GitLab Duo is not a secondary feature or hidden capability—it's a first-class citizen of the platform that deserves prominent, persistent placement in the interface. ### Respect User Flow The interface should enhance user workflows without interrupting them. AI assistance should be available when needed but never intrusive or demanding attention. ### Context Awareness The AI experience should leverage the full context of what users are doing in the main panel to provide relevant, intelligent assistance. ### Progressive Disclosure Users can access AI capabilities at different levels of depth—from quick suggestions to immersive collaborative experiences. ## UI Patterns & Architecture | Two panels | Three panels (max) | |------------|--------------------| |  |  | ### Panel-Based Architecture Moving from overlapping drawers to dedicated panels creates a more organized, predictable interface where multiple contexts can coexist without conflict. **Benefits:** - Clear spatial relationships between different tools and contexts - Reduced cognitive load from overlapping interface elements - Better support for multitasking across projects and features **Drawer to Panel Evolution:** We currently use many UI drawers throughout the product. We've demonstrated how the work item drawer can be successfully converted into a side panel for the main context. The same approach could be applied to other drawers in the product, but each designer should evaluate whether this conversion makes sense for their specific use case and user workflows. ### AI Panel (Right-Hand Assistant) A dedicated panel for AI positioned on the right side of the interface, acting as an on-demand assistant for users immersed in their workflows. **Discoverability:** Allows users to stay focused on their main context while keeping the power of the GitLab Duo Agent Platform readily available. It's discoverable and non-intrusive—present when needed, unobtrusive when not. **Interaction Pattern:** The goal is seamless interoperability between the main context and GitLab Duo. Unlike proactive overlays or overlapping drawers that interrupt workflow, this panel respects user pacing and provides intelligent assistance when requested, not when the system thinks it's needed. **Perceived Role and Capabilities:** GitLab Duo functions as a "deep-context expert" that leverages the full depth of GitLab's knowledge graph to deliver sophisticated agentic capabilities. It understands what you're working on and can provide contextually relevant assistance across the entire DevSecOps lifecycle. **Core Components:** * **Chat Interface** (Collaborative and Delegate modes) * **Session Management** (agent/flows history and context) * **Smart Suggestions** (context-aware recommendations) ### Main Panel Evolution The primary content area becomes more flexible and responsive, supporting richer interactions without requiring constant tab switching. **Key Improvements:** - Enhanced content preview capabilities - Better support for list-based workflows (issue triage) - Contextual actions that work with AI panel ### Application Chrome Refinement We're bringing back navigation patterns that resonated with users while modernizing the underlying architecture for today's needs. This isn't about rebuilding from scratch—it's about refining what worked and enhancing it with new capabilities. Long-time GitLab users should feel immediately comfortable while discovering new ways to navigate their work more efficiently. ## Getting Started 1. Familiarize yourself with the panel-based interaction model 2. Consider AI integration opportunities in your feature areas 3. Design for context sharing between main content and AI panel 4. Consider how new features can leverage the panel system and AI capabilities ## Burning Questions ### Strategic Questions **Where can I follow decisions being made?** We are capturing decisions and requirements as we go in https://gitlab.com/gitlab-org/gitlab/-/issues/560610+ **Why this change? Why this layout?** We're responding to SUS feedback about navigation complexity while positioning GitLab Duo as a premier AI experience. The panel-based architecture supports both goals by creating clearer spatial organization and giving AI capabilities the prominence they deserve. **Isn't this just going back to what we had before?** We're bringing back proven navigation patterns that worked well for users, but with modern panel architecture and AI integration. It's evolution, not reversion—taking the best of what worked and enhancing it for today's needs. **Why can't we just use what we have now?** Current overlapping drawers create cognitive overhead and don't position AI as the strategic platform differentiator it should be. The panel system provides clearer organization and better foundation for future features. **How does this align with our SUS feedback?** This directly addresses navigation complexity complaints while introducing the refined chrome patterns that long-time users found intuitive. We're solving pain points, not just adding features. ### Technical Implementation **How many panels can be used?** The system is designed to be flexible, but we're starting with a pattern that feels scalable: `main-panel` + (optional) `side-panel` | `AI panel` **What happens on smaller screens?** The panel system will include responsive breakpoints that gracefully handle different screen sizes. They may revert to drawer like behavior or overlay on-top of content. **What if I'm using a drawer? Can I keep doing so? Can we also use a panel?** We've demonstrated successful drawer-to-panel conversion with work items. Each team should evaluate whether panel conversion makes sense for their specific use case and user workflows. **How will this work with keyboard users?** Panel navigation will follow established accessibility patterns with clear focus management and (possibly) keyboard shortcuts for efficient panel switching and interaction. **Will they be resizable?** This is being evaluated based on user needs and technical feasibility. The initial focus is on optimal default sizing with potential for user customization in future iterations. ### Product & Experience **Will users be able to turn off the new experience?** The goal is to create an experience so beneficial that users prefer it. Feature flags will support gradual rollout, but the long-term vision is unified experience rather than maintaining parallel interfaces. **How will customers feel about losing screen real estate to AI and more application chrome?** The panel system actually provides more efficient use of screen real estate by reducing tab switching and improving workflow continuity. AI capabilities justify their space through productivity gains. **What does the experience look like for free users?** The improved navigation and panel architecture benefits all users. AI panel features will respect existing GitLab Duo access tiers. **Which panel would set the context for the AI panel?** The main content panel drives AI context—whatever users are actively working on informs Duo's suggestions and capabilities. ### Process & Timeline **Why are we not doing extensive solution validation first?** We have only 6 weeks of development time. We're leveraging proven patterns (navigation elements that worked well) and [building validation into the development process](https://gitlab.com/gitlab-org/ux-research/-/issues/3587). **How did you come to this decision? Who else was consulted?** This builds on extensive user feedback, engineering consultation with teams who built previous navigation, and alignment with AI platform leadership. **What happens if the application chrome isn't ready for the GA launch?** We're running parallel work streams and have fallback plans. The core panel system and AI experience are the minimum viable scope for GA. **How will this ship alongside the current production experience?** Feature flags will enable gradual rollout and testing. We're planning for seamless transition rather than abrupt change. ### Design & IA **Are you going to change the IA inside the contextual nav?** We're refining organization and bringing back proven patterns, but not rebuilding information architecture from scratch. The focus is on chrome and panel systems. **What about improvements within the application chrome?** We'd love to make these improvements, like moving primary page actions to the breadcrumb area, but we're keeping our scope focused given the ambitious timeline. Changes like relocating primary page actions or restructuring page-level layouts are future considerations. Right now we're concentrating on the panel system and core navigation architecture to keep this already daunting scope manageable. **Why is there padding around the panels? Why not go edge-to-edge?** Visual separation helps users understand panel relationships and reduces cognitive load. Edge-to-edge designs can feel cramped in complex interfaces like GitLab. **How does theming work?** The application chrome will respect GitLab's existing theming capabilities and design tokens. Dark mode and customization options will work consistently across panels. **Where does \[insert feature\] go in this?** Each feature should be evaluated for the appropriate panel context. Most features will work within existing patterns, but edge cases can be addressed on a case-by-case basis. **Do we have to ship navigation changes to both the old and new experience?** The goal is to converge on the new experience. During transition, critical navigation changes may need to support both, but this should be temporary. **What impact does this have on the homepage?** Homepage integration is being considered as part of the overall experience. The panel system should enhance rather than complicate the entry experience. ## Resources * :desktop: Get a glimpse into the future ~~by trying out this change~~ (it's fallen way behind `master`) → https://gitlab.com/gitlab-org/gitlab/-/merge_requests/194072 * ❖ [Figma Prototype →](https://www.figma.com/proto/hQ4sPQUAmkztXEb64gRN4W/%F0%9F%9B%A0%EF%B8%8F-Project-Studio?page-id=254%3A27376&org_id=972612628770206748&node-id=254-27377&starting-point-node-id=254%3A27377&t=Xk00WjV4Ozy1BGxs-1) * :clipboard: Related Research * https://gitlab.com/gitlab-org/ux-research/-/issues/3344