DesignerlyLoop: Bridging the Cognitive Gap through Visual Node-Based Reasoning in Human-AI Collaborative Design

TL;DR

The paper investigates bridging the cognitive gap between designers and large language models by introducing DesignerlyLoop, a visual node-based platform that externalizes and curates LLM reasoning within design workflows. Through a formative study and a within-subject user study with 20 designers, DesignerlyLoop is shown to improve design intent formation, reflective reasoning, and multi-dimensional integration, leading to higher creativity and design quality compared with a baseline tool. The system combines a Design Context Builder, a Design Reasoning Canvas, and an LLM Reasoning Chain Viewer to support controllable, multi-turn LLM interactions that are integrated into the design process. Findings reveal that explicit reasoning structures and cognitive scaffolding shift user engagement from mere exploration to strategic, reflective co-creation, with meaningful gains in usability, collaboration, and design outcomes. The work highlights practical implications for future HCI design: embedding AI as cognitive scaffolds with progressive disclosure and embracing complexity to cultivate advanced, agency-preserving human–AI collaboration in design.

Abstract

Large language models (LLMs) offer powerful support for design tasks, yet their goal-oriented, single-turn responses often misalign with the nonlinear, exploratory nature of design processes. This mismatch creates a cognitive gap, limiting designers' ability to articulate evolving intentions, critically evaluate outputs, and maintain creative agency. To address these challenges, we developed DesignerlyLoop, a visual node-based system that embeds LLM reasoning chains into the design workflow. The system enables designers to externalize and curate reasoning structures, iteratively organize intentions, and interact with LLMs as dynamic cognitive engines rather than static answer providers. We conducted a within-subject study with 20 designers, combining qualitative and quantitative methods, and found that DesignerlyLoop enhanced creative reflection, design quality, and interaction experience by supporting systematic engagement with both human and machine reasoning. These findings highlight the potential of structured, interactive visualization to transform human-AI co-creation into a reflective and iterative design process.

Figures (9)

• Figure 1: DesignerlyLoop comprises three main interfaces: (A) Design Context Builder Panel, (B) Design Reasoning Canvas, and (C) LLM Reasoning Chain Viewer. Users input design context in (a.1), generating an editable keyword pipeline (a.2). Clicking "Generate" (a.3) produces a node-link diagram in (B), supporting customized edits (e.g., add, delete, modify nodes). Double-clicking a node (b.1) opens (C-1), where users specify goals (c.1) and obtain LLM-generated reasoning nodes (c.2). Each node offers multiple design suggestions (c.3) and co-creation functions (c.4), including content addition, deletion, revision, or regeneration via prompt refinement (c.5). Finalized outputs can be "Output to Canvas" (c.6), saved (c.7) and checked alongside the canvas (C-2).
• Figure 2: Pipeline for LLM chain generation by the designer in Panel C. When double-clicking a design node, Panel C opens as a popup, where users (A) input a specific "goal" for in-depth exploration under the current design node; (B) click "Generate" to (C) map the input into structured prompts, including task, requirements, context, output, and examples; and (D) produce an LLM chain that generates both sequential and parallel chain structures with prompt requirements and output formats.
• Figure 3: Pipeline for LLM output generation within each chain node in Panel C, where users (A) "Run" a chain node to obtain the initial LLM output. The system then (B) applies an LLM prompt to identify the corresponding design stage in the Double Diamond model (Appendix \ref{['apx:prompt-sixdesignstages']}) and (C) applies another prompt to specify the reasoning method(s) (Appendix \ref{['apx:prompt-fourreasonings']}). Finally, (D) the system generates the refined LLM output accordingly.
• Figure 4: Generated reasoning chains in LLM Reasoning Chain Viewer may be sequential or parallel. Each chain node combines a primary and secondary reasoning method, selected from inductive, deductive, abductive, or analogical reasoning.
• Figure 5: Technical framework of DesignerlyLoop, indicating interaction workflow includes three main steps: (1) mapping design process to customized node-linked diagram via inputting design context, (2) curating design reasoning and (3) co-creation process in the LLM reasoning chain.