Inktrail

The Problem

I started by mapping the daily workflow of product managers, startup founders, and content teams. The pattern was consistent across every interview:

1. Draft in Google Docs or Notion 2. Design visuals in Canva or Figma 3. Brainstorm on Miro or FigJam 4. Record meetings in Otter or Fireflies 5. Publish via WordPress or custom CMS

Five tools. Five logins. Five different mental models. Every switch cost 10–15 minutes of context recovery. And when AI entered the picture, it made things worse — ChatGPT generated text in a chat window that then had to be copy-pasted and reformatted elsewhere.

Research: Group Interviews

I ran 12 group interview sessions across three segments — product managers, startup founders, and content teams. Each session focused on mapping their daily tool usage, identifying pain points around context-switching, and understanding how AI was (or wasn't) fitting into their workflows.

The patterns were remarkably consistent: every participant used 4+ tools daily, 83% were copy-pasting AI output into other apps, and 75% wanted one-click publishing but didn't have it.

Competitive Landscape

I mapped every major player against two axes: surface breadth (how many creation modes?) and AI depth (how useful is AI output?).

• Notion

  Strong docs, but no canvas, no design, no transcription. AI generates text in-line but can't create visual artifacts.

• Miro

  Great canvas, but documents are an afterthought. No AI design. No publishing.

• Canva

  Design-first, but not a workspace. No docs, no collaboration depth, no transcription.

• ChatGPT / Claude

  Powerful AI, but output is trapped in chat. You generate, then copy-paste into the real tool. AI as a sidecar, not a surface.

The gap was clear: nobody had built a single surface where AI outputs were native, editable files across docs, canvas, and audio — all publishable in one click.

Design Principles I Set

Before touching any screen, I established four principles that governed every decision:

• AI outputs are real files

  When AI generates a document, it's a real document — not a chat message. When it generates a design, it's editable vector elements on canvas. No copy-paste intermediary.

• One surface, multiple modes

  Docs, canvas, audio, and published pages all live in the same project space. Switching between them is a mode change, not an app change.

• Progressive complexity

  A new user should be productive in 30 seconds. Power features reveal themselves through use, not through onboarding wizards.

• Publish is a button, not a process

  Any document becomes a live webpage with one click. No CMS. No deploy pipeline. No waiting.

What I Tried and Killed

My first information architecture treated docs, canvas, and audio as separate "apps" with a sidebar switcher — basically tabs. It tested poorly because users kept asking "where did my document go?" when they switched to canvas mode.

I killed the tab model and redesigned it as a project-centric workspace: everything lives inside a project, and you create different artifacts (doc, canvas, recording) within it. The mental model shifted from "which app am I in?" to "which project am I working on?" Context-switching anxiety disappeared in testing.

Usability Testing

I ran two rounds of usability testing with 8 participants — the first round on the killed tab-based IA, the second on the project-centric architecture that shipped.

The results were dramatic: task completion went from 40% to 100%, average task time dropped from 30.6 seconds to 7.6 seconds, and context-loss incidents dropped from 62% to zero. The project-centric model eliminated the "where am I?" anxiety entirely.

Information Architecture — Shipped

The shipped IA centres everything around the project. Sidebar navigation gives access to projects, search, templates, and shared content. Inside each project, users create documents, canvases, recordings, and published pages as artifacts — not separate apps. The AI layer runs across all surfaces with a model chooser, inline commands, and context pulled from connected apps.

Core User Flows

I mapped four primary paths through the workspace — AI document creation, canvas diagramming, template quick-start, and meeting-to-document conversion. Each flow was designed to be completable in under 60 seconds with minimal navigation. The AI model chooser appears at decision points, not as a persistent distraction.

Home & Templates

The home screen had to answer one question instantly: "What are we creating?" I designed it as a launchpad — an AI prompt bar at the top, creation mode switcher (Document, Canvas, Design) in the middle, and a template gallery below. The prompt bar accepts natural language and routes to the right surface automatically.

The template system was a key adoption driver. I designed 100+ AI-native templates across PRDs, pitch decks, strategy docs, go-to-market plans, and more — each one pre-wired with AI actions so users could generate a complete first draft in seconds.

Project Workspace

Everything in Inktrail lives inside a project. Documents, canvases, and recordings are artifacts within that project — not separate apps. The sidebar shows your project tree, and switching between artifacts is instant. No page reload, no context loss.

I designed the workspace with an AI prompt bar that persists across every view. Describe what you want to create, and the AI drafts it directly into the right surface. The project becomes the unit of work, not the tool.

The AI Integration Challenge

The hardest design problem wasn't the workspace structure — it was making AI feel native without feeling intrusive. I explored three models:

• Model 1: AI sidebar (killed)

  A persistent chat panel next to the editor. Users ignored it — it felt like a separate tool bolted on. Exactly the problem we were solving.

• Model 2: Inline AI commands (kept)

  Type a slash command or highlight text and AI acts directly on the content. Output appears in-place as real, editable content. This felt magical — AI as a collaborator, not a chatbot.

• Model 3: AI model chooser (kept)

  Users pick Claude, GPT-4o, or Gemini per generation. No lock-in. The AI is the engine, not the brand. This became a key differentiator — power users loved the control.

Document Editor — AI Drafting

The document editor is where AI and manual creation merge seamlessly. Users can write manually with a full rich-text toolbar — formatting, tables, code blocks, callouts, embeds — or prompt AI to draft entire sections.

What makes it different: AI doesn't generate text in a chat window. It writes directly into the document as real, editable content with proper formatting, headings, bullet points, and even inline charts. The AI thinks through steps visibly (thinking, working, writing to document) so users understand what's happening and can intervene at any point.

Document Editor — Manual Creation

Not everything needs AI. The editor is a full-featured writing environment on its own — rich formatting, slash commands, drag-and-drop blocks, and real-time collaboration. I designed it so AI and manual creation are interchangeable at any point in the workflow. Start with AI, refine manually. Start manually, ask AI to expand a section. No mode switching required.

Visual Canvas

The canvas surface handles diagrams, flowcharts, wireframes, mind maps, and data visualisation on an infinite zoomable surface. I designed the toolbar to surface quick actions — shapes, connectors, charts, and AI generation — without overwhelming the space.

The AI can generate charts (bar, radar, line) and diagrams from natural language prompts. Outputs are fully editable vector elements, not static images. I designed the interaction model for this; engineering built the rendering engine. This was the breakthrough that set Inktrail apart from tools like Canva where AI outputs are flat images.

Third-Party Integrations

I designed the integrations panel to connect external tools — Google Drive, Gmail, Google Calendar, Slack, GitHub, Jira — directly into the workspace. Connected apps feed context to the AI, so when a user asks "draft a status update," the AI can pull from their calendar, Slack threads, and Jira tickets automatically.

The integration flow is one-click OAuth per service. I kept the UI minimal: a modal with clear connect/disconnect states. No configuration pages, no setup wizards.

Design System

I built the design system in parallel with the product — not after. Every component was designed to work across all four surfaces.

The system used Geist as the UI font and Playfair Display for published content. Dark mode was built from day one (not retrofitted) because the canvas surface demanded it. Every component had three states: resting, AI-active (subtle pulse animation), and collaborative (showing live cursors).

Pricing & Conversion Design

I designed the pricing architecture to align with how users actually adopt tools:

Free tier is genuinely useful — unlimited docs and canvas, 300 AI credits/month. No artificial walls. The upgrade trigger is volume (more AI credits, more transcription hours, more collaborators), not locked features. This was a deliberate choice against the "crippled free tier" pattern that erodes trust.

Reflection

The biggest lesson: in a multi-surface product, consistency of interaction patterns matters more than consistency of visual style. A canvas and a document look fundamentally different — but if selection, AI invocation, and collaboration feel the same, users never feel lost.

What I'd do differently: I'd invest earlier in cross-surface linking. The ability to embed a canvas element inside a document (or vice versa) was deprioritised for launch, but it's the feature that will make the "one surface" promise feel complete.