Product Designer at OpenAI Workshop

Product Designer at OpenAI - Workshop Project

ChatGPT Canvas: Spatial Workspace

A spatial workspace for ChatGPT that transforms linear AI conversations into an interactive canvas for organizing and evolving logical units.

Developed during an intensive 2-day workshop, this AI-first project leverages Figma Make to prototype and simulate complex interaction logic quickly. Using AI-assisted and “vibe coding” workflows allowed me to move faster, iterate more confidently, and focus on product decisions rather than manual setup.

Brief

ChatGPT Canvas is a concept project focused on evolving the AI interface from a linear chat into a spatial, interactive workspace. Inspired by tools like FigJam and Cove.ai, it aims to create a seamless experience where users can transform standard AI responses into a visual canvas of draggable cards, allowing for better organization, editing, and long-term research management.

Problem

Linear chat UIs cause users to lose context, making it hard to organize, edit, reuse, and collaborate on insights over time. This lack of structure leads to "context loss" and prevents users from treating ChatGPT as a persistent workspace.

Goals

Transform ChatGPT from a transient chat interface into a persistent, visual workspace that empowers power users to organize, evolve, and co-create knowledge over time.

Design a "Split-View" Workspace: Create a layout that balances traditional chat on the left with a free-form spatial canvas on the right.

Enable Spatial Organization: Allow users to move beyond chronological lists to thematic, visual clusters of information via draggable cards.

Maintain Brand Consistency: Implement complex canvas features (zoom, pan, minimize) while strictly adhering to ChatGPT’s existing Design Library.

Scope

Core canvas layout

Card components - text cards, topic headers

Basic interactions - drag & drop, create & delete card, panning

Target Audience

Researchers, Knowledge Workers, Education/Academia, and Enterprise Teams.

Platforms

Desktop only

My Role

This project was created during a 2-day intensive workshop simulating a real-world product design environment at OpenAI. I worked individually on the design while collaborating closely with a Product Manager, Front-end Developer, and UX Lead through reviews, constraints, and feedback. The project followed a predefined PRD and focused on extending ChatGPT with a realistic, implementable feature.

Research Summary

Based on research and insights provided in the PRD, findings show that ChatGPT’s linear chat format makes it difficult for users to organize, revisit, and evolve valuable information over time. Power users such as researchers, designers, and enterprise teams frequently move AI-generated content into external tools like Notion or FigJam to add structure. This highlights an opportunity for a visual, card-based canvas that enables spatial organization and selective refinement of AI outputs directly within ChatGPT.

Persona

Dave, 35

Researcher

“When I'm doing research, I end up pasting the answers into Notion anyway. Why can't ChatGPT help me organize them here?”

Goal

To structure and evolve AI-generated insights into a permanent, reusable knowledge base.

Frustration

Losing valuable context in linear chat, having to manually paste and reorganize insights into external tools like Notion.

Problem statement

Dave is a researcher who needs a persistent, visual canvas to organize and connect his research findings because his valuable conversations are currently 'trapped in linear form' and he is forced to use external tools for structure.

User story

As a researcher, I want to organize Al-generated answers into topic cards so I can review and refine them later.

Competitive Audit

A competitive audit was conducted on four key competitors - Notion AI, Anthropic Claude, Google Gemini, and Cove.ai. The research revealed a significant "linear trap" in current AI tools - while platforms like Gemini and Claude are powerful generators, they lack the spatial flexibility required for complex, long-term research. Users frequently suffer from "copy-paste friction", where they are forced to manually move AI insights into external tools like Notion just to organize them. This creates an opportunity to transform the current ChatGPT’s linear canvas feature into a "visual memory" engine.

You can also explore the competitive audit table.

Goal Statement

The ChatGPT Canvas aims to achieve higher user retention and streamlined research workflows by providing a persistent, spatial workspace where users can organize AI-generated content into interactive, draggable cards.

Sketches

Draft iterations of the canvas

Canvas sketches _Page_1_Image_0001_edite

FIgma Make Prototype

