POC - Future UI
What's this change about?
This proof-of-concept (POC) introduces an optimized navigation structure that restructures GitLab's application chrome to prioritize end user efficiency and elevate GitLab Duo as a premier capability rather than a secondary feature. The approach addresses current navigation friction while establishing a modern interface foundation that better serves users' cross-project workflows.
Watch the demo video or pull the change down locally to give it a spin! Get a glimpse of where we could take GitLab in the future
References: https://gitlab.com/gitlab-org/gitlab/-/issues/541175
Background
After several years of incremental changes, our platform chrome has accumulated design debt that impacts user experience and product coherence. The architecture requires restructuring to:
- Better accommodate new features and workflows
- Maintain consistency and familiarity
- Support modern UX patterns and expectations
- Optimize for frequently used actions and features
Let's look to make a larger sweep that allows for a reset to rebalance the UI elements and core workflows. AI capabilities enhance and amplify existing developer workflows rather than replacing them or forcing users into new interaction patterns. This change illustrates how GitLab Duo becomes a natural extension of the interface rather than a separate tool you have to context-switch to use.
That distinction is crucial for enterprise adoption too. Developers need to feel like they're still in control of their workflows, with AI providing intelligent assistance when and where it's most helpful. This layered approach creates space for that kind of symbiotic relationship between human decision-making and AI capabilities.
It's a much more sophisticated approach than the "chatbot in a sidebar" pattern we see in a lot of developer tools right now. It is designing for AI integration at the architectural level.
Design Principles
Clean & Modern Interface
- Embrace thoughtful density that maximizes screen real estate for complex workflows
- Eliminate visual noise that doesn't contribute to user understanding
- Use compact components to create breathing room where it matters most
Scalable & Adaptive Layout
- Design navigation structures that accommodate growth without necessitating reorganization
- Anticipate expansion areas for emerging features and workflows
- Balance density and breathing space to support complex information needs
Opinionated Placement & Organization
- Establish a clear home for each type of functionality within the interface
- Favor consistent positioning that builds user intuition
- Create intentional adjacencies between related workflows
Gestalt-Aligned Visual Organization
- Symmetry: Balance visual weight across key interface sections
- Proximity: Use spatial relationships to communicate functional connections
- Common Region: Group related functionality within visually bounded areas to enhance recognition and understanding
How might it evolve
The theory is that by breaking out of the sidebar only layout, we can better balance the application for future growth and feature enhancements. Bringing a layered feel to the platform creates clear delineation while making it feel multi-dimensional.
