UX Analysis of Basic Editing Workflow
UX Analysis of Basic Editing Workflow
Authored by Andrew Bacon (@abacon), Sr. Product Designer, GitLab AI-powered Stage on 2025-05-02
Summary
This analysis examines a core GitLab workflow—contributing to an onboarding issue template—which spans navigation, editing, and collaboration features. Four primary UX challenges emerged across this journey:
- Fragmented Context & System Integration. The most critical issues stem from disconnected experiences across GitLab's components. Duo AI exists as separate instances between the IDE and web interface with no conversation continuity. Neither instance demonstrates awareness of the user's current context, their current view, or even the operating system. This lack of context extends to reviewer recommendations, where Duo suggests users without appropriate permissions. These integration gaps undermine the promise of AI assistance and diminish user trust.
- Visual Hierarchy & Information Density. Throughout the interface, competing visual elements create cognitive friction. Bold colors are used without consideration of their place in the overall composition, many elements receive too much or too little visual prominence, and metadata overwhelms list views. The Web IDE's chaotic loading sequence with 17 distinct states in 5 seconds creates the impression of system instability rather than a professional tool. In Duo's interface specifically, constrained typography with extremely short line lengths severely impacts readability for its text-heavy interactions.
- Navigation & Information Architecture. GitLab's navigation patterns frequently diverge from established web conventions. The Tanuki logo doesn't return users to the same default view when signing in, global tools like Search and Duo appear contextually embedded despite global scoping, and table interactions lack standard patterns like column sorting. The initial view lacks personalization, forcing users to manually search through all content without filtering options for their own groups and projects.
- Interaction Models & Feedback. Across the system, interaction patterns appear incomplete. The Web IDE's competing first-run experience versus direct editing creates a disjointed experience, while Duo's scrolling behavior forces users to wait for complete responses rather than reading as they generate. Reviewer selection provides only subtle feedback, raising uncertainty about successful actions. These issues collectively increase cognitive load during critical workflows.
These patterns reflect an opportunity to evolve GitLab's experience toward greater coherence, contextual awareness, and user-centered interaction design.
What Worked Well: Despite the identified issues, GitLab provides a fundamentally solid editing workflow with several strengths:
- Functional Core Experience. All essential editing, branching, and merge request capabilities work reliably, with intuitive primary actions.
- Task Completion Success. The workflow successfully guides users through complex Git operations without requiring command line knowledge, making version control more accessible.
- Visual Design Quality. Many individual UI components and screens are visually polished and well-designed when viewed in isolation, suggesting that improvements would primarily involve interaction patterns rather than visual redesigns.
- Duo as Recovery Tool. Even with context limitations, Duo effectively helps users recover from workflow errors, reducing the likelihood of becoming completely blocked.
Methodology
- Workflow Selection: I chose to analyze the "make a change to this onboarding template" task as presented in the Design onboarding issue template because it touches on several core GitLab functions like navigating issues, editing in the web IDE, merge requests, and represents a real user journey.
- Documentation: I captured screenshots at each stage and noted points of confusion or friction.
- GitLab Duo Integration: I purposely engaged GitLab Duo at key decision points to assess its effectiveness in assisting new users.
Workflow Analysis & UX Issues
1. Finding and Opening the Onboarding Issue, Initiating the Edit Action
Task
Sign into GitLab, navigate to the onboarding issue, and then to the issue template. Initiate the process of editing the issue template.
Summary
This workflow reveals four key UX themes that impact new user productivity: inconsistent information architecture that lacks personalization, problematic visual hierarchy that disrupts natural scanning, navigation patterns that diverge from web conventions, and excessive information density in core areas. These interconnected issues increase cognitive load unnecessarily.
That said, the clear, high-contrast design of primary actions makes core navigation of this flow functional, with issues and their tasks accessible despite challenges.
Scorecard
| Metric | Rating | Notes |
|---|---|---|
| Challenge | 4 | While some elements were confusing, the parts needed to accomplish this goall were clear enough. |
| Quality | 3 | Minor inconsistencies built up to a feeling of mixed quality |
| Useful | 5 | Despite small issues, UI is fully functional for the task |
| Average | 4 | B |
UX Analysis
| # | Severity | Component | Observation | Issue | Recommendation | Ref |
|---|---|---|---|---|---|---|
| 1.1 | Medium | Initial Sign-In | Group page displays all subgroups and projects without personalization | Inefficient information architecture: users must manually search through all content with no filtering options to find their own groups | Personalize the initial view based on user-specific data of issues, to-do's, projects, etc. |  |
| 1.2 | High | Search/Duo | Search and Duo AI tools are positioned within breadcrumbs bar. | Misleading placement suggests tools are scoped to the current view when they actually have global functionality | Redesign global navigation to incorporate search and Duo in a location that clearly indicates their global scope |  |
| 1.3 | Low | Sidebar Toggle | Toggle button shifts position when sidebar collapses | Inconsistent control positioning forces users to move their mouse to toggle the sidebar, slowing down workflow | Implement fixed-position toggle and add keyboard shortcut for showing/hiding sidebar |  |
| 1.4 | Medium | Global Navigation | Profile button occupies the top right corner in the left sidebar with high visual prominence | Misaligned information hierarchy: rarely-used profile functionality is given the most prominent position in the navigation, drawing attention away from more commonly used actions | Move profile access to bottom of sidebar alongside help functions, reducing visual weight and freeing prime navigation space for frequently used actions |  |
| 1.5 | Low | Page Header | Breadcrumb area duplicates the page title when no ancestors exist | Redundant information creates visual noise and inconsistent pattern usage | Remove breadcrumbs on pages without hierarchical ancestors to maintain consistent pattern usage |  |
| 1.6 | Medium | Metrics Display | Activity metrics truncate at "999+" with no ability to see actual values | Limited data visualization prevents users from understanding true scale of activity | Implement compressed rounded values with tooltips (e.g., "1K", "12.3K") to maintain visual clarity while providing scaled information |  |
| 1.7 | Medium | List Icons | Three-dot icons in Subgroups/projects list lack explanatory tooltips | Ambiguous visual indicators create confusion about meaning and purpose of critical UI elements | Add consistent tooltip definitions to all list icons following the existing pattern used for visibility icons |  |
| 1.8 | High | Navigation | Tanuki (GitLab logo) does not return users to their post-login default view | Unpredictable home navigation breaks standard web convention and decreases system trust | Link Tanuki logo to user's default post-login view to align with standard navigation patterns |  |
| 1.9 | Medium | Issue Display | Colorful labels create visual competition with primary content | Disrupted visual hierarchy impedes effective scanning of issue information | Reduce visual weight of labels through desaturation or alternative styling while maintaining their information value |  |
| 1.10 | High | Issue Lists | Each issue item contains 8+ metadata elements without clear organization | Cognitive overload from dense, poorly organized information makes issue scanning inefficient | Implement progressive disclosure for metadata or offer alternative display modes (compact, detailed, tabular) based on user context |  |
| 1.11 | Medium | Content Expansion | "Read more" link for truncated descriptions is centered and easily missed | Hidden critical content due to non-optimized expansion controls that don't align with F-pattern scanning | Left-align and increase visual prominence of expansion controls to support natural scanning patterns | |
Images
2. Launching the Web IDE
Task
Wait for the IDE to launch after clicking "Edit in IDE".
Summary
The Web IDE launch experience reveals usability issues centered on perceived stability and user control. The chaotic loading experience with multiple state transitions, competing animations, and shifting layouts creates an impression of system instability rather than a reliable tool. These visual inconsistencies, combined with competing interaction models between exploration and task completion, undermine user confidence during a crucial first impression moment. The overall effect is a disjointed experience that increases cognitive load and diminishes trust in the platform.
Important to call out is that the Web IDE offers an impressive visual design with polished components and animations, and correctly navigates to the specific file for editing once loaded—it's the transitions that need refinement, not the destination.
Scorecard
| Metric | Rating | Notes |
|---|---|---|
| Challenge | 5 | Automatic process did not require any action. |
| Satisfaction | 1 | A visually chaotic and disjointed experience. |
| Useful | 5 | It did successfully launch. |
| Average | 3.67 | C |
UX Analysis
| # | Severity | Component | Observation | Issue | Recommendation | Ref |
|---|---|---|---|---|---|---|
| 2.1 | High | Loading Sequence | IDE cycles through 5 screens and 17 unique UI states during ~5 second load time | Uncontrolled UI transitions create perception of system instability and reduce user confidence | Implement a single, consistent loading state with progress indicator to maintain user trust during initialization |  |
| 2.2 | Medium | First-Run Experience | First-time user introduction screens appear briefly before being replaced by file editor | Competing interaction models (exploration vs. direct editing) create disjointed user experience and undermine intended onboarding value | Design contextual first-run experiences that adapt to specific entry points and user intents | |
| 2.3 | High | UI Animations | Decorative animations play while content is loading, drawing attention away from rendered content | Distracting visual elements increase cognitive load and interrupt task focus during critical workflow initiation | Limit animations to functional purposes (e.g., loading indicators) that support rather than distract from primary task flow | |
| 2.4 | High | Content Loading | UI elements appear asynchronously, causing layout shifts and visual instability | Unpredictable interface changes force continuous visual reorientation and create perception of system instability | Implement skeleton screens or fixed layout placeholders to maintain visual stability during content loading | |
| 2.5 | Low | Theme Preferences | IDE launches with default theme rather than inheriting user's GitLab or OS theme preference | Inconsistent visual experience creates minor friction and requires unnecessary configuration | Apply system-wide theme preferences consistently across all GitLab components including the Web IDE | |
Video
Screen capture of loading sequence: https://drive.google.com/file/d/1_jUYgimVINY8u-awKO1BKqUpqW2tAZie/view?usp=sharing
3. Editing, Committing & Branch Creation with help from Duo
Task
Edit the markdown file, and initiate the new merge request.
Summary
Duo's experience during editing workflows suffers from three fundamental problems: constrained interface design, lack of contextual awareness, and system-centric interactions. The cramped typography and information hierarchy severely limit readability and communication effectiveness, particularly for complex content. Despite being integrated into the IDE, Duo demonstrates no awareness of the current file, user's operating system, or editing context, functioning more like a generic help system than a personalized assistant. Meanwhile, interaction patterns like forced scroll behavior during response generation prioritize system processes over user control.
Despite limited context awareness, Duo's responses are consistently helpful for basic guidance, providing clear instructions that successfully unblock users during editing workflows.
Scorecard
| Metric | Rating | Notes |
|---|---|---|
| Challenge | 4 | Slight challenges, but succeeded in workflow. |
| Satisfaction | 2 | Duo reading experience very painful. |
| Useful | 4 | Was able to recover quickly from missed steps |
| Average | 3.33 | C |
UX Analysis
| # | Severity | Component | Observation | Issue | Recommendation | Ref |
|---|---|---|---|---|---|---|
| 3.1 | Low | Duo Chat Icon | Chat bubble contains a 'plus' symbol with a second smaller plus symbol superimposed on the corner | Ambiguous iconography creates minor cognitive friction about functionality (new chat vs. AI assistance) | Test user perceptions of the Duo icon without context to verify confusion; consider simplified iconography that clearly communicates AI assistance |  |
| 3.2 | High | Chat Typography | Extremely short line lengths in Duo chat interface | Text-driven experience hindered by poor typography optimization, particularly noticeable with indented lists where only 1-2 words fit per line | Remove chat bubbles to reclaim space; create custom typography patterns optimized for constrained width; reduce indentation for lists |  |
| 3.3 | Medium | Suggested Prompts | Overly tight line spacing and awkward spacing with question mark icon | Inconsistent spacing appears accidental or buggy compared to other elements in Duo chat | Fix spacing in suggested prompts display when Duo is in empty state |  |
| 3.4 | Low | Legal Disclaimer | Text awkwardly wraps to second line | Unconsidered text treatment reduces perception of system quality | Center text with forced line break or use smaller font size for disclaimer | |
| 3.5 | Low | Scroll Behavior | Vertical scroll bar appears immediately after prompt submission, even for short answers | Unnecessary UI element reduces available width and diminishes perception of system stability | Only display scroll bar when content exceeds visible space |  |
| 3.6 | High | Context Awareness | Duo lacks awareness of current file being viewed or that user is in IDE | Fails to meet expectations of an intelligent assistant; cannot provide contextual help | Enable Duo to access current view/file context for more relevant assistance |  |
| 3.7 | Medium | Feedback Link | "Give feedback" link uses bright colors that dominate the visual hierarchy | Secondary action draws attention away from primary content with inappropriate visual prominence | Reduce visual prominence of feedback option to match its secondary importance in the workflow | |
| 3.8 | High | Response Generation | Scrolling behavior forces focus to end of response during generation | Forces users to wait for complete generation rather than begin reading; increases time to determine answer quality | Maintain scroll position during response generation, similar to other AI systems |  |
| 3.9 | Medium | OS Awareness | Duo provides instructions for both Windows and MacOS when accessed through Mac | Lack of basic context awareness damages perception of assistant's intelligence and capability | Add OS detection for more targeted, relevant instructions | |
4. Creating Merge Request & Adding Approver, with help from Duo.
Task
Create a merge request with and assign a reviewer. Use Duo for help.
Summary
The merge request and reviewer workflow reveals significant challenges with GitLab Duo's contextual awareness and continuity, severely limiting its effectiveness as an integrated assistant. Critical disconnects exist between Duo instances across interfaces, while its inability to access basic project information or provide valid reviewer recommendations undermines user trust in the AI capabilities. Interface design issues compound these problems through competing interaction patterns, ambiguous feedback mechanisms, and inconsistent visual hierarchies. These challenges reflect broader themes of fragmented information architecture, insufficient system integration, and interaction models that prioritize technical implementation over cohesive user experience. Together, they create unnecessary cognitive friction during collaborative workflows that should be streamlined and intuitive.
However the merge request workflow does successfully abstract complex Git operations into an approachable web interface, allowing non-technical users to contribute changes without specialized knowledge.
Scorecard
| Metric | Rating | Notes |
|---|---|---|
| Challenge | 3 | Significant challenges in achieving the goal. |
| Satisfaction | 2 | A simple task made complicated. |
| Useful | 4 | Ultimately, being able to do MRs in the web UI is useful. |
| Average | 3 | C |
UX Analysis
| # | Severity | Component | Observation | Issue | Recommendation | Ref |
|---|---|---|---|---|---|---|
| 4.1 | Medium | Duo Chat Header | Recent Chats button and drawer title are aligned together in the header | Proximity suppresses prominence of Recent Chats feature due to visual pairing with title | Make Recent Chats a visually distinct element with centered "Duo" branding in the header |  |
| 4.2 | High | Duo Context Separation | Conversations started in IDE not available in web interface | Broken experience model creates false expectation of continuous interaction with a single assistant | Unify Duo conversations across interfaces or clearly brand as separate assistants (Duo Web vs. Duo IDE) | |
| 4.3 | High | Duo Web Context | Duo has no awareness of current view in web UI | Lack of contextual awareness severely limits assistant's usefulness for form completion and navigation guidance | Enable Duo to access current web view context to provide relevant, specific assistance | |
| 4.4 | High | Reviewer Recommendations | AI suggests reviewers who lack permission to perform reviews | Failure damages trust in all AI features when heavily marketed AI capability produces useless results | Implement permissions awareness in reviewer recommendation system |  |
| 4.5 | Low | MR Tab Counts | Merge request tabs show grey badges with dashes until clicked | Ambiguous status indicators suggest zero items rather than unknown/null state | Replace dashes with clearer loading indicators or remove badges until count is determined |  |
| 4.6 | Low | Reviewer Assignment | Competing "Assign" (blue) and "Edit" (grey) buttons in reviewer sidebar | Inconsistent visual hierarchy and overlapping functionality creates confusion about preferred workflow | Unify reviewer assignment into single, clear interaction path with appropriate visual prominence |  |
| 4.7 | Medium | Duo Access | Duo Chat disappears when drawers open from right side | Forced context switching requires users to memorize drawer content before seeking help | Make Duo Chat globally accessible without covering existing content |  |
| 4.8 | Medium | Duo Project Knowledge | Unable to answer basic questions about group membership or user permissions | Limited data access reduces assistant's ability to provide useful project-specific information | Expand Duo's access to project metadata including permissions and team structure | |
| 4.9 | Low | Table Interactions | Project members table lacks column sorting via header clicks | Non-standard table interaction pattern increases friction for data exploration | Implement standard column header sorting for all tabular data |  |
| 4.10 | Low | User Data Quality | Duplicate entries appear in Project members table | Data inconsistency creates confusion and reduces confidence in system accuracy | Resolve duplicate user entries in membership tables |  |
| 4.11 | Medium | Selection Feedback | Reviewer selection adds only subtle checkmark with menu remaining open | Insufficient feedback about successful assignment creates uncertainty about action completion | Provide clear text confirmation or auto-close menu after selection to reveal updated reviewer list |  |
Low-Hanging Fruit for Duo UX Improvements
Roughly in order from less to more complex:
-
Optimize for Narrow Views
- Remove/minimize chat bubbles to reclaim horizontal space used by padding, borders.
- Reduce indentation for list items.
- Reduce font size if needed to achieve more comfortable line lengths.
- Tweak the legal disclaimer for IDE Duo
-
Papercuts
- De-emphasize "Give Feedback" action.
- Fix spacing issues in suggested prompts, during empty state
-
Scrolling Fixes
- Maintain scroll position during response generation
- Only display scrollbar when necessary
- Add subtle indicators that content is still being generated outside of view.
- Duo Identity/Differentiation 4. Visually differentiate/label Web vs IDE version of Duo (Technically simple, but a big deal in marketing/presentation) 5. Replace "Recents" button in Duo's header with side navigation that can expose all functionality. Recent, New Chat, alongside all the slash commands (reset, etc)
-
Persistent Global Access to Duo
- Provide a reliable method of accessing Duo that is always available, and never blocked by any other UI element.
- Allow Duo to remain open while fully interacting with the rest of the GitLab UI. Duo should not cover up any of GitLab either.
Next Steps
- Share with team
- TBD