Built in Figma Make, this prototype reimagines the ChatGPT interface through a dynamic, spatial Canvas Mode. While preserving the familiar linear conversation on the left, the core experience unfolds on a 2D plane with horizontal and vertical panning, where AI responses appear as independent, draggable cards rather than static text blocks.

The split-view layout is fully adjustable, allowing users to hide the chat for focused exploration or expand it for added context. Instead of a single threaded response, outputs are intelligently parsed into modular, resizable cards organized by topic. Users can regenerate an entire card or select specific text to trigger a contextual deep dive, without disrupting the rest of the workspace.

By eliminating the need to scroll through long conversation histories, this spatial approach transforms AI output into an organized, visual knowledge map.

Core Flow

Entry Point: Existing ChatGPT Interface

The flow begins on the familiar ChatGPT home screen. To ground the experience in a concrete use case, the prototype uses an example prompt: planning a five-day trip to Lisbon.

Rather than introducing a new entry pattern, Canvas Mode is triggered immediately after submitting the prompt. This decision is intentional to preserve existing user behavior, avoid introducing new UI affordances, and demonstrate how Canvas Mode could be integrated incrementally into ChatGPT as it exists today. At this stage, Canvas Mode is not a separate feature toggle, but a contextual evolution of the response experience.

Canvas Mode: Adjustable Split View

Upon submission, the interface transitions into Canvas Mode using a split-view layout:

The chat panel remains on the left, preserving the linear conversation model
The canvas appears on the right as a 2D plane that supports horizontal and vertical panning

The split view is fully adjustable, allowing users to collapse or expand the chat. This ensures continuity with ChatGPT’s existing interaction model while enabling spatial exploration.

Cards as the Primary Output Unit

AI responses are rendered as independent cards on the canvas rather than a single text block. Each card represents a distinct topic or sub-response, can be freely moved and rearranged, and can overlap with other cards, enabling non-linear organization.

Card Selection & Visual State

Cards support explicit selection:

A highlighted border appears around the selected card
The border color adapts to the user’s configured primary accent color in ChatGPT settings (blue in this prototype)

This ties the canvas behavior to an existing customization system, reinforcing consistency and reducing the need for new visual logic.

Conversational Context Awareness

When a card is selected, a context indicator appears above the chat input, informing the user that the next prompt will apply specifically to the selected card.

If the user proceeds - the AI regenerates or refines only the selected card’s content, and the rest of the canvas remains untouched.

This interaction pattern mirrors behavior currently implemented by tools like Cove.ai and is included to demonstrate scoped, context-aware iteration without disrupting the workspace.

Card-Level Actions

On hover, cards reveal quick actions: Duplicate and Delete. Selecting Delete triggers a confirmation modal, ensuring destructive actions are intentional.

Canvas Toolbar

The canvas includes a persistent toolbar that mirrors the behavior and placement of the current ChatGPT canvas toolbar. To stay within scope, only essential actions are introduced:

Add new card
Add title / text box
Attach files

Titles/Text Boxes

The canvas supports titles/text boxes that can be moved, resized, and overlapped just like cards. They can act as structural or explanatory elements within the canvas to allow users to annotate, label, and organize information without relying solely on AI-generated content.

Text-Level Interaction Within Cards

The prototype preserves an existing ChatGPT behavior for text selection - selecting text inside a card shows a floating toolbar offering formatting options and “Ask ChatGPT” option, which opens the chat input scoped to the selected text. When used:

The chat panel opens (if previously hidden)
ChatGPT responds only to the selected content
The response appears without affecting unrelated cards

This reinforces continuity with current ChatGPT functionality while extending it into a spatial environment.

ask chatgtp option selected from toolbar screen

Next Steps

The next phase would focus on deepening GPT-powered interactions at the card level. A key next step is enabling GPT-driven card creation, where AI responses automatically generate new, structured cards based on user prompts. This would further reduce manual organization and reinforce the canvas as the primary output surface rather than the chat thread.

What I Learned

This project gave me hands-on experience working in a realistic product team setup under tight deadlines. I practiced designing within a defined scope, iterating quickly, and incorporating feedback from PM, front-end, and design leads. The experience strengthened my ability to collaborate, communicate design decisions clearly, and deliver polished work in a fast-paced environment.