# UX Review: GitLab Settings > General ## Project & Group Settings Improvements --- ## Executive Summary Both Project and Group settings pages suffer from **settings accumulation syndrome**: years of feature additions without rethinking information architecture. Users face 15-25+ settings in flat, undifferentiated lists where critical choices (visibility, 2FA) receive the same visual treatment as niche options (emoji reactions, character warnings). **Key problems:** - No visual hierarchy signaling importance - Feature dependencies invisible to users - Group inheritance impact unclear - Lifecycle actions (archive, delete) buried under misleading "Advanced" label **Proposed solution:** Apply consistent design patterns across both pages while respecting their different purposes: Projects are feature-focused, groups are governance-focused. --- ## Shared Design Patterns These patterns apply to both Project and Group settings: ### 1. Visibility Card (High Priority) Elevate visibility from a radio button list to a prominent, visually distinct card with color-coded options. This is the most consequential setting on both pages. ### 2. Quick Overview Bar Display 4-5 key current states at the top (e.g., `Private · CI/CD enabled · 2FA not enforced`) allowing users to scan without expanding sections. ### 3. Settings Search Add a search field to filter settings. Critical given the volume on both pages. ### 4. Logical Section Grouping Replace mega-accordions with multiple focused sections organized by user intent, not feature chronology. ### 5. Lifecycle Actions Section ("Project/Group Management") Rename "Advanced" and reorder actions by consequence: Export → Change path/URL → Archive → Transfer → Delete. Add visual severity indicators (gray → amber → red). ### 6. Consistent Toggle Patterns Standardize on toggle + optional dropdown for access level. Remove mixed checkbox/dropdown patterns. ### 7. Sticky Save Footer Persistent save/cancel bar so users always know when they have unsaved changes. --- ## Project Settings > General ### Current State Problems | Problem | Impact | |---------|--------| | 20+ feature toggles in flat list | Users can't find what they need | | Service Desk config embedded in settings | Complex SMTP setup doesn't belong here | | Feature dependencies invisible | Disabling Repository breaks 4 other features silently | | Mixed control patterns | No reliable mental model for users | ### Proposed UI Changes #### Section Restructure | Current | Proposed | |---------|----------| | Naming, description, topics | **Naming & Description** (name, avatar, description, topics) | | Visibility, project features, permissions (mega-accordion) | Split into: **Visibility** (card), **Core Features**, **DevOps & Deployment**, **Specialized Features** | | Badges | **Badges** (unchanged) | | Service Desk (full config) | **Service Desk** (toggle only + "Configure →" link) | | Advanced | **Project Management** (reordered lifecycle actions) | #### Feature Groupings **Core Features** - Issues, Repository, Merge requests, Wiki, Snippets, Forks, Git LFS **DevOps & Deployment** - CI/CD Pipelines, Container Registry, Package Registry, Environments, Releases, Monitor, Infrastructure **Specialized Features** - Analytics, Security & Compliance, Feature Flags, Model Experiments, Model Registry, Pages #### Dependency Visualization Indent dependent features under their parent. Example: ``` Repository ├─ Merge Requests (requires Repository) ├─ Forks (requires Repository) └─ Git LFS (requires Repository) ``` When Repository is disabled, dependent features show warning: "Requires Repository." #### Project Management Section Order 1. Export project (gray) 2. Change project path (gray) 3. Archive project (amber) 4. Transfer project (amber) 5. Delete project (red) #### What to Remove from This Page - Full Service Desk configuration → move to dedicated page - Keep only enable/disable toggle with link --- ## Group Settings > General ### Current State Problems | Problem | Impact | |---------|--------| | 15+ governance settings in flat list | Security audit requires scanning everything | | Inheritance impact buried in helper text | Users unknowingly affect all subgroups/projects | | Security settings scattered | 2FA, tokens, forking, protocols all in different spots | | Premium/Beta features undifferentiated | Users can't tell what's available to them | ### Proposed UI Changes #### Section Restructure | Current | Proposed | |---------|----------| | Naming, description, visibility | **Visibility** (card) + **Naming & Description** (section) | | Permissions and group features (mega-accordion) | Split into: **Access & Sharing**, **Security & Authentication**, **Membership Governance**, **Creation Permissions**, **Notifications**, **Features** | | Badges | **Badges** (unchanged) | | Advanced | **Group Management** (reordered lifecycle actions) | #### Section Contents **Access & Sharing** - Restrict group invitations (cascade) - Restrict project sharing (cascade) - Prevent forking outside group (cascade) - Disable group mentions **Security & Authentication** - Require two-factor authentication (cascade) + enforcement delay + subgroup override - Require token expiration dates - Git access protocols **Membership Governance** - Allow access requests - Prevent adding users directly to projects (cascade) - Seat control (open access vs. user cap) - Placeholder user confirmation (Premium badge) - Remove dormant members (Beta badge, cascade) **Creation Permissions** - Minimum role to create projects - Roles allowed to create subgroups **Notifications** - Enable email notifications (cascade) + diff previews toggle - Token expiry notification recipients **Features** - Git LFS (cascade) - Pages public access (cascade) - Customer relations (CRM) #### Cascade Indicators Add "↓ Cascades" badge to any setting that affects subgroups and projects. Tooltip explains: "This setting applies to all subgroups and projects within this group." #### Scope Indicator In Quick Overview bar, show: `3 subgroups · 12 projects` so users understand the blast radius. #### Tier Badges - **Premium** badge (amber) for paid-tier features - **Beta** badge (blue) for experimental features - Disabled state + visual dimming for unavailable features #### Group Management Section Order 1. Export group (gray) 2. Change group URL (gray) 3. Archive group (amber) 4. Transfer group (amber) 5. Delete group (red) — note: "includes all subgroups and projects" --- ## Implementation Priority ### Tier 1: Quick Wins (Low effort, high impact) | Change | Page | Effort | |--------|------|--------| | Add subheadings within existing accordions | Both | CSS/template | | Visibility card treatment | Both | CSS/template | | Cascade indicators for groups | Group | CSS + minor logic | | Dependency warnings on hover | Project | JS + CSS | | Reorder lifecycle actions + severity colors | Both | Template | ### Tier 2: Medium Effort | Change | Page | Effort | |--------|------|--------| | Split mega-accordion into multiple sections | Both | Template restructure | | Quick Overview bar | Both | New component | | Relocate Service Desk config | Project | Page creation + redirect | | Nested settings (2FA delay, etc.) | Group | Conditional rendering | | Premium/Beta badge system | Group | CSS + logic | ### Tier 3: Larger Investment | Change | Page | Effort | |--------|------|--------| | Settings search | Both | Search/filter logic | | Inheritance visualization ("→ 3 subgroups → 12 projects") | Group | API + UI component | --- ## Design Mockups ### Project Settings **Quick Overview + Visibility Card** {width=860 height=600} **Feature Sections with Dependencies** {width=900 height=525} **Project Management Actions** {width=900 height=340} ### Group Settings **Quick Overview with Scope + Visibility Card** {width=790 height=600} {width=900 height=579} **Governance Sections with Cascade Indicators** {width=900 height=409} **Membership & Security with Tier Badges** {width=866 height=600} **Group Management Actions** {width=866 height=600}