Conception: Design System & User Experience

Market Research We analyzed three product categories: AI chat platforms (ChatGPT, Claude, Perplexity), note-taking apps (Notion, Obsidian, Roam Research), and developer tools (VS Code, Linear, GitHub). This cross-category analysis revealed design patterns that work for power users: keyboard-first navigation, command palettes, customizable layouts, and dark mode defaults.

User Persona Development Through stakeholder interviews and user research, we identified three core personas: The Researcher (academic, needs citation management), The Writer (content creator, needs AI writing assistance), and The Knowledge Worker (professional, needs organizational systems). Each persona informed specific design decisions researchers need graph view, writers need inline AI commands, knowledge workers need powerful search.

Friction Point Mapping We mapped common friction points in existing tools: ChatGPT loses conversation history in long threads, Notion AI requires too many clicks to invoke commands, Obsidian graph view is overwhelming without filters. These insights shaped our core UX decisions stacked tabs for context persistence, inline slash commands for quick AI access, filterable graph view for usability.

Spatial Model Design We designed Conception's spatial model around a unified sidebar tree the primary navigation structure. Unlike typical apps that separate 'notes' and 'chats,' we made both first-class content items that coexist in the same hierarchy. This decision was controversial (diverges from user expectations) but ultimately successful users reported that it 'just makes sense' once they tried it.

User Flow Mapping We mapped five critical user flows: (1) Onboarding: Google sign-in → empty workspace → first AI query. (2) Research: AI question → cited answer → save to page → organize in folder. (3) Writing: Create page → add blocks → invoke AI commands → refine text. (4) Organization: Create folders → drag items → add tags → filter by tag. (5) Exploration: Open graph view → discover connections → click node → navigate to content.

Keyboard Shortcut Architecture We designed a comprehensive keyboard shortcut system covering 30+ actions, organized by context: Global shortcuts (Cmd+K search, Cmd+N new page, Cmd+/ command palette), Navigation (Cmd+1-9 tab switching, arrow keys tree traversal), Editor (Cmd+B bold, Cmd+I italic, / for AI commands), and Tab management (Cmd+[ and Cmd+] for prev/next). All shortcuts are discoverable via Cmd+? help panel.

Dark Mode First We committed to dark mode as the default and only theme. This decision was driven by three factors: (1) Target users spend hours in the app dark mode reduces eye strain, (2) Dark UI creates a focused, professional aesthetic aligned with brand positioning, (3) Single theme simplified design and development velocity. We ensured WCAG AA compliance through careful contrast ratio calibration: 4.5:1 for body text, 3:1 for large text.

Component Design Language We established design patterns for all major components: Buttons use rounded corners (8px radius) with solid fills for primary actions, outlined style for secondary. Cards have subtle shadows (0 2px 8px rgba(0,0,0,0.1)) and hover effects (slight elevation increase). Inputs have clear focus states with blue accent borders. Modals use backdrop blur and center positioning with smooth fade animations.

Iconography System We created a custom icon set with 50+ icons covering all UI needs: content types (page, chat, tag, folder), actions (add, delete, edit, search), AI features (citation, command, graph), and navigation (sidebar, tabs, graph view). Icons use 24px base size, 2px stroke width, and rounded stroke caps for visual consistency. Icons are monochrome (inherit text color) for flexibility across contexts.

Stacked Tab Prototype The stacked tab concept required multiple prototyping iterations. We built interactive Figma prototypes exploring different visual metaphors: overlapping cards, vertical sidebar list, horizontal tab bar with overflow. The winning design used horizontal tabs with visual stacking (tabs appear layered) and sliding animations between tabs. We prototyped the interaction timing (300ms transition) and easing curve (ease-in-out) to achieve smooth, satisfying navigation.

AI Command Flow We prototyped the inline AI command experience extensively. Early versions used a modal dialog for command selection, but this broke writing flow. We iterated toward slash commands (/) with inline menu, inspired by Notion and Linear. The menu appears at cursor position, filters as user types, and shows daily quota for each command. After command selection, AI response streams with typing animation (60ms per token) to create anticipation and show AI thinking process.

Graph View Interaction Graph view interaction design required careful attention to performance and usability. We prototyped zoom/pan controls with mouse wheel (zoom) and click-drag (pan). Node hover shows tooltip with title and type. Click selects node and highlights direct connections (fading unrelated nodes). Double-click opens content item. Right-click shows context menu (open in new tab, delete, add tag). Filter toggles in top-right corner allow hiding/showing content types with smooth fade animations.

Figma Component Library We built a comprehensive Figma component library with 120+ components organized into categories: Foundations (colors, typography, spacing, icons), Atoms (buttons, inputs, badges, tooltips), Molecules (cards, list items, navigation items), Organisms (sidebar, tab bar, command palette, modals), and Templates (page layouts, empty states, error states). Each component includes variants for all states (default, hover, active, focus, disabled) and documentation annotations.

Documentation & Guidelines We created design system documentation covering: (1) Design principles (intellectual minimalism, keyboard-first, unified complexity), (2) Component usage guidelines (when to use buttons vs links, modal vs inline actions), (3) Accessibility requirements (contrast ratios, focus indicators, keyboard navigation), (4) Motion design specs (transition timing, easing curves), (5) Voice and tone guidelines (concise, intellectual, not playful).

Developer Handoff We established a smooth design-to-development handoff process: Figma designs are organized to mirror code structure (components → pages → flows). Designs include redline specs for spacing, sizing, and responsive behavior. Interactive prototypes demonstrate complex animations and transitions. Design tokens (colors, spacing, typography) are exported as JSON and imported into Tailwind config. Weekly design reviews ensure implementation fidelity.

Usability Testing We conducted moderated usability testing with 12 participants across our three personas (researchers, writers, knowledge workers). Key findings: (1) Users loved the keyboard shortcuts but didn't discover them we added command palette and help panel, (2) Stacked tabs were confusing initially but users 'got it' after 5 minutes we added onboarding tooltip, (3) Graph view was overwhelming we added filters and focus mode, (4) AI command slash menu wasn't discoverable we added persistent hint in editor placeholder.

A/B Testing Key Interactions We A/B tested several contentious design decisions: (1) Sidebar position: left vs right → left won (familiar pattern), (2) Tab bar position: top vs bottom → top won (proximity to content), (3) Citation presentation: inline markers vs side panel → inline markers won (less disruptive), (4) AI command trigger: slash vs Cmd+K → slash won (more discoverable, Cmd+K reserved for global search).

Accessibility Audit We conducted comprehensive accessibility audits covering: (1) Color contrast: all text meets WCAG AA ratios (4.5:1 for body, 3:1 for large text), (2) Keyboard navigation: all interactive elements are keyboard-accessible with visible focus indicators, (3) Screen reader: semantic HTML structure with proper ARIA labels for all interactive elements, (4) Motion sensitivity: animations respect prefers-reduced-motion preference. Achieved WCAG AA compliance across the entire application